Is it worth adding docs about sharing styles with CSS Module Scripts

[andyjessop]

I'm struggling to find much info on browser support, but as I understand it, you could share CSS as actual stylesheets and just adopt them as needed into elements.

Should there be docs in the styling section?

[augustjk]

There's a bit of confusion because Chrome was shipping it for a while but using the older version of import attributes (formerly import assertions) using syntax

import styleSheet from "./styles.css" assert { type: "css" };

I believe Chrome is working on the new import attribute syntax using with

import styleSheet from "./styles.css" with { type: "css" };

but not shipped yet, or might be behind a flag.

Safari has implemented import attributes, but not CSS module scripts. They shipped import attributes with JSON module scripts only.

Tools like rollup or esbuild have mixed support for import attributes. I think there exist some plugins but unsure. Some exist to simply allow the parser to not break with importing CSS, whereas some do a conversion to JS.

It would be good to track this better with links to issues. But documenting it might be a bit premature.

[andyjessop]

That's probably why I'm struggling to find much info on it. Thanks very much for the context.

[augustjk]

Dumping some related issues here. They're a mix of import attribute support and specifically css module support:

microsoft/TypeScript#46689
evanw/esbuild#3384
rollup/rollup#4818
vitejs/vite#14674