1. postcss-reduce-idents
Reduce custom identifiers with PostCSS.
postcss-reduce-idents
Package: postcss-reduce-idents
Created by: cssnano
Last modified: Wed, 24 Apr 2024 21:34:07 GMT
Version: 7.0.0
License: MIT
Downloads: 2,882,744
Repository: https://github.com/cssnano/cssnano

Install

npm install postcss-reduce-idents
yarn add postcss-reduce-idents

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, custom counter values and grid area definitions. 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.

gridTemplate

Type: boolean
Default: true

Pass false to disable reducing grid-template, grid-area, grid-column, grid-row and grid-template-areas 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.

Contributors

See CONTRIBUTORS.md.

License

MIT © Ben Briggs

Dependencies

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code