Nutella with Pepperoni and Mushrooms

    postcss-reduce-idents
    TypeScript icon, indicating that this package has built-in type declarations

    5.2.0 • Public • Published

    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

    Install

    npm i postcss-reduce-idents

    DownloadsWeekly Downloads

    651,633

    Version

    5.2.0

    License

    MIT

    Unpacked Size

    22.2 kB

    Total Files

    19

    Last publish

    Collaborators

    • beneb
    • trysound
    • ludovicofischer
    • ai
    • chriseppstein
    • andyjansson
    • evilebottnawi
    • cssnano-bot