simple-vars not resolved

[VinSpee]

Actual

When using a custom property (as outlined in postcss-custom-properties, my custom property is not resolved inside a custom media definition.

INPUT:

:root {
  --ms6: 4.5em;
}

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

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

OUTPUT:

@media min-width: var(--ms6) {
  html {
    color: red;
  }
}

Expected

My custom property should be resolved.

INPUT:

:root {
  --ms6: 4.5em;
}

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

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

OUTPUT:

@media (min-width: 4.5em)  {
  html {
    color: red;
  }
}

Reproduction

1. set up build (something like this):

     return gulp.src(paths.source.client.main_style)
     .pipe(postcss([
       inline({
         path: ['./app/styles/']
       }),
       customProperties(),
       customMedia()
     ]))
     .pipe(gulp.dest(paths.dest.client.styles))

2. add a custom property

3. use it in an @custom-media definition

4. see that your output contains the custom property name, not the rendered value.

Am I doing anything wrong?

Thanks!

[MoOx]

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 :/

[tabatkins]

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.

[VinSpee]

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 :-)

[VinSpee]

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

[tabatkins]

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.

[VinSpee]

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

[tabatkins]

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.

[VinSpee]

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

[ai]

@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?

[MoOx]

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

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

[ai]

@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

[VinSpee]

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