hash-css-selector

A function to hash CSS selectors, can be used with postcss-modules to generate short static unique class names.

Usage

hashCSSSelector returns a 8 character long hash of the given string. The function is deterministic, so the same input will always result in the same output.

1import { hashCSSSelector } from 'hash-css-selector';
2
3hashCSSSelector('test-class'); // -> 'm-a530cc7d'
4hashCSSSelector('another-test-class'); // -> 'm-c43ac187'
5
6// Default prefix is 'm'
7// Customize prefix by passing a second argument
8hashCSSSelector('test-class', 'my-prefix'); // -> 'my-prefix-a530cc7d'

Usage with postcss-modules

With default m prefix:

1import { generateScopedName } from 'hash-css-selector';
2
3postcss([
4  require('postcss-modules')({
5    generateScopedName: generateScopedName,
6  }),
7]);

With custom prefix:

1import { createGenerateScopedName } from 'hash-css-selector';
2
3postcss([
4  require('postcss-modules')({
5    generateScopedName: createGenerateScopedName('custom-prefix'),
6  }),
7]);

License

MIT