Reuse variables in all css files - using postcss-cssnext and specifically postcss-custom-properties with css-modules

Question

I am using css-modules along with postcss-cssnext , and specifically its postcss-custom-properties feature

I am also using react-boilerplate (https://github.com/mxstbr/react-boilerplate/) and this very nice boilerplate comes with these modules used in it

My folder structure is :

Main folder
    app
        containers
            App
                styles.css
                index.js
            HomePage
                styles.css
                index.js

        components
            Component1
                styles.css
                index.js
            Component2
                styles.css
                index.js

App/styles.css

:root {
    --varA: #1eb3ab;
    --varB: #1eb3ab;
    --varC: #1eb3ab;
    --varD: #1eb3ab;
    --varE: #1eb3ab;

}

body {
    color: var(--varA)  /*works fine */
}

I want to use these vars in App/styles.css (or I am happy to define them somewhere else in which case how do I do it) in other containers an components

I have tried (for using in css-modules)

HomePage/index.js

..
..

<div className={styles.myClass}> Content </div>

..

HomePage/styles.css -- approach 1

:root{
  --varA: tealish from "containers/App/styles.css";     /* DOESNT WORK */
}

.myClass {
    color: var(--varA)
}

HomePage/styles.css -- approach 2

.myClass {
    color: var(--varA from "containers/App/styles.css")     /* DOESNT WORK  AS WELL*/
}

What is the most elegant solution? I want to have all the variables in one file/one place and use them in all the css files nicely

I also saw the variables in postcss-custom-properties https://github.com/postcss/postcss-custom-properties#variables . But I am not sure how to use in my webpack definition which uses postcss-cssnext

webpack.dev.babe.js - how to put the VARIABLES option here

// Process the CSS with PostCSS
  postcssPlugins: [
    postcssFocus(), // Add a :focus to every :hover
    cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
      browsers: ['last 5 versions', 'IE > 8'], // ...based on this browser list

      // I think I need to add some line here, but not sure what


    }),
    postcssReporter({ // Posts messages from plugins to the terminal
      clearMessages: true,
    }),
    postcssAnimation(),
  ],

Answer 1

I would recommend postcss-custom-properties "variables" options.

You have an example in the documentation

http://cssnext.io/usage/#features

cssnext({
  features: {
    customProperties: {
      variables: {
        mainColor: "red",
        altColor: "blue",
      }
    }
  }
})

Answer 2

I usually achieve this with the help of postcss-import, so every module that needs to consume "variables" needs to import the partial.

@import 'path/to/variables';

.myClass {
  color: var(--colorGray);
}

That approach works with custom properties but also custom property sets.

A similar question.