v1.11.0

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

v1.10.1

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

v1.10.0

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. e9277fd – 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. 96f419f

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

v1.8.3

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 – 0d7e4c6
• Parse z-index property and fix rounding issue with serialization – 839bcd1

v1.8.2

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. 677277c
• Fix stack overflow while simplifying calc expressions with nested functions 9a64787
• Fix minification of border: none shorthand 1f66776
• Fix interpretation of "not all" in media queries f146b66

v1.8.1

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!

v1.8.0

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 #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

v1.7.4

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

v1.7.0

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