v1.20.0

This release implements tons of new CSS features, including improved media and container query parsing, support for new selectors, improved minification by removing duplicate rules, updated compat data, and support for compiling multiple files at once in the CLI!

Media and container queries

Lightning CSS now parses the values of each media query feature according to the type defined in the specification. This enables it to generate fallbacks for range syntax with the correct types (e.g. (color > 2) compiles to (min-color: 3)).

We now also automatically output modern range syntax when the browser targets allow it, which reduces the size of the output. For example, (min-width: 300px) will compile to (width >= 300px) when targeting modern browsers.

Lightning CSS will now add vendor prefixes to the resolution media query as well. This will generate the -webkit-device-pixel-ratio and -moz-device-pixel-ratio media queries where needed.

For container queries, we now support style queries. This allows you to customize the behavior of an element when a parent container's style matches a certain value.

@container style(--variant: accent) {
  .foo {
    color: slateblue;
  }
}

Finally, in the custom visitor API, you can now return media queries using raw values rather than manually constructing the AST. This wraps each style rule in an @media rule with (min-width: 500px):

transform({
  // ...
  visitor: {
    StyleRule(rule) {
      return {
        type: "media",
        value: {
          rules: [rule],
          loc: rule.loc,
          query: {
            mediaQueries: [
              { raw: '(min-width: 500px)' }
            ]
          }
        }
      };
    }
  }
});

Selectors

Lightning CSS now supports the :nth-child(An+B of S) selector, which lets you select the nth child matching a specific selector. For example, you could use article:nth-child(2 of p) to select the 2nd <p> element within an <article>.

We also now support the ::view-transition pseudo elements, which are used by the View Transitions API now implemented in Chrome.

Properties

We now implement vendor prefixing for the text-size-adjust property, for the -webkit and -moz prefixes. This property adjusts the size of text on mobile devices.

Minification

Lightning CSS will now automatically remove duplicate style rules, even when they are not adjacent. For this to be safe, the rules must have exactly the same selectors and properties, and the last matching rule wins. This could be useful when using atomic CSS libraries which generate a rule per unique property.

.green {
  background: green;
}

.red {
  background: red;
}

.green {
  background: green;
}

is minified to:

.red{background:red}.green{background:green}

Updated compat data

We also updated our browser compatibility data, allowing less prefixes and fallbacks to be generated.

• :dir and :fullscreen are now natively supported in Safari 16.4
• Native CSS nesting will be output when targeting Chrome 112 or Safari 16.5
• Media query range and interval syntax will be output when targeting Chrome 104, Firefox 102, or Safari 16.4
• lab and oklab colors are now supported in Chrome 111

CLI improvements

The lightningcss CLI can now process multiple files at once! You can specify each filename to compile, or use a glob that your shell expands. When multiple files are input, you need to use the --output-dir or -d option instead of --output-file or stdout. This will output each processed file into a directory with the corresponding filename.

lightningcss --minify -d dist src/*.css

Lightning CSS will also now automatically create any missing directories in the --output-file or --output-dir path, so you don't need to run mkdir beforehand. Thanks to @lucasweng for contributing this!