Media queries support & 1.0 release

[geelen]

About a month ago I was chatting with Mark & Josh about what's needed for a full 1.0 release of CSS Modules. I argued that we needed a first-class method for importing media queries, which I've been thinking about since and implemented over the last couple of weeks.

Here's my proposal:

• Build upon the @custom-media spec
• Build upon the postcss-custom-media plugin
• All @custom-media statements are exported
• You import using @custom-media --breakpoint from "./file.css"

For example:

/* breakpoints.css */
@custom-media --small (max-width: 30em);
@custom-media --medium (max-width: 60em);

/* component.css */
@custom-media --small from "./breakpoints.css";
@custom-media --medium from "./breakpoints.css";

.red {
  color: red;
}

@media (--small) {
  .red {
    color: maroon;
  }
}

@media (--medium) {
  .red {
    color: darkmagenta;
  }
}

Now, in order for this to occur, I've had to add the postcss-custom-media plugin to run after the import statements are linked but before the injectableSource is ready to hit the browser. That's because custom media needs a polyfill, which needs to run before the CSS is usable. So the @custom-media expressions are processed & removed before they hit the browser. That means they don't have to be localised like class names do.

However, I am not 100% sure about this design. @custom-media will eventually be available in the browsers, and so then we'd need to change behaviour to localise media expressions. There'd also not be any point in importing @custom-media --breakpoint from "file.css", something like@media (--breakpoint from "file.css")` would make much more sense. That syntax breaks Sass, which is why I haven't used it yet. But it's a thought.

An alternative is coming up with a totally general variable export/import syntax (probably building on postcss-simple-vars) that could be used for media queries as well.

$small: $breakpoint-small from "./breakpoints.css";

Anyway, wanted to open the discussion. I've pushed the postcss transforms used here to npm under the beta tag, so this build should be passing (travis is having weird problems with Node v0.10 and v0.12 today, but IO v3 is building fine).

I'd love to have this merged and v1 released by the time I present CSS Modules at React Rally on the 24th.

[joshwnj]

This is cool and well thought out. For most of the cases I've personally encountered so far, a general-purpose constant export/import would be sufficient for media queries (and useful for other things too). Curious to know what cases others are finding too.

[mightyaleksey]

Your proposal sounds quite logical, but I don't like the idea of breaking CSS syntax. May be we can add another pseudo-selector like :custom-media instead?
For example:

:custom-media
{
  composes: small medium from "./breakpoints.css";
}

[mightyaleksey]

Anyways, when you'd be ready - please tell me, looks like I'll have to apply some changes to the require-hook also :)

[geelen]

Closing in favour of Values #28