parcel-bundler/lightningcss v1.11.0

on GitHub

This release includes a bunch of new features for source maps, math functions, @layer minification, and several bug fixes.

Features

Input source maps

Parcel CSS now supports an inputSourceMap option to the Node/WASM APIs. If you generated CSS using another tool (e.g. SASS) before passing it to Parcel CSS, this ensures that the source map generated by Parcel CSS points to the original files rather than the intermediary CSS. Parcel CSS also supports inline base64 encoded source maps in the sourceMappingURL comment. Source maps referenced by filename from a sourceMappingURL comment are not supported because Parcel CSS does not always have access to the file system.

Downlevel space separated colors with variables in alpha component

Parcel CSS will now downlevel the modern space separated color syntax when the alpha component includes a CSS variable. These are commonly generated by Tailwind CSS, but may not be supported in all browser targets.

.text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
}

now becomes:

.text-white {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity));
}

Note that this is only supported for variables in the alpha component because other cases are ambiguous (CSS variables may include multiple tokens).

Merge adjacent @layer rules

Parcel CSS will now merge adjacent @layer rules with the same name.

@layer foo {
  .foo { color: red; }
}
@layer foo {
  .foo { background: green;
}

now becomes:

@layer foo {
  .foo {
    color: red;
    background: green;
  }
}

Thanks to @jacobrask for contributing this feature!

Simplify calc() expressions in color components

Parcel CSS will now simplify calc() expressions inside color components where possible. For example:

color: hsl(calc(360deg / 2) 50% 50%);

now becomes:

color: #40bfbf;

Support for round(), rem(), and mod() functions

Parcel CSS will now simplify the round(), rem(), and mod() stepped value functions. These can be used anywhere calc() is supported, and work with lengths, angles, percentages, times, etc. For example:

width: round(22px, 5px);

becomes:

width: 20px;

Note that this can only be simplified down to a number when the units are compatible. For example, round(22px, 5vw) will not be simplified.

Node ESM support

Parcel CSS can now be imported using ESM in Node. Functions are available as named exports.

import {transform} from '@parcel/css';

transform({ /* ... */});

Fixes

• Add libc fields only for platforms that have libc - #210
• Implement Debug trait for ToCssResult - d1cee40