Skip to content

Selector namespaces and :external(...)

Choose a tag to compare

@tivac tivac released this 12 Nov 00:14
· 1154 commits to main since this release

This is a big feature release, mostly.

1. Namespaced selectors

This is a simple way to avoid namespace collisions between @values you need to import. See #207 and #210 for more details.

@value * as ns from "./file.css"

.a {
    composes: ns.b;
}

2. :external(...)

A way to override styling on selectors from other files. #212

/* Source CSS */
.one {
    color: red;
}

.two :external(one from "./one.css") {
    color: blue;
}

/* Result CSS */
.mc56537f08_one {
    color: red;
}

.mc04cb4cb2_two .mc56537f08_one {
    color: blue;
}