This release adds support for custom transform visitors written in JavaScript, which lets you extend Lightning CSS with support for custom CSS syntax extensions, perform build time transforms, and more. It also adds support for nested @container and @layer rules, implements vendor prefixing for @supports, adds support for compiling from stdin via the CLI, and reduces compile times for the Rust crate by adding feature flags.

Custom transforms

The Lightning CSS visitor API enables you to implement custom non-standard extensions to CSS, making your code easier to author while shipping standard CSS to the browser. You can implement extensions such as custom shorthand properties or additional at-rules (e.g. mixins), build time transforms (e.g. convert units, inline constants, etc.), CSS rule analysis, and much more.

The API is designed to call into JavaScript as little as possible. You provide functions for specific types of values you're interested in such as Length, Url, or specific properties or rules. Lightning CSS fully parses all CSS rules and properties (with individual type definitions!), and only calls your plugin when it visits a value type you need to transform. This granularity improves performance, and also makes it much easier to build plugins since you don't need to worry about parsing values or selectors yourself. You can return a new value from a visitor function, or even remove or replace a value with multiple values in some cases. Check out the docs for more details!

Custom transforms have a build time cost: it can be around 2x slower to compile with a JS visitor than without. That being said, it is around 6x faster than equivalent postcss plugins in my testing. While standard CSS features should continue to be implemented in Rust as part of Lightning CSS core, the plugin API can help you migrate from other tools while supporting non-standard syntax extensions you might use. We look forward to hearing your feedback!

Playground updates

The Lightning CSS playground has also been updated to support visitors, which makes it easy to play around right in your browser. It also has a new editor experience powered by Code Mirror including syntax highlighting and inline errors. Check out an example with a custom visitor to see what it can do.

New docs

The Lightning CSS website has also been updated to include documentation for all of the features, including transpilation, CSS modules, bundling, and minification.

Features

• JavaScript visitor API for custom transforms – #363
• Add visitor support to WASM build via napi-wasm – #373
• Parse @container and @layer block rules nested within style rules – 615893c00386fe154c7ad33fddc116416e25b407
• Add projectRoot option and use relative paths for CSS module hashes – 33febb4a87f40da0d9d0991ac5c886f8691fcd26
• Implement vendor prefixing for @supports – 787f46f7e6b673778bfc33d95cf77fad7e730220
• CLI support for piping – #380
• Introduce "bundler" feature flag – #358
• Put all of serde behind feature flag – #360
• Introduce "visitor" feature flag – #367
• Add sourcemap feature – #372
• Remove derive-move – #377

Fixes

• Fix important declarations within nested at rules – 6a7d19e81234809bc3c27ac65bc14e9ee4422a2c
• Remove parentheses from supports condition AST – 87ca70512ca5a57ae5f8cd81f890faf30f5b28ce

Fixed a regression where zero lengths were serialized without a unit in custom properties, which could break calc() usages. 0afccf92d206022cd7f9f62975ed1f11354b68e2

This release includes support for the new nesting syntax, a new Rust visitor API to make building custom transforms easier, support for page margin at rules, and several other improvements and fixes.

New nesting syntax

The CSS nesting support has been updated to relax some of the rules around where the & selector is required, following the latest spec changes. The & selector is now automatically inserted with a descendant combinator when not already present, unless it starts with an element selector. The @nest rule is deprecated, and will print a warning.

.foo {
  color: red;

  .bar {
    color: blue;
  }
}

compiles to:

.foo {
  color: red;
}

.foo .bar {
  color: blue;
}

Playground

Visitor API

The Rust API now includes a Visitor API, allowing you to much more easily traverse the style sheet and implement custom transforms. You can visit rules, properties, and many common value types such as lengths, urls, custom functions, etc.

For example, this visitor converts all pixel values to rems.

struct MyVisitor;
impl<'i> Visitor<'i> for MyVisitor {
  const TYPES: VisitTypes = visit_types!(LENGTHS);

  fn visit_length(&mut self, length: &mut LengthValue) {
    match length {
      LengthValue::Px(px) => *length = LengthValue::Rem(*px / 16.0),
      _ => {}
    }
  }
}

stylesheet.visit(&mut MyVisitor);

You must declare what types of values you want to visit with bitflags via the visit_types macro. This enables us to completely skip visiting entire branches of the AST when they don't contain any relevant values, statically, at compile time, which improves performance. For example, if you declare you only want to visit urls, we don't need to visit any properties that don't contain URLs somewhere in their type (recursively). Check out the documentation for more details.

You can also implement support for parsing custom at rules (e.g. Tailwind's @apply), by providing a custom AtRuleParser implementation. The parsed rules are stored in the stylesheet using a generic parameter. See the example for more details.

Other fixes and improvements

• Support for margin at rules within @page – 80a982a181269aed6dc3e508207fd77007554d40
• Simplify :is() selector when only a single simple selector is provided as an argument – b870d1fcbb7db44147eae1274150ab81394b281b
• Fix ARM linux GLIBC requirement – 5098cae7e804ecd6bfa1d8a1950146b96f02b6a9
• Fix parenthesization of media queries – 5a126392ca0eb53d28e33b333a92f6ea38d56119
• Bump napi-rs – 9f2e369ef053f555e715b63e92103f021426a37d
• Expose and add docs for selector module – e31234f1b97c2c1d59641223ff4fad0c34ea3d66

Bug fixes

• Parse :nth-col() and :nth-last-col() selectors – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/302
• Use :is for non-leading nesting with multiple compound selectors – 865270134da6f25d66ce4a4ec0e4c4b93b90b759
• Fix flipped border-bottom-right and border-bottom-left in shorthands – @LeoniePhiline in https://github.com/parcel-bundler/lightningcss/pull/308
• Fix auto prefixing for browser versions greater than the latest – @mischnic in https://github.com/parcel-bundler/lightningcss/pull/326

CLI features

• Add --browserslist option to load browsers list config by @LeoniePhiline in https://github.com/parcel-bundler/lightningcss/pull/324

This release adds support for the new relative color syntax, improves support for quoted CSS animation names, and fixes some bugs.

Relative color syntax

Lightning CSS now supports the new relative color syntax in the CSS Color Level 5 spec! This allows you to use math functions like calc() to manipulate the channel values of a source color, and to convert between color spaces. This is not yet shipping in any browsers, but Lightning CSS will do this manipulation at build time when possible, so that it works in any browser today!

Here's a simple example, which uses the lch color space to darken slateblue by 10%. This is done by using the l channel value in a calc() expression, and preserving the c and h channels as is.

.foo {
  color: lch(from slateblue calc(l - 10%) c h);
}

This will output:

.foo {
  color: lch(34.5711% 65.7776 296.794);
}

And, when lch colors are not supported by your browser targets, Lightning CSS already supports outputting fallbacks for older browsers:

.foo {
  color: #4e42b1;
  color: lch(34.5711% 65.7776 296.794);
}

Check it out in the playground!

Note that due to being a build time transform, CSS variables are not supported as source colors since the variable value may change at runtime. We'll have to wait for browser support for that.

Other fixes and improvements

• Support for parsing the border-spacing property – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/294
• Avoid converting animation: "none" to animation: "none" none – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/295
• If the browser doesn't support #rrggbbaa color syntax, output transparent instead of rgba(0, 0, 0, 0) – @yisibl in https://github.com/parcel-bundler/lightningcss/pull/296
• Support parsing angles with unitless zero in gradients and transforms – https://github.com/parcel-bundler/lightningcss/commit/cbd392f4e7c616a0c40754f4419c55eb3362ea49
• Bump parcel_sourcemap dependency to fix parsing source maps without sourcesContent, and improve base64 performance – https://github.com/parcel-bundler/lightningcss/commit/061c0c2dff80bb4e25c857bfa4737c1c4092fbae

Fix transformStyleAttribute missing field analyzeDependencies error

This release includes several new features and a bunch of bug fixes.

New features

• Use inline source maps during bundling – bfa8b8cec3914ab925722bb503cbc87d61923570
• Add new preserveImports option for analyzeDependencies, which preserves the @import rules with placeholder URLs similar to url() dependencies – 676bf1fefc46a75d7098efbc53e744d89d47ba93
• Add filename option for transformStyleAttribute, used for error messages and dependency locations – 815a1836dbff09bce2cc154c31d1660a4cfedb59
• Add version flag to cli – @lucasweng in 3c9db12b684f34ea015a287f2a23b728ee5ade85

Bug fixes

• Fix types for bundleAsync – adabfc13b9ecb1a6a1b5517e61e3b07d4802fa2a
• Fix CLI package – a82381fbcbbff04ec19368f0a8d313b466a952c4
• Fix bundling of @import rules with both layer and import conditions – f66c6d7ddd102a885fb573e1ef5cf3d09eb2dba3
• Fix printing flex shorthand – 84298d2a735d3cc1288c0fd5802af7b56c11fe28
• Parenthesize custom media conditions with not – 7c5828386fac6af27423e9ae9af6f1587dfc0035
• Fix handling of strings in animation-name property – 7efeef220b9559716dc53daa0343c0fc23ac62eb

We are excited to announce that Parcel CSS is now called Lightning CSS! ⚡ This new name makes it clear that the project can be used outside of Parcel, with other build tools, or even standalone.

We also have a brand new website showcasing some of the features, along with the WASM-based playground at lightningcss.dev. This will expand over time to include more documentation and examples.

Going forward, new releases will be under the lightningcss npm package and Rust crate. The @parcel/css package still exists on npm for backward compatibility, but now re-exports lightningcss. The parcel_css Rust crate is deprecated - please use lightningcss going forward.

New features

This release also includes several new features, including major improvements to the bundler.

Custom JS resolver

The node bindings now include a new bundleAsync function in addition to the existing bundle function. bundleAsync runs the bundler asynchronously in a background thread, and returns a promise that lets you know when it has completed. In addition, bundleAsync supports custom JavaScript-based resolvers, which allow you to customize the resolution behavior for @import specifiers, and provide the contents of files from a source other than the file system.

let {code, map} = await css.bundleAsync({
  filename: 'style.css',
  minify: true,
  resolver: {
    read(filePath) {
      return fs.readFileSync(filePath, 'utf8');
    },
    resolve(specifier, from) {
      return path.resolve(path.dirname(from), specifier);
    }
  }
});

Note that providing a resolver can negatively affect performance, so only do so when you need to customize things.

CSS modules bundling

Dependencies in CSS modules are now also bundled. For example, the composes property allows you to reference another file. These will now be bundled, and the resolved class name will be included in the output JSON as well.

Bug fixes

• add types for wasm init default export – @deckchairlabs in https://github.com/parcel-bundler/parcel-css/pull/269
• match the spec so that feature-* in @font-face tech() becomes plural – @yisibl in https://github.com/parcel-bundler/parcel-css/pull/270
• CSS-wide keywords and none in @keyframes cannot remove quotes – @yisibl in https://github.com/parcel-bundler/parcel-css/pull/267

Fixes

• Playground: Fix wrong text color in output panel – @marvinhagemeister in https://github.com/parcel-bundler/parcel-css/pull/259
• Add missing semicolon in Custom Media Queries – @Marabyte in https://github.com/parcel-bundler/parcel-css/pull/260
• Do not omit 1x resolution in image-set() – @yisibl in https://github.com/parcel-bundler/parcel-css/pull/264
• Suppress unsupported pseudo class or element warning if vendor prefixed – @pfroud in https://github.com/parcel-bundler/parcel-css/pull/266

This release includes a few new features and bug fixes.

Parcel CSS will now try to preserve unknown @ rules and selectors rather than erroring (a warning will be emitted instead). These rules are not fully parsed and therefore may not be minified as much as possible. This is useful in cases where Parcel CSS has not yet implemented a feature that browsers are experimenting with.

We now also have experimental bindings to use Parcel CSS via C, which will enable it to be used from many languages other than Rust and JavaScript. See here for an example. For now, this will need to be compiled from source. More features will be added in future updates as the need arises (please open a feature request).

Features

• Preserve unknown at rules as raw tokens
• Store unsupported functional pseudo classes and elements as raw tokens
• Experimental C bindings
• Support parsing tech() function in @font-face
• Parse and prefix box-decoration-break property

Bug fixes

• Preserve image-set() fallback when needed
• Use logical longhands when shorthands are not supported
• Print dppx when x resolution unit alias is unsupported
• Dedupe font family

This release includes bug fixes.

• Fix stack overflow regression – c1c67e04b653217e6cdaddad254c2dade851905f
• Update compat data – b658cb91c397b82183752d23a57df7f4fa0afcdd
• Fix prefixing mask-image – 713ce2e4e3adc23c28b9f8382fda2a951e908cf4
• Prevent double prefixing mask-image – 6b157544f5e7c90ac0fd6ae9fefeeac468b40726
• Add missing errorRecovery option to TypeScript types for transformStyleAttribute function – 8de63d99d4e36b83c552908c6a3e67eb0965c285

This release includes several new features including more math functions, container queries, a new error recovery mode, and improved minification.

Math functions

Parcel CSS can now simplify the following math functions:

• Trig functions: sin, cos, tan, asin, acos, atan, and atan2
• Exponential functions: pow, sqrt, hypot, log, and exp
• Sign related functions: abs, sign

These are supported everywhere calc() is supported. In addition, the numeric constants e, pi, infinity, -infinity, and NaN are supported in all calculations.

These functions and constants do not currently have wide browser support, but Parcel CSS will handle computing the value of the calculation where possible so you can use them today. This can also help with minification, allowing you to write source code that's more readable, but distribute more compact output. For example:

width: calc(100px * sin(pi / 4));

compiles to:

width: 70.7107px;

Error recovery

In browsers, when an invalid rule or declaration is encountered, it is skipped, and the parser tries its best to recover and continue parsing the following rules. This is useful for future proofing, so that when new types of rules or declarations are added to CSS, they don't break older browsers. However, as a dev tool, Parcel CSS chooses to be more strict by default, and will emit errors when it fails to parse a rule. This way, developers are aware when they make an error that would have silently been skipped in a browser, and can fix their mistake.

However, this caused issues in third party libraries, which sometimes unintentionally contain invalid rules. In other cases, older libraries perform CSS hacks to target specific browsers like Internet Explorer. These are not valid CSS syntax, so other browsers will ignore them, but Parcel CSS will error. If you cannot easily edit a dependency to fix these problems, it can be frustrating.

Parcel CSS now has a new errorRecovery option (--error-recovery via the CLI), which can be enabled to make Parcel CSS warn rather than error on invalid rules and declarations. These will be skipped in the output, just like in a browser, but you will still get a warning. This is opt-in, so if you encounter a library with some invalid syntax and need to work around it, you can enable this option. In the Node/WASM APIs, warnings are returned as a part of the result from the transform and bundle APIs.

Container queries

Parcel CSS can now parse and minify @container queries, and the container-type, container-name and container declarations.

@container my-layout (inline-size > 45em) {
  .foo {
    color: red;
  }
}

.foo {
  container-type: inline-size;
  container-name: my-layout;
}

minifies to:

@container my-layout (inline-size>45em){.foo{color:red}}.foo{container:my-layout/inline-size}

Merge adjacent @media and @supports rules

Parcel CSS will now merge adjacent @media and @supports rules with identical conditions.

@media (hover) {
  .foo {
    color: red;
  }
}

@media (hover) {
  .foo {
    background: #fff;
  }
}

becomes:

@media (hover) {
  .foo {
    color: red;
    background: #fff;
  }
}

Maximum nesting depth

Previously, a stack overflow crash could occur if the parser encountered input with very deeply nested blocks (e.g. [, {, or (). Now it will return an error when reaching a maximum nesting depth instead. If using Parcel CSS in a server where denial of service attacks could be possible, please make sure to update to avoid this crash.

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 - https://github.com/parcel-bundler/parcel-css/commit/d1cee402c765f0690da224a4a58e56bc58ec809e

This release fixes some issues with the libc field in package.json on Windows and Linux.

This release includes improved minification, exposes new CSS modules features to the CLI, and fixes a bunch of bugs. Enjoy!

Added

• Improved merging for adjacent style rules when merging two rules enables another to be merged. e9277fd4f5e1e1d1358844223b1b3c4b4b30cfe3 – Example
• Support for ::cue and ::cue-region pseudo elements.
• Errors are now displayed in the playground. #200
• Return code and CSS module exports as JSON via stdout when no output file is given #192
• Add --css-modules-pattern and --css-modules-dashed-idents CLI options. #197
• Add libc field to package.json to allow package managers to select the correct binary. #188

Fixed

• Fix -apple-system font name. #190
• Improve error message for @nest. #191
• Fix calc() in media query range syntax. #195
• Use physical properties when logical properties are equal. #201
• Fix order of border-image and border properties with CSS variables. #187
• Throw useful errors when parsing invalid CSS modules pattern strings rather than panicking. 96f419f32199e96787b5148ee2bf8ab5863745ed

This release includes new features for CSS modules, support for compiling the system-ui font family, and a few other bug fixes and improvements.

Locally scoped CSS variables

Just like other identifiers such as class names, ids, and @keyframes, Parcel CSS now supports locally scoping CSS dashed identifiers such as variable names and @font-palette-values names. This prevents variables in one file from clashing with variables in another. By default, all variable references via the var() function are scoped to the module, so you can only reference variables declared in that file. To reference a variable declared in a different CSS module, you can use a new syntax extension:

.button {
  background: var(--accent-color from "./colors.module.css");
}

You can also reference a global variable like this:

.button {
  color: var(--color from global);
}

CSS variables may also be referenced from JavaScript, the same way as with classes:

import * as style from './style.module.css';
style['--foo']

This applies not only to CSS variables but anywhere the <dashed-ident> syntax is used in CSS. Right now that means @font-palette-values and @property, but others such as @custom-media and @color-profile are coming.

All of this is opt-in with the dashedIdents option of the cssModules config object.

{
  "cssModules": {
    "dashedIndents": true
  }
}

Custom CSS modules naming patterns

You can now configure how Parcel CSS generates names in CSS modules, via the pattern option of the cssModules config object.

{
  "cssModules": {
    "pattern": "library-[name]-[hash]-[local]"
  }
}

The currently supported segments are:

• [name] - the base name of the CSS file, without the extension
• [hash] - a hash of the full file path
• [local] - the original class name

Support for compiling system-ui font

The system-ui font family will now be compiled for older browsers to include a font stack that works across most common operating systems.

Input:

.foo {
  font-family: system-ui;
}

Output:

.foo {
  font-family: system-ui, AppleSystem, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
}

Thanks to @onigoetz for contributing this feature!

Other fixes and improvements

• Support for custom resolve() method in SourceProvider trait for Rust bundler API (contributed by @dgp1130) - #177
• Allow fragment URLs in custom properties - f6f16732057f6beecc899427d8b3862f26639919
• Bump Rust toolchain to v1.61.0, and drop deprecated retain_mut dependency (contributed by @joshstoik1) - #184

This release includes enhancements to the Parcel CSS Rust API, and some bug fixes.

New Rust API features

CSSOM

This release begins to implement the CSS Object Model (CSSOM) API. For now, that includes some new methods in the Rust API to get, set, and remove properties. This supports reading and writing both shorthand (e.g. border) and longhand (e.g. border-left-width) properties, no matter which properties were originally written in the rule. The Property and PropertyId enums have also been updated to expose some metadata about shorthand and longhand properties as well. Check out the docs for more details.

Source locations

Also in this release is a new way to lazily compute the original line and column ranges for a CSS property. This information is not stored during parsing because would use a lot of memory, and it is rarely used except in error scenarios. However, it can be recomputed on demand when needed. This can be done using the property_location method of a StyleRule. You must provide the original source string that was used to parse the stylesheet along with the index of the property to retrieve the location for.

Serde support

Finally, we added Serde support for all nodes in the AST, so you can serialize or deserialize from JSON and other formats. Given Parcel CSS has such a detailed parsing of each CSS rule, property, and value, this may be useful for applications written in other languages that want to manipulate parsed CSS values. This is enabled behind the serde feature flag. Check out the example of how to serialize a stylesheet for more details.

Fixes

• Fix compat data for margin-inline and padding-inline shorthand properties – 0d7e4c628cbd22b4b0ede063fd2aab4ba514953b
• Parse z-index property and fix rounding issue with serialization – 839bcd1c53baf4c6c354333f7cd3067b9ea2cfa8

This release includes bug fixes.

• Always output quoted url() when not minifying. This fixes a bug when using data URLs in Parcel. #160
• Mark jemallocator as a CLI-only dependency in the Rust crate. #157
• Upgrade to napi-rs v2. #161
• Improve whitespace printing when non-minified. 677277cc14891f5d0b1fcf6b57304b8d8d97017c
• Fix stack overflow while simplifying calc expressions with nested functions 9a64787cf829dc72f5fb9b9ad687f0d447a31929
• Fix minification of border: none shorthand 1f66776d2a9b24a4c253adde55ee413507b63684
• Fix interpretation of "not all" in media queries f146b66b3757876f7d7762e9295b06e3a2b886e5

Fixed

• Compile text-decoration-thickness percentage to a calc for non-supporting browsers.
• Don't include text-decoration-thickness in text-decoration shorthand for non-supporting browsers.
• Do not convert out of bounds rotation transforms to a matrix, or wrap around 360 degrees.
• Only output known prefixes for the :is selector
• Manually construct napi buffers to avoid a copy and workaround a Node.js crash with zero-length vectors.

Playground

• Add support for selecting a version of @parcel/css in the playground. Thanks @ahabhgk!

This release adds support for compiling several selector features for older browsers, improves the Rust API, and fixes some bugs.

Features

• Downlevel :dir selector for non-supporting browsers. This is compiled to the :lang selector, which is the closest equivalent. However, it is not perfect. :dir is meant to be affected by both the dir HTML attribute and the direction CSS property, but :lang is only affected by the lang HTML attribute. When setting the dir HTML attribute the lang is usually also set, so it should work for most cases, but it is not possible to polyfill 100% correctly in pure CSS, so keep this in mind.
• Support for :lang selector with multiple arguments, e.g. :lang(en, fr, de) This is currently only supported natively in Safari. Parcel CSS will generate fallbacks for other browsers using the :is selector, e.g. :is(:lang(en), :lang(fr), :lang(de)).
• Downlevel :is selector in simple cases. The :is selector is fairly recent, but older browsers have supported the :-webkit-any and :-moz-any selectors, which are equivalent but do not support complex selectors (e.g. selectors with combinators) as arguments. Parcel CSS will compile :is to these fallbacks depending on your browser targets when only simple selectors are used.
• A new approach to compiling CSS Logical Properties. Logical properties such as border-start-start-radius allow you to define many CSS properties in terms of the writing direction, so that UIs mirror in right-to-left languages. Parcel CSS used to compile logical properties using CSS variables, but this had some problems with the cascade when overriding values defined in other rules. Now, we use the :dir or :lang selectors (as described above) to compile these properties instead.
• Rust API improvements. The Parse and ToCss traits are now exposed, which allows you to parse and serialize individual CSS rules and values. See https://github.com/parcel-bundler/parcel-css/pull/140 for an example. Errors also now implement std::error::Error.

Fixes

• Fix extraneous trailing space for border property
• Allow more user action pseudo classes after -webkit-scrollbar

This release includes bug fixes.

• Allow empty string in @-moz-document url-prefix() function
• font-family: revert/revert-layer cannot remove quotation marks
• Reserve revert-layer keyword in custom ident
• Support pseudo classes on ::-webkit-scrollbar pseudo elements
• Parse predefined list styles as enum so they aren't renamed in css modules
• Ensure custom property names are escaped
• Fix css module hashing with implicit CSS grid line names

This release adds a number of new features, including improved vendor prefixing support, and support for new CSS syntax features.

• Vendor prefixing and improved minification for mask properties. This includes collapsing multiple separate properties into shorthands, as well as support for new color fallbacks. Example.
• Vendor prefixing for clip-path
• Vendor prefixing for filter
• Downlevel :not selector list syntax for older browsers
• Parsing support for :has, now supported natively in Safari.
• Support for @font-palette-values rule and font-palette property. These let you override the color palette of color fonts, such as emoji.
• Support for many more length units, including in calc() simplification. These include new viewport units, and new font relative units from css-values-4.
• Analyze url() dependencies in custom properties. Only absolute URLs are supported. Relative paths will throw an error. This is because in the browser, urls in custom properties resolve from the location where the var() is used, not where the custom property is defined. Therefore, without actually applying all var() usages, it's not possible to know all of the potential urls that will be resolved. Enforcing that these urls must be absolute resolves this ambiguity.
• Update compatibility data from caniuse and mdn

This release brings more CSS Color goodies including the new color-mix() function, gamut mapping for color conversions, support for none components, and more.

color-mix()

The color-mix() function from the CSS Color Level 5 spec allows you to mix two colors together by a specified amount. This works similarly to defining a gradient between two colors, and then choosing the interpolated value somewhere in between.

This syntax is currently available behind a flag in Safari TP, but Parcel CSS parses this function and converts it to a color definition that current browsers can understand.

color-mix(in lch, teal 65%, olive);

results in:

lch(49.4431% 40.4806 162.546);

You get a ton of control over how colors are mixed as well. In addition to choosing how much of each color to mix in, you can choose which color space interpolation occurs in as well as control how hues are mixed. For example:

color-mix(in lch longer hue, teal 65%, olive);

results in:

lch(49.4431% 40.4806 288.546);

Parcel CSS will also convert this color to a legacy RGB color supported by older browsers as well if needed.

Learn more about color-mix() and interpolation in the spec, and try it out!

none components

Colors can now also have components that are defined as none. For example, hsl(none 20% 40%). This defines an HSL color where the hue component is "missing". If rendered directly, this is equivalent to a value of 0. However, these missing components are interpreted differently when mixing colors using color-mix(). In this case, the none component is replaced by the corresponding component in the other color. For example:

color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%));

is equivalent to:

hsl(30deg 20% 60%)

The none components of each color are replaced with the other, and the remaining ones are interpolated.

This can also happen automatically in some cases, when components are deemed "powerless". Read more about how this works in the spec.

Gamut mapping

Some color spaces have a higher color gamut than others. This means the range of valid values is wider, i.e. it can represent more colors. For example, the P3 color space can represent around 25% more colors than sRGB. When converting between color spaces, we need to decide how to handle these "out of gamut" colors. Previously, this was done by clipping. For example, color(display-p3 0 1 0) would become rgb(0, 255, 0). However, this can result in strange behavior in some cases, where you end up with a very different looking color because the relative amounts of each channel changed when one of them is clipped.

Now, Parcel CSS implements Gamut Mapping as defined in the CSS Color spec. This attempts to find a closer color to the intended one within the gamut of the target color space by converting the color to the OKLab color space and adjusting the chroma component (i.e. how "colorful" it is) until the result is within the color gamut and "close enough" to the original color. The above example now converts to rgb(0, 249, 66) instead of rgb(0, 255, 0).

More improvements

• If you're using the Rust API, each color format is now represented as a struct and you can convert between them easily using Rust's From and Into traits.
• Color fallback generation is improved so that we generate fewer fallbacks when not needed.
• Fixed the order of border and border-image declarations in generated code.

This release adds support for the CSS Color Level 4 spec, which enables many new ways to define colors including high gamut (e.g. HDR) color spaces. Currently, these are only implemented in Safari, but Parcel CSS can now compile them to older sRGB colors supported across all browsers automatically.

The supported functions are:

• lab() and lch() – these are device independent color spaces which can represent the entire human visual spectrum. Currently supported in Safari 15.
• oklab() and oklch() – an improved version of the lab and lch color spaces. Available in Safari TP.
• color() – provides a way to use pre-defined color spaces such as Display P3 (supported since Safari 10), rec2020, and CIE XYZ. All specified color spaces are supported.

This screenshot shows the difference between sRGB and lab in terms of color gamut. The lab version is much more vibrant when displayed on modern hardware with high color gamut support.

Parcel CSS will compile these colors according to your browser targets. When a browser doesn't support them, duplicate fallback declarations will be created containing the equivalent sRGB color. The original color will also be included so that browsers that support it will get a higher color gamut. If a lower version of Safari is included that doesn't support Lab but does support P3, a Display P3 version will also be included as it includes a higher color gamut than sRGB.

For example:

.foo {
  color: oklab(59.686% 0.1009 0.1192);
}

becomes:

.foo {
  color: #c65d07;
  color: color(display-p3 .724144 .386777 .148795);
  color: lab(52.2319% 40.1449 59.9171);
}

In addition, Parcel CSS also supports these colors when used within custom properties, or in declarations that use var() references. In these cases, fallbacks cannot be done with duplicate declarations in the same rule. Instead, Parcel CSS outputs a duplicate rule within an @supports block.

.foo {
  text-shadow: var(--x) lab(29.2345% 39.3825 20.0664);
  --foo: lab(29.2345% 39.3825 20.0664);
}

becomes:

.foo {
  text-shadow: var(--x) #7d2329;
  --foo: #7d2329;
}

@supports (color: color(display-p3 0 0 0)) {
  .foo {
    text-shadow: var(--x) color(display-p3 .451706 .165516 .1701);
    --foo: color(display-p3 .451706 .165516 .1701);
  }
}

@supports (color: lab(0% 0 0)) {
  .foo {
    text-shadow: var(--x) lab(29.2345% 39.3825 20.0664);
    --foo: lab(29.2345% 39.3825 20.0664);
  }
}

Try it out here.

To learn more about these new color spaces, check out this article, and play around with this lab color picker.

This release add some new features, including support for unicode-range syntax, cascade layers, and the @property rule. There is also a fix to the order in which CSS files are bundled to be correct according to the spec and browser behavior.

Unicode range

The unicode-range property within an @font-face rule declares what characters a font supports. Parcel CSS now supports parsing and minifying this syntax. For example, U+2000-20FF minifies as U+20??. Example

Cascade layers

Parcel CSS now supports parsing, minifying, and bundling cascade layers including the @layer rule and layers defined within @import rules. When bundling an @import with a layer, the rules within that dependency are wrapped in an @layer rule. For example:

/* a.css */
@import "b.css" layer(foo);
.a { color: red }

/* b.css */
.b { color: green }

becomes:

@layer foo {
  .b {
    color: green;
  }
}

.a {
  color: red;
}

Bundling order

Cascade layers also introduced a change to the way bundling must occur to preserve correctness. @layer rules are one of the few rules that are allowed before @import rules, so we can no longer simply concatenate files together. The imported CSS must be inlined where the @import rule was seen, preserving the @layer rules before.

This also uncovered a bug in the bundling logic. If a CSS file is imported twice, the last occurrence should be preserved rather than the first. For example:

/* index.css */
@import "a.css";
@import "b.css";
@import "a.css";

/* a.css */
body { background: green; }

/* b.css */
body { background: red; }

In this example, the body should be green, but the previous bundling behavior made it red. This might seem unexpected, as a number of CSS bundlers implement this incorrectly, taking the first instance rather than the last. But in browsers, both @import "a.css" rules are evaluated, so the last one wins. Now Parcel CSS matches browser behavior here as well.

@property rule

The @property rule allows you to register the syntax for custom properties, so that they may be type checked, have a default value, and control inheritance. For example:

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

This defines a custom property named --property-name, which accepts colors, has an initial value of #c0ffee and is not inherited.

Parcel CSS can now parse, validate and minify this rule. This includes parsing the syntax property and validating that the initial-value parses according to it. The initial-value and syntax are also minified accordingly. Here's a live example.

This release includes a few bug fixes:

• Fixes @media rules with no media queries, improves minification for media queries that always match, and improves error reporting for invalid media queries. https://github.com/parcel-bundler/parcel-css/issues/84
• Fixes lifetime issue with latest dashmap version that caused compile errors for the Rust crate. https://github.com/parcel-bundler/parcel-css/issues/83
• Merge important declarations of adjacent rules. https://github.com/parcel-bundler/parcel-css/pull/89

This release adds a new standalone CLI for Parcel CSS, implements @import bundling, reduces binary size, and improves performance.

CLI

Parcel CSS now has a standalone CLI written in Rust, which can be used when you only need to compile CSS and don't need a more advanced build tool. It supports all Parcel CSS features, including enabling nesting and custom media, CSS modules, source maps, targets, and more. It also supports a --bundle option, which inlines @import rules. See below for details about that.

Check out the readme for more details.

Thanks to @schultyy and @rrcobb for contributing to the CLI!

Bundling

We now have a bundle method in the Node API, and a --bundle option in the CLI, which inlines the contents of @import rules. This lets you write multiple source files, but compile them into a single output file. Parcel CSS handles wrapping rules in @media and @supports blocks as needed, and files are parsed in parallel for performance. This also enables @custom-media rules to be referenced across different files.

Reduced binary size and improved performance

We have reduced the binary size for the Node bindings significantly in this release (4.08 MB -> 2.64 MB). This was accomplished using some Rust compiler options, as well as some refactoring of large methods. This refactoring also happened to improve performance as well by another ~5%! Here are the updated benchmark results:

Improved performance

This release improves performance by avoiding string copies during parsing, and instead borrowing all strings stored in the AST from the input source code (i.e. just pointers). This also reduces memory usage. New benchmark results:

Improved minification

This release also improves minification of custom properties, and properties containing CSS variable references. Parcel CSS can now remove unnecessary whitespace and comments in these properties, and minify color values and numbers embedded within them. For example:

.foo {
  color: var(--color, rgb(255, 255, 0));
}

now minifies to:

.foo{color:var(--color,#ff0)}

Minification of border related properties is also improved by better use of shorthands. For example, the following css:

.foo {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
}

now compiles to:

.foo {
  border: 1px solid #000;
  border-width: 1px 2px;
}

Other fixes

• Fix compilation of CSS nesting selectors with combinators in parent rule - 1e79fa7dd839cf4ea588c2c96c6623560ceca667
• Fix list-style-type property in CSS modules when none value is used - 9d38efbd11b74a71d001c077d56bae7491afe078
• Fix dependency collection in image-set - 8378ae25479c4ad57a46518a26403e7bfef464b4
• Fix vendor prefixing image-set - 0d01b83fdc165d6e78843565f2392240ccf2edef
• Update prefix and compat data - 7060ca1579aea1edf76d6e9d370156d481150dfe
• Fix transition vendor prefix decomposition - 718efba6f9db1e1bd07755f68a69823282385c5d
• Improve border shorthand minification - 46cca004993e67eed6f0ca64570e55f705ee5b30
• Fix compat logic with multiple targets - f1bb3cf40b03f2292c6387eb5c85f6fb393aa9d3
• More progress on CLI, including sourcemap, nesting, and css-modules CLI flags - d13f86a9820ac1b184153d09eaf0a987b3855aba

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.

What's Changed

• Implement basic parsing for legacy @viewport rule in https://github.com/parcel-bundler/parcel-css/commit/56e6bf0c47805cd2d9e66c6d78726975597432a8
• Add basic CLI by @schultyy in https://github.com/parcel-bundler/parcel-css/pull/44
• Added StyleSheet::new method to Rust API by @deckchairlabs in https://github.com/parcel-bundler/parcel-css/pull/53
• Simplify comparison in browser compatibility data by @Danue1 in https://github.com/parcel-bundler/parcel-css/pull/54
• Write url placeholders with quotes in https://github.com/parcel-bundler/parcel-css/commit/41eefe4d20a64cec062e40851f5b7ffb59f3545c

New Contributors

• @schultyy made their first contribution in https://github.com/parcel-bundler/parcel-css/pull/44
• @deckchairlabs made their first contribution in https://github.com/parcel-bundler/parcel-css/pull/53
• @Danue1 made their first contribution in https://github.com/parcel-bundler/parcel-css/pull/54

Full Changelog: https://github.com/parcel-bundler/parcel-css/compare/v1.0.2...v1.0.3