ausi/cq-prolyfill classname escaper Sass function

cq-prolyfill-sass-escaper.js

/**
 * This node-sass function can be used to escape class names generated for ausi/cq-prolyfill.
 * https://github.com/ausi/cq-prolyfill
 */
 
var nsass = require('node-sass');
 
var sassFunctions = {
    /**
     * Sass function to escape [!=><] characters with a
     * backslash in Sass.
     */
    'cqEscape($rule)': function (rule) {
        var esc = rule.getValue();
        
        esc = esc.replace('!', '\\!');
        esc = esc.replace('=', '\\=');
        esc = esc.replace('<', '\\<');
        esc = esc.replace('>', '\\>');

        while (esc.indexOf(' ') !== -1) {
            esc = esc.replace(' ', '');
        }

        var ret = new nsass.types.String();

        ret.setValue(esc);

        return ret;
    }
};

/**
 * Usage with gulp-sass.
 */
var gulp = require('gulp');
var gsass = require('gulp-sass');

gulp.task('sass', function () {
    
    return gulp.src('src/sass/**/*.scss')
        .pipe(gsass({
            functions: sassFunctions
        }))
        .pipe(gulp.dest('assets/css'));
        
});

example.scss

/**
 * Example mixin for generating a container query CSS class.
 */
 
@mixin container($rule) {
  &.\:container\(#{cqEscape($rule)}\) {
    @content;
  }
}

.container {
  width: 100%;
  max-width: 720px;
  
  .child {
    color: red;
    
    // The following generate the following CSS rule:
    //     .container.\:container\(width\>\=360px\) .child { ... }
    // Which can be matched by assigning the classname
    //     `:container(width>=360px)`
    // For `.container` elements.
    @include container('width >= 360px') {
      color: blue;
    }
  }
}