parcel-bundler/lightningcss v1.12.0

on GitHub

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.