Css-loader: CSS Variables

[moretti]

It would be nice to have a simple way for defining variables.
Inheritance is a nice feature, but it doesn't cover every use case.

How about supporting the :root pseudo-class selector, so that we could have:

variables.css

.colors {
  --color-red: red;
  --color-blue: blue;
}

.fontSizes {
  --font-size-normal: 12px;
  --font-size-large: 14px;
}

component.css

:root {
  extends: colors from "shared/styles/variables.css";
}

.foo {
  color: var(--color-red);
}

transpiled to:

:root {
  --color-blue: blue;
  --color-red: red;
}

.foo {
  color: var(--color-red);
}

This works out of the box in Firefox and it can be transpiled back to CSS2 with postcss-custom-properties

[moretti]

I found an alternative solution by removing importLoaders from css-loader and using postcss-import instead.

With the following configuration in webpack.config.js:

module: {
  loaders: [
    { test: /\.css$/, loaders: ['style-loader', 'css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]', 'postcss'] }
  ]
},

postcss: [
  require('postcss-import'),
  require('postcss-color-rebeccapurple'),
  require('postcss-custom-properties')()
  require('autoprefixer-core')
],
// ...

I can transpile something like:

colors.css

:root {
  --color-red: red;
}

component.css

@import url("../shared/styles/colors.css");

.foo {
  color: var(--color-red);
}

to:

.Component__foo___16yOh {
 color: red;
}