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.
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.
Contributing
Pull requests are welcome. If you add functionality, then please add unit tests
to cover it.
License
MIT © Ben Briggs