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
, custom counter
values and grid area definitions. 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.
Type: boolean
Default: true
Pass false
to disable reducing grid-template
, grid-area
and grid-template-areas
declarations.
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.
Thanks goes to these wonderful people (emoji key):
| Ben Briggs💻 📖 👀 ⚠️ | Bogdan Chadkin⚠️ 💻 | Guillermo Rauch💻 📖 ⚠️ | Sylvain Pollet-Villard💻 📖 ⚠️ | | :---: | :---: | :---: | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © Ben Briggs
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.