CSSNEXT: how to use variables with media queries in CSS Next

Question

I am trying to use variables to specify breakpoints using the CSSnext plugin.

Currently my css looks like this:

@media (width <= var(--screen-md-min)) {
    background-color: var(--brand-purple-dark);    
}

but when i try to run this I get the following warning in the console:

5: Missing @custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.

This code works fine if I replace var(--screan-md-min) with actual pixels. I am sure this is just a problem with syntax, but the CSSnext documentation does not make the use of variables very clear.

Answer 1

cssnext only implements future-proof specifications. And per specification, it's not possible to use custom properties (that' depends on the dom (:root is html) in a media query (that does not depend on the dom, but instead depends on the device).

However, people working on CSS specifications have thought about a solution for custom media queries. It's @custom-media.

@custom-media --small-viewport (width < 30rem);

@media (--small-viewport) {
   /* styles for small viewport */
}

Some other informations

• http://cssnext.io/features/#custom-media-queries
• https://github.com/MoOx/postcss-cssnext/issues/253