Support for media queries

[F21]

I am not too sure how this can be done, but maybe it's possible to leverage postcss-css-variables, which has support for css variables in media queries.

[erikjung]

Can you explain your desired usage a bit more to help me understand? I imagine you want to do something like this:

:root {
  --modular-scale: 1.25;
}

body {
  font-size: calc(1msu * 1em); /* 1.25em */
}

@media (min-width: 768px) {
  :root {
    --modular-scale: 1.5;
  }

  /* body font-size is now 1.5em */
}

This would be a challenge to support, but it seems feasible. I do question the benefit though. It really comes down to whether or not you need to change the ratio inside of a media query. If you simply need to rebase scale steps while retaining the same ratio, something like this might work with the variables plugin (unless I'm mistaking what it can do):

:root {
  --modular-scale: 1.5;
  --font-size: calc(1msu * 1em);
}

body {
  font-size: var(--font-size);
}

@media (min-width: 768px) {
  :root {
    --font-size: calc(2msu * 1em);
  }

  /* anything using var(--font-size) now gets the new value */
}

[F21]

After thinking about it, I don't think it's a common use-case to have different ratios or bases for different screen sizes. Your example of rebasing the ratio should work pretty well.

A slightly unrelated question: If I want the calculated ratio to have a unit like rem or em, do I always have to run it through calc() like calc(3msu * 1rem)?

[erikjung]

A slightly unrelated question: If I want the calculated ratio to have a unit like rem or em, do I always have to run it through calc() like calc(3msu * 1rem)?

Yes, and this was actually a design choice. I wanted the plugin to only handle the number output and make no assumptions about the CSS property using the custom unit. The most common use case for unitless output that comes to mind is line-height, but I've also used modular scale values in other ways where em or rem have no place:

.Example {
  opacity: -2msu;
  width: calc(-2msu * 100%);
}

I might consider supporting some kind of "default unit" in the future. You might want to checkout https://github.com/kristoferjoseph/postcss-modular-scale. It allows easier unit assignment with the ms(1)em syntax.