I’ve been dreaming about type safety and editor autocompletion when using . There are a few TypeScript tools for this (see and ), but I didn’t find any solid tools for . CSS Modules this this Flow 😬 TL;DR I’ve made some new tools , and when trying them on a codebase I’m working on, Flow found a lot of dead code (and potential bugs) … The problems It is quite easy to misspell a class name or forget to update .js consumers after removing a class in a .css file. As an example, the class might not be defined in : foo Button.css /* @flow */ import styles from './Button.css'; const Button = () => <button className={styles.foo} />; Solutions To teach Flow about CSS Modules file, we can create a definition file containing the class names exposed by . By doing so we can get: Button.css.flow Button.css static type checks showing usage of non existing classes editor autocompletion of CSS classes (for editors supporting Flow) To generate these .flow files I was thinking of two use cases. One using a simple CLI and another using webpack. Solution: CLI is a CLI that quickly generates .flow files. css-modules-flow-types-cli Let us install it: npm install --save-dev css-modules-flow-types-cli # Oryarn install -D css-modules-flow-types-cli And then just run the CLI on your source directory: css-modules-flow-types src I recommend using the CLI on your CI system (like Travis or Circle) to ensure that all .flow files are up-to-date before running Flow. This will catch potential styling errors before deploying. Another use case is quick feedback loop when developing and changing CSS Modules files. The CLI includes a watch mode for this, but I myself would like to avoid having yet another tool that needs to be running while developing. As a lot of people already have webpack running, I did a small loader consuming the tokens from style-loader. Solution: webpack loader is a webpack loader keeping .flow files updated by consuming the tokens from . I recommend using this when developing as part of a webpack-dev-server setup. It will give a small slowdown, as the loader potentially needs write a lot of files. css-modules-flow-types-loader style-loader To get started: npm install --save-dev css-modules-flow-types-loader Then update your webpack config: {test: /**\.**css$/, // or the file format you are usinguse: ['style-loader',' ', // right after style-loader// Other loaders like css-loader after this:...]} css-modules-flow-types-loader And then sit back and enjoy CSS Modules being type checked by Flow. 🍺 Please let me know what you think… And give a little ⭐️ over at github. _css-modules-flow-types - Creates flow type definitions from CSS Modules files using Webpack loader or CLI 👾_github.com skovhus/css-modules-flow-types
