3

I am just wondering what would be the best approach to using cssnext custom properties like these, alongside css modules in react.

Is there a way to share these across modules ?

:root{
  --primary: pink;
  --fontSize: 1rem;
  --fullWidth: 100%;
  --color: red;
  --gutter: 1.618rem;
}
@custom-media --small-viewport (max-width: 30em);
@custom-media --large-viewport (min-width: 75em);
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

EDIT: *** ok i tried this, thought it worked but hasn't

:global(:root) {
  --primary: pink;
  --fontSize: 1rem;
  --fullWidth: 100%;
  --color: pink;
  --gutter: 1.618rem;
}
user3224271
  • 1,214
  • 3
  • 13
  • 22

2 Answers2

2

Because the postcss-loader only transforms a single file at a time you must import your custom properties, e.g.

@import './root.css';

.foo {
    color: var(--primary);
}
Richard Scarrott
  • 6,638
  • 1
  • 35
  • 46
1

CSS Modules should only handle selectors that are classnames (that start with a dot). So it should not be an issue and you should be able to use those custom definition as soon as they are in the file. You can use postcss-import to inline your file that contains global definitions.

Another solution is to define this global values using postcss plugin options:

MoOx
  • 8,423
  • 5
  • 40
  • 39
  • +1 for MoOx that using postcss-custom-properties is good way to go. Another way I used is postcss-advanced-variables - you define your global variables in a javscript file and they do not need to be imported. You will need something like webpack to define the path to your js file, [see this link](https://github.com/jonathantneal/postcss-advanced-variables). –  Aug 16 '16 at 03:42