CSS module support

[justinfagnani]

Suggestion

Now that TS 4.5 supports import assertions and JSON modules, it'd be great if it similarly supported CSS modules which are now shipping in Chrome and Edge.

There are two aspects of JSON module support that would be important to add for CSS modules:

1. Built-in typing of CSS modules based on their import assertion. This could be done in library code with Ambient Module Declarations for Import Attributes (formerly known as Import Assertions) #46135 but since there's a specified interface of CSS modules, the type would ideally be included in TS's DOM lib.
2. Copying of CSS files during build. JSON files are copied as part of compilation so that relative paths to JSON modules work in the compiled output. Doing this for CSS modules would ensure that they also work in the output without an extra copy step.

🔍 Search Terms

• CSS module

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

📃 Motivating Example

import styles from './styles.css' assert {type: 'css'};
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];

💻 Use Cases

Importing standard CSS modules...

[benjamind]

This would indeed simplify a lot of build processes that we have on Adobe projects. Right now this is all handled out of band by additional build steps, or bundler plugins.

[freshp86]

Any updates here?

[JustFly1984]

+1

[mhoad]

@andrewbranch just wondering what kind of feedback you might be looking for on this issue in order to help with this?

[franktopel]

Another 5 months in, what's the state of this?

[andrewbranch]

Well, the 52 👍 on the issue are a good signal. Let’s start here:

which are now shipping in Chrome and Edge.

After a year, has anything changed here? Any other major browsers shipping? Any significant changes to the proposal? What does the process for proposals here moving into a spec or standard look like? Any progress on that?

[thescientist13]

The precursor to CSS Modules is Constructable Stylesheets which in the past year have been shipped by Firefox and is now available in Safari Technical Preview. 🎉

That said, I don't think FF has shipped Import Assertions yet and Safari still has CSS Module Scripts in open status.

But they are all coming along quickly!

[justinfagnani]

@andrewbranch CSS Module Scripts, along with JSON Module Scripts, are merged into the HTML specification: https://html.spec.whatwg.org/multipage/webappapis.html#creating-a-css-module-script

As mentioned by @thescientist13, Constructible StyleSheets is a prerequisite and is now implemented in all major browsers.

Firefox also has a positive response to CSS Modules Scripts on their standard position issue. Webkit has listed a single concern about CSP integration (but this is just a decision that needs to be made, not a risk).

Given that Chrome, Edge, Safari and Firefox were all very involved in the CSS Module Scripts discussion, including specs that build up to it like import assertions, constructible stylesheets, adopted stylesheets, and modifications to JS module records, I'm personally very confident that this will ship in all browser, and relatively soon at the pace that they're moving.

[justinfagnani]

@andrewbranch also, fixing #46135 first is an option that would give us the ability to type CSS Module Scripts correctly, like so:

declare module '*' assert {type: 'css'} {
  const stylesheet: CSSStyleSheet;
  export default stylesheet;
}

[JustFly1984]

Currently I use Typed CSS Modules VSCode extension to generate d.ts files for each css/scss file. It helps a lot to find undefined classnames and fails build if somebody removes used classname from css/scss.
The way how css/scss type declaration is used in create-react-app is a crime, cos it just provides a Record<string, string>, which defaults any classname to valid string, even if it does not exists.

It could be nice if classnames, scss variables and other selectors could be inferred automatically without the need to generate d.ts files.

[justinfagnani]

@JustFly1984 this is about typing support for the HTML-standard CSS module scripts, which are already supported in some browsers. They simply default export a CSSStyleSheet, and the feature request is to type assert {type: 'css'} modules as doing that.

Userland CSS module systems will need their own support for their semantics, and presumably already have such systems in their toolchains.

[franktopel]

@justinfagnani

Not that TS 4.5 support import assertions and JSON modules [...]

Was that rather supposed to be

Now that TS 4.5 supports import assertions and JSON modules [...]

?

[bivens-dev]

@andrewbranch not sure if you're the best person to ping about this but as far as I can tell this is now officially part of the HTML spec https://html.spec.whatwg.org/multipage/webappapis.html#creating-a-css-module-script and is now natively supported in a number of browsers and has full cross browser support thanks to this https://github.com/guybedford/es-module-shims

Would it make sense to revisit this perhaps?