Load custom media query definitions

[tremby]

It'd be really useful if this would also load custom media query definitions (postcss plugin).

Such as @custom-media --small (width <= 768px); -- it would be great to be able to get this whole media query string ((width <= 768px)) from CSS to JS to reuse in a window.matchMedia() call.

[Coobaha]

@tremby Hi! Thanks for a nice idea! I will check it soon, should not be hard to implement.

[Coobaha]

@tremby Hey, i am back :D

:root {
  --small-viewport: i am here;
}

@custom-media --small-viewport (max-width: 30em);
@custom-media --viewport (max-width: 30em);

:root {
  --viewport: i am here;
}

results in this JS Object

{ smallViewport: '(max-width: 30em)', viewport: 'i am here' }

But, maybe it will be good to namespace it?

{
  smallViewport: 'i am here',
  viewport: 'i am here',
  MQ: {
    smallViewport: '(max-width: 30em)',
    viewport: '(max-width: 30em)'
  }
}

I think i will stick with flat object, but will emit warnings if mediaQuery or variable declaration are conflicting

[tremby]

I worry that it might actually be common for variables and media queries to have the same name, like in your example.

I'd say either namespace it (maybe use a key which wouldn't be a valid CSS variable name), or prefix each media query with some invalid CSS character like $. So for example you'd get back smallViewport, viewport, $smallViewport and $viewport. Or ^ or ! or % or something else. $ is an example of a character which is also valid in a JS variable name, which is good since it means the developer won't have to switch to subscript syntax (vars['^viewport'] since vars.^viewport isn't valid, but vars.$viewport is fine).

[Coobaha]

@tremby I think its not very common and if present it is really easy to fix.

For the sake of simplicity I decided to stick with flat objects (with warnings if exported rules are conflicting). This can be changed later if it will be a real problem.

You can check this with postcss-variables-loader@next. Please let me know if there are any problems with new version.

[tremby]

Works perfectly. Thank you! Please cut a release!

[Coobaha]

Great, published! Thank you for your contribution!