andywer/postcss-theme

How to use with cssnext ?

Opened this issue · 3 comments

ethyde commented

Hi,

It's would be cool if this module to be compatible with cssnext, but how to use variable from :root{} or @Custom-Media. It's seem to be possible with postcss-modules-values.

andywer commented

Hey @ethyde.

Since postcss-theme is supposed to be passed to the PostCSS plugins array like any other plugin, too, I don't see the problem of putting cssnext into the plugins array as well.

Maybe you can provide a minimal example of what you mean?

ethyde commented

Thanks for your quick answer @andywer !

I have a commun vars file where

// commun/assets/vars.css
:root {
  --color-primary: blue;
  --bg-primary: white;
  --color-alt: darkblue;
  --bg-alt: #CCC;
  --color-inverse: white;
  --bg-inverse: black;
}

But how to import this vars has @value ?
I try something like that :

// view/article/assets/style.css
@value --color-primary from "vars.css"

.element {
  background-color: var(--color-inverse)
}

But I have a warning :

22:5	⚠  variable '--color-inverse' is undefined and used without a fallback [postcss-custom-properties]

It's totally possible that I did not understand at all

andywer commented

Ahhh, you are talking about the CSS vars! I fear that might not be possible... @value vars and cssnext vars are not compatible. Sorry :-/

  • 👎1