Support for hashing CSS variables

[devongovett]

This adds support for hashing CSS dashed idents (i.e. --foo), most commonly CSS variables, just like other custom idents in CSS modules (e.g. class names). This is opt-in because it was not originally handled by the CSS modules support in other tools.

Hashing dashed idents keeps these declarations local to the module just like other names in CSS modules. The names are included in the mapping passed to JS just like other names as well, meaning you can reference a CSS variable like this:

import * as style from './style.module.css';

style['--foo']

This also means which variables are used can be tracked across files, and unused variable declarations can be automatically removed! Closes #58.

By default, all variable references are scoped to the module, so you can only reference variables declared in that file. A syntax extension has been added so that identifiers can be referenced between different CSS files. It is similar to the composes property.

.foo {
  color: var(--color from "./colors.module.css");
}

You can also reference a global variable like this:

.foo {
  color: var(--color from global);
}

This applies not only to CSS variables but anywhere the <dashed-ident> production is used in CSS. Right now that means @font-palette-values and @property, but others such as @custom-media and @color-profile are coming.

All of this is only enabled when the dashedIdents config option is turned on.

{
  "cssModules": {
    "dashedIndents": true
  }
}