postcss-reduce-idents

Reduce [custom identifiers][idents] with PostCSS.

Install

With npm do:

npm install postcss-reduce-idents --save

Example

var postcss = require('postcss');

var css = '@keyframes whiteToBlack{0%{color:#fff}to{color:#000}}.one{animation-name:whiteToBlack}';
console.log(postcss([ require('postcss-reduce-idents') ]).process(css).css);

// => '@keyframes a{0%{color:#fff}to{color:#000}}.one{animation-name:a}'

This module will rename custom identifiers in your CSS files; it does so by converting each name to a index, which is then encoded into a legal identifier. A legal custom identifier in CSS is case sensitive and must start with a letter, but can contain digits, hyphens and underscores. There are over 3,000 possible two character identifiers, and 51 possible single character identifiers that will be generated.

Note that this module does not handle identifiers that are not linked together. The following example will not be transformed in any way:

@keyframes fadeOut {
    0% { opacity: 1 }
    to { opacity: 0 }
}

.fadeIn {
    animation-name: fadeIn;
}

It works for @keyframes, @counter-style and custom counter values. See the documentation for more information, or the [tests][test.js] for more examples.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.