CSS module support

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 https://github.com/microsoft/TypeScript/issues/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.

[justinfagnani]

@andrewbranch also, fixing https://github.com/microsoft/TypeScript/issues/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;
}