dowjones123 dowjones123 - 1 month ago 10
React JSX Question

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

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

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",
      }
    }
  }
})
Comments