postcss-reduce-idents

What is postcss-reduce-idents?

The postcss-reduce-idents package is a PostCSS plugin that reduces the size of CSS by minimizing identifier names. It specifically targets keyframes and counter styles, renaming them to shorter identifiers to save space.

What are postcss-reduce-idents's main functionalities?

Reduce Keyframe Identifiers

This feature reduces the length of keyframe identifiers. In the example, the keyframe name 'longAnimationName' will be shortened to a more compact identifier.

const postcss = require('postcss');
const reduceIdents = require('postcss-reduce-idents');

const css = `
@keyframes longAnimationName {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: longAnimationName 1s;
}`;

postcss([reduceIdents()])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

Reduce Counter Style Identifiers

This feature reduces the length of counter style identifiers. In the example, the counter style name 'longCounterName' will be shortened to a more compact identifier.

const postcss = require('postcss');
const reduceIdents = require('postcss-reduce-idents');

const css = `
@counter-style longCounterName {
  system: numeric;
  symbols: \2022;
}

ol {
  list-style: longCounterName;
}`;

postcss([reduceIdents()])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

Other packages similar to postcss-reduce-idents

cssnano

cssnano is a modular minifier that optimizes CSS for production. It includes a variety of plugins, including one for reducing identifier names, making it a more comprehensive solution compared to postcss-reduce-idents.

clean-css

clean-css is a fast and efficient CSS optimizer that can minify CSS files. While it does not specifically target identifier reduction, it provides a broad range of optimizations that can reduce the overall size of CSS files.

csso

csso (CSS Optimizer) is a CSS minifier that performs structural optimizations. It can reduce the size of CSS files by merging rules, removing redundant properties, and more. It offers a different approach to optimization compared to postcss-reduce-idents.

README

postcss-reduce-idents

Reduce custom identifiers with PostCSS.

Install

With npm do:

npm install postcss-reduce-idents --save

Example

Input

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
}

Output

@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.

Usage

See the PostCSS documentation for examples for your environment.

Contributing

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

License

MIT © Ben Briggs