postcss-reduce-idents

Reduce custom identifiers with PostCSS.

With npm do:

npm install postcss-reduce-idents --save

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.

@keyframes whiteToBlack {
    0% {
        color: #fff
    }
    to {
        color: #000
    }
}

.one {
    animation-name: whiteToBlack
}

@keyframes a {
    0% {
        color: #fff
    }
    to {
        color: #000
    }
}

.one {
    animation-name: a
}

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 for more examples.

See the PostCSS documentation for examples for your environment.

Type: boolean
Default: true

Pass false to disable reducing content, counter-reset and counter-increment declarations.

Type: boolean
Default: true

Pass false to disable reducing keyframes rules and animation declarations.

Type: boolean
Default: true

Pass false to disable reducing counter-style rules and list-style and system declarations.

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

MIT © Ben Briggs