Existing ToolingThere are great articles and tools that already exist in the world of CSS Modules and TypeScript.
This post is a great overview for using both CSS Modules and TypeScript with webpack.
The easiest way is to not integrate the two together at all by using require instead of import.
The styles object will be typed as any offering no type-safety.
To add full type-safety requires defining .
d.
ts (type definition) files for the corresponding styles.
This can be done by manually creating this file and defining all of the corresponding class names.
It’s tedious, duplicative work and error prone which defeats the purpose of type-safety.
A middle ground approach is to define a module definition that applies to all style imports.
It won’t catch invalid class names or provide the type-ahead in supported editors but it is an improvement on any.
For example, a file named css-modules.
d.
ts would achieve this:declare module "*.
scss" { const styles: { [className: string]: string }; export default styles;}But what about having full type-safety without manually providing the types?typings-for-css-modules-loadertypings-for-css-modules-loader is a drop-in replacement for css-loader (necessary for CSS Modules) to automatically generate the type definitions for your CSS Modules in webpack.
Since it’s a drop-in, it should also support SASS!But what if you’re not using webpack?typed-css-modulestyped-css-modules is a command-line interface (CLI) for generating type definitions for CSS Modules.
After installing the package, it can be run outside of webpack.
This is useful if you’re not using webpack, experimenting with adding type definitions to see what it would look like, or want to run it in one-off situations.
But what if you’re using SASS?????.typed-scss-modulesAs the name suggests, typed-scss-modules is heavily inspired by typed-css-modules.
It’s a CLI that generates type definitions focused on supporting CSS Modules written using SASS.
Example of writing a SASS CSS Module while generating the corresponding type definitions.
Getting startedInstall the package as a development dependency since the type definitions should only need to be generated in development:yarn add -D typed-scss-modules Now, the types can be generated by providing the directory (or glob pattern):yarn tsm src/Listing differencesThis option is inspired by Prettier’s list-different option which is particularly useful in Continuous Integration to ensure all proposed code changes adhere to the proper formatting.
Similarly, in this case, if a type definition doesn’t match what would be automatically generated, the command will fail and list the files that are invalid.
yarn tsm src/ –listDifferentListing the differences is only one of many options.
See the README for a full list of options for changing the naming convention, the type definition format, handling aliases, included search paths and other options.
????.SummaryThere is a spectrum for how CSS Modules can be integrated with TypeScript.
Depending on the specific use case, existing codebase, and other technologies being used there are various tools that can be used that fit the different needs.
If you’re specifically using CSS Modules, SASS, and TypeScript and want to see what generating type definitions might look like I encourage you to give typed-scss-modules a try!For more content on topics like this, React, TypeScript, JavaScript, or Design Systems check out the Rubber Ducking podcast.
.