parcel-bundler/lightningcss v1.21.0 on GitHub

This release includes new features to improve compatibility of output CSS with your browser targets, and safely remove old fallbacks that aren't needed anymore. It also gives you more control over exactly how CSS is compiled, and fixes some bugs.

Preserve manual fallbacks

Lightning CSS will now preserve manually provided fallback values when some of your browser targets do not support the last one. For example, in the following rule, if some targets didn't support the max function, both declarations would be preserved. Otherwise, if we are sure that all targets support it, Lightning CSS will drop the fallback declaration.

.foo {
  margin-right: 22px;
  margin-right: max(4%, 22px);
}

This is supported for many types of values such as lengths, colors, gradients, images, font styles, etc. It uses compatibility data from caniuse and MDN to determine if each value is supported.

Include and exclude options

You can now control exactly how Lightning CSS compiles using the "include" and "exclude" options, in addition to the existing "targets". This allows you to explicitly turn on or off certain features, which overrides the defaults based on the provided browser targets. For example, you might want to only compile colors, and handle auto prefixing or other features with another tool. Or you may want to handle everything except vendor prefixing with Lightning CSS. These options make that possible.

An enum of available feature flags is provided, and you can use the bitwise OR operator to combine flags together, e.g. Features.Nesting | Features.Colors. There are also some flags which turn on multiple other flags at once, e.g. Selectors, Colors, and MediaQueries. The playground has been updated to show these flags and includes checkboxes to turn them on or off.

import {transform, Features, browserslistToTargets} from 'lightningcss';
import browserslist from 'browserslist';

transform({
  // ...
  // Turn on color and nesting compilation, regardless of browser targets.
  include: Features.Colors | Features.Nesting,
  targets: browserslistToTargets(browserslist('last 1 Chrome version'))
});

The Rust API has been updated to accept a new Targets struct instead of Browsers. This includes browser targets as a sub-field, along with the include and exclude options. See docs.rs for more details.

Split selector lists when unsupported

Lightning CSS will now automatically split selector lists when your browser targets don't support some selectors. This avoids a case where browsers ignore the whole rule if only some selectors are unsupported. It takes advantage of :is() forgiving selector lists where possible, otherwise generates multiple rules. For example:

:hover, :focus-visible {
  color: red;
}

will be compiled to the following if :focus-visible is not supported by one of your targets:

:is(:hover, :focus-visible) {
  color: red;
}

If :is() is unsupported, or if the selectors have different specificities, Lightning CSS will output the following instead:

:hover {
  color: red;
}

:focus-visible {
  color: red;
}

Non-standard selector compatibility

Some frameworks like Angular and View support some non-standard selectors, such as the ::v-deep pseudo element, >>> and /deep/ combinators, and :deep(<selector-list>) syntax. These are now able to be parsed and preserved as is by Lightning CSS. Unknown pseudo elements now allow arbitrary selectors after them unlike normal standard pseudo elements. Unknown functional pseudo selectors will preserve their arguments unmodified. Non-standard combinators can be enabled by adding the following option when compiling:

{
  nonStandard: {
    deepSelectorCombinator: true
  }
}

parcel-bundler/lightningcss v1.21.0 on GitHub

Preserve manual fallbacks

Include and exclude options

Split selector lists when unsupported

Non-standard selector compatibility

More

parcel-bundler/lightningcss v1.21.0
on GitHub