Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

short-css-vars

1.1.0 • Public • Published

short-css-vars

NPM Version Build Status License MIT

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:

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

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'
}

Install

npm i short-css-vars

DownloadsWeekly Downloads

30

Version

1.1.0

License

MIT

Unpacked Size

16.9 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar