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.