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.

API

reduceIdents([options])

options

counter

Type: boolean
Default: true

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

keyframes

Type: boolean
Default: true

Pass false to disable reducing keyframes rules and animation declarations.

counterStyle

Type: boolean
Default: true

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

encoder

Type: function
Default: lib/encode.js

Pass a custom function to encode the identifier with (e.g.: as a way of prefixing them automatically).

It receives two parameters:

• A String with the node value.
• A Number identifying the index of the occurrence.

Contributing

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

License

MIT © Ben Briggs