simple-vars not resolved about postcss-custom-media HOT 12 CLOSED

According to specs you cannot do that. Media queries are different than properties values that can changes with cascade. @tabatkins gave me a pretty good explanation once, cannot remember completely nor find it :/

from postcss-custom-media.

Right. "Variables" are just custom properties. Properties apply to elements, and the var() function takes the value of the corresponding property on the element and substitutes it in.

@media isn't an element, and so doesn't have any property to take from.

from postcss-custom-media.

interesting and understood. Any thoughts on ways to manage custom media values? I'm using a modular scale for sizing, and it essentially gives a list of sizes in em. Do I really have to manually put in the value? Feels archaic :-)

from postcss-custom-media.

Looks like I could use something like postcss-simple-vars to do the trick. Thanks and sorry for the false alarm!

from postcss-custom-media.

Note as well that the CSSWG is developing custom media queries http://dev.w3.org/csswg/mediaqueries/#custom-mq which'll help you out natively.

from postcss-custom-media.

@tabatkins not really - as far as I understand it, I will have to supply the actual value to the custom media query when I'm creating it, so I couldn't do something like:

:root {
  --ms6: 4.5em;
}

@custom-media --palm (min-width: var(--ms6));

@media (--palm) {
  html {
    color: red !important;
  }
}

from postcss-custom-media.

Yes, you have to put the value into the MQ. If you're using the value in both Variables and MQs, you'll have to repeat it. CSS is unlikely to sprout macros that allow you to substitute values into arbitrary contexts.

from postcss-custom-media.

@MoOx looks like it doesn't even work with postcss-simple-vars:

INPUT:

@custom-media --palm (min-width: $palm);
@media (--palm) {
    html {
         background: red !important;
    }
  }

OUTPUT:

@media (min-width: $palm) {
    html {
         background: red !important;
    }
  }

from postcss-custom-media.

@VinSpee very strange, because simple vars should support variables in custom at-rules.

What is your plugins order? Can you show me how you define $palm?

from postcss-custom-media.

@ai node.params.indexOf('$(') you look for $(.

postcss-custom-media is doing his job here so I am closing this issue.

from postcss-custom-media.

@MoOx nope, I call bothSyntax function for params. But you are right, it is relevant to simple-vars.\

@VinSpee please open issue here https://github.com/postcss/postcss-simple-vars/issues/new

from postcss-custom-media.

I opened postcss/postcss-simple-vars#3 which is causing this issue. Thanks all

from postcss-custom-media.