css modules & cssnext custom properties in react + webpack

Question

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;
}

It seems like you should be able to just @include them in your other css files. Can you not? What have you tried? — Hawken MacKay Rives
– Hawken MacKay Rives, Commented Apr 27, 2016 at 3:19

Richard Scarrott · Accepted Answer · 2016-05-17 09:24:59Z

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);
}

answered May 17, 2016 at 9:24

Richard Scarrott

7,0932 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MoOx · Accepted Answer · 2016-04-28 09:05:40Z

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:

answered Apr 28, 2016 at 9:05

MoOx

9,0415 gold badges43 silver badges39 bronze badges

1 Comment

user6144056 Over a year ago

+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.

Collectives™ on Stack Overflow

css modules & cssnext custom properties in react + webpack

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related