Skip to content

v1.4.0
Compare
Choose a tag to compare
@devongovett devongovett released this 23 Feb 15:53
· 472 commits to master since this release
v1.4.0
e722636

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.

Assets 2