v1.16.0

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 #294
• Avoid converting animation: "none" to animation: "none" none – @yisibl in #295
• If the browser doesn't support #rrggbbaa color syntax, output transparent instead of rgba(0, 0, 0, 0) – @yisibl in #296
• Support parsing angles with unitless zero in gradients and transforms – cbd392f
• Bump parcel_sourcemap dependency to fix parsing source maps without sourcesContent, and improve base64 performance – 061c0c2

v1.15.1

Fix transformStyleAttribute missing field analyzeDependencies error

v1.15.0

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

New features

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

Bug fixes

• Fix types for bundleAsync – adabfc1
• Fix CLI package – a82381f
• Fix bundling of @import rules with both layer and import conditions – f66c6d7
• Fix printing flex shorthand – 84298d2
• Parenthesize custom media conditions with not – 7c58283
• Fix handling of strings in animation-name property – 7efeef2

v1.14.0

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 #269
• match the spec so that feature-* in @font-face tech() becomes plural – @yisibl in #270
• CSS-wide keywords and none in @keyframes cannot remove quotes – @yisibl in #267

v1.13.1

Fixes

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

v1.13.0

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

v1.12.1

This release includes bug fixes.

• Fix stack overflow regression – c1c67e0
• Update compat data – b658cb9
• Fix prefixing mask-image – 713ce2e
• Prevent double prefixing mask-image – 6b15754
• Add missing errorRecovery option to TypeScript types for transformStyleAttribute function – 8de63d9

v1.12.0

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.

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.