Custom media feature in combination with @import

[carlcs]

I encounter an error when I @import a file that makes use of the new "custom media" feature.

Warning: Cannot read property 'start' of undefined`

Using the breakpoint alias in the same file works though:

@custom-media --lg-viewport screen and (min-width: 64em);

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

[carlcs]

Example: Define a breakpoint in a separate CSS file than the actual component that makes use of the breakpoint alias. Then @import the component:

@custom-media --lg-viewport screen and (min-width: 64em);
@import "Component-lg.css";

'Component-lg.css' that calls the breakpoint alias:

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

[MoOx]

This is due to rework-import that where parsing imported files using an outdated parser. It's fixed in master by b63cedef050b0ac20b769c98fb48969d7cde3434 FYI https://github.com/reworkcss/rework/issues/172

[carlcs]

:+1: