CSS module support
See original GitHub issueSuggestion
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:
- 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.
- 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…
Issue Analytics
- State:
- Created 2 years ago
- Reactions:72
- Comments:12 (1 by maintainers)
Top Results From Across the Web
Documentation about css-modules - GitHub
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. All URLs (...
Read more >What are CSS Modules and why do we need them?
With CSS Modules, it's a guarantee that all the styles for a single component: ... Plus, any component can have a true dependency,...
Read more >Using CSS Module Scripts to import stylesheets - web.dev
With the new CSS module scripts feature, you can load CSS style sheets with import statements, just like JavaScript modules.
Read more >A deep dive into CSS Module - LogRocket Blog
According to the official CSS Module GitHub repository, a CSS Module is a CSS file in which all class names and animation names...
Read more >Component-Scoped Styles with CSS Modules - Gatsby
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS Modules let...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
@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: