v1.9.0

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 - f6f1673
• Bump Rust toolchain to v1.61.0, and drop deprecated retain_mut dependency (contributed by @joshstoik1) - #184