short-css-vars

Utility to shorten the names of CSS variables in stylesheets.

CSS variables are renamed with a unique hash that is consistent across processed files. This allows you to have common style files that reference variables with varying values defined in theme files.

Usage

For many cases you can simply configure these plugins in your build chains:

• postcss-short-css-vars
• babel-plugin-short-css-vars

Otherwise, see the API docs below to use the utility directly.

Formatting

The default formatter uses the popular string-hash with a djb2-like algorithm, then base-36 encodes the result. In the rare chance of collisions, an error will be thrown with the colliding names. A custom formatter can provided via the options

Installation

$ npm install short-css-vars

ShortCssVars

Shorten lengthy CSS variable names

Kind: global class

• ShortCssVars
  • new ShortCssVars([options])
  • .replaceName(varName)
  • .replaceCss(css)
  • .getMap()

new ShortCssVars([options])

Each instance keeps track of renamed variables to check for collisions and to provide a mapping of changed names.

| Param | Type | Description | | --- | --- | --- | | [options] | object | Optional configurations | | [options.formatter] | function | Custom formatter | | [options.ignore] | RegExp | string | function | Rule to ignore certain variable names |

shortCssVars.replaceName(varName)

Shortens the name part of a variable string

Kind: instance method of ShortCssVars

| Param | Type | Description | | --- | --- | --- | | varName | string | Variable name including -- prefix |

shortCssVars.replaceCss(css)

Shortens the names of variables throughout CSS

Kind: instance method of ShortCssVars

| Param | Type | Description | | --- | --- | --- | | css | string | Text containing CSS variables |

shortCssVars.getMap()

Get a mapping of original names to shortened names

Kind: instance method of ShortCssVars
Example

{
  'long-variable-name-that-defines-a-particular-color': '1vf2dsn'
}