parcel-bundler/lightningcss v1.1.0

on GitHub

This release adds support for the @custom-media rule defined in the media queries level 5 spec! This allows you to define media queries that can be reused in multiple @media rules.

@custom-media --modern (color), (hover);

@media (--modern) and (width > 1024px) {
  .a {
    color: green;
  }
}

compiles to:

@media ((color) or (hover)) and (min-width: 1024px) {
  .a {
    color: green;
  }
}

Try it out in the playground.

This feature can be enabled using the customMedia option under the drafts object, similar to nesting. A few things to note:

• The drafts option only enables parsing of @custom-media rules. You must have targets set for it to be compiled.
• We currently error on complex Boolean logic with media types (e.g. print, screen, etc.). This is quite difficult to emulate with current CSS syntax, so it is not supported at the moment.
• @custom-media rules currently must be defined in the same file where they are used, because Parcel CSS does not handle @import rules itself. This may change in a future release.