Niche Portobello Mushroom

    mini-css-class-name

    0.13.0 • Public • Published

    mini-css-class-name

    test status npm version

    Minimum size unique CSS class names generator. It can be used with Webpack and Gatsby ecosystems.

    Install

    npm i mini-css-class-name --save-dev
    # or
    yarn add mini-css-class-name -D

    How to use

    const miniCssClassName = require('mini-css-class-name');
    
    const generate = miniCssClassName({
      prefix: 'x__',
      suffix: '--y',
    });
    
    generate(); // x__a--y
    generate(); // x__b--y
    generate(); // x__c--y

    Reset method

    const miniCssClassName = require('mini-css-class-name');
    
    const generate = miniCssClassName();
    
    generate(); // a
    generate(); // b
    generate(); // c
    
    generate.reset();
    
    generate(); // a

    Exclude Pattern

    You can use a regular expression to exclude any characters from the template string.

    // remove underscore and dash
    const generate = miniCssClassName({ excludePattern: /[_-]/g });
    
    // keep only alphabet characters
    const generateABC = miniCssClassName({ excludePattern: /[^a-z]/gi });

    Default template string

    'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-0123456789';

    CSS Modules

    There are two ways to plugin it's depending on css-loader version.

    css-loader <= 1.x || ~2.x

    const createLocalIdent = require('mini-css-class-name/css-loader');
    
    const localIndent = createLocalIdent(/* options */);
    
    module.exports = {
    
      // webpack config ...
    
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: 'css-loader',
            options: {
              modules: true,
              getLocalIdent: localIndent,
            },
          },
        ],
      },
    };

    css-loader >= 3.0.0

    const createLocalIdent = require('mini-css-class-name/css-loader');
    
    const localIndent = createLocalIdent(/* options */);
    
    module.exports = {
    
      // webpack config ...
    
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: 'css-loader',
            options: {
              modules: {
                getLocalIdent: localIndent,
              },
            },
          },
        ],
      },
    };

    Documentation about css-modules

    Gatsby

    You also can use it with Gatsby v2 or v3

    gatsby-plugin-mini-css-class-name

    Options

    Name Type Default Description
    prefix {String} '' A custom prefix will be added to each class name
    suffix {String} '' A custom suffix will be added to each class name
    excludePattern {RegExp} null A regular expression for removing characters

    License

    MIT

    Install

    npm i mini-css-class-name

    DownloadsWeekly Downloads

    1,855

    Version

    0.13.0

    License

    MIT

    Unpacked Size

    9.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • shoonia