search

postcss / postcss-simple-vars

PostCSS plugin for Sass-like variables
MIT License
415 stars 36 forks source link

Question: simple vars in media query #114

Closed inomn closed 2 years ago

inomn commented 2 years ago

Hi! I'm trying to migrate from SASS to PostCSS, and currently facing an issue with media queries.

// media.pcss

$media-m: "min-width: 600px";

// button.pcss

.root {
  @media ($media-m) {
    color: red;
  }
}

Output CSS file

@media ("min-width: 600px") {
  .root {
    width: 200px;
    color: red;
  }
}

The issue here is " around the media query rule and also WebStorm is not happy about this syntax

Screenshot 2022-05-13 at 13 15 17

Any suggestions on how to fix this issue? Thanks in advance!

p.s. my plugins chain:

'postcss-simple-vars'
'postcss-calc'
'postcss-custom-media'
'postcss-mixins'
'postcss-nested-ancestors'
'postcss-atroot'
'postcss-current-selector'
'postcss-nested'
'postcss-mixins'
'autoprefixer'
'postcss-flexbugs-fixe
'postcss-easy-import'
ai commented 2 years ago

This syntax is non-standard. This is why WebStorm CSS linter print you an warning.

I recommend using CSS Custom Media from postcss-preset-env https://preset-env.cssdb.org/features/#custom-media-queries