Scoped CSS imports in JS
import stylesScope from "./styles.css" with { type: "css", inject: "scoped" };
Using JS import attributes and the CSS @scope rule, we could have automatically injected CSS modules imported from JS files, that are specific to a component and don't conflict with other styles in the page.
You can see an example in the src/
directory: both Button
and Label
internally use a .text
class, but they don't conflict with each other.
You can run this example at https://nicolo-ribaudo.github.io/scoped-css-imports/, using Chrome with the Experimental Web Platform features flag enabled in chrome://flags/.