css-rename

a tool that allow you to rename css selector in your css files, html and javascript, in order to save some bytes in production

#Usage As far as HTML and CSS minification, I use yiminghe class-id-minifier grunt module. It also creates a JS Object which maps extended selectors and minified ones. On top of this map, css-rename is able to convert selectors.

let's say you have this original HTML markup

<div class="content-CTR">
    <div class="content-CNT">1</div>
</div>
<div class="content-CTR">
    <div class="content-CNT">2</div>
</div>

that after the minification becomes

<div class="a">
    <div class="b">1</div>
</div>
<div class="a">
    <div class="b">2</div>
</div>

in your javascript you need to query DOM. Well you can do it with original selectors and css-rename takes care of converting your query

 var nodes = cssr.dom.querySelectorAll(".content-CTR > .content-CNT", document.body); // [div.b, div.b]

If you need just the query, not the DOM element, you can use getCssName function. For example to use it with jQuery

 var query = cssr.dom.getCssName(".content-CTR > .content-CNT");//.a > .b

 $(query).doSomething();

#Sample sample folder contains a demo app that minify CSS, HTML and creates a map of selectors.

The grunt task that allow you to minify is class-id-minifier

module.exports={

    sample: {
        options: {
            jsMapFile: 'sample/minified/map.js',
            jsMapDevFile: 'sample/map.js',
            jsWrapper:"define(function(){return {{code}};})"
        },
        files: [
            {
                expand: true,
                cwd: 'sample',
                src: '*.{html,css}',
                dest: 'sample/minified'
            }
        ]
    }
};