DEV Community

Kenneth Skovhus
Kenneth Skovhus

Posted on • Originally published at skovhus.dev on

1 1

Type safe CSS Modules with Flow

CSS Modules + Flow = type safety and editor autocompletion
CSS Modules + Flow = type safety and editor autocompletion

I’ve been dreaming about type safety and editor autocompletion when using CSS Modules. There are a few TypeScript tools for this (see this and this), but I didn’t find any solid tools for 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 consumers after removing a class in a .css file. As an example, the class foo might not be defined in Button.css:

/* @flow */
import styles from './Button.css';
const Button = () => <button className={styles.foo} />;
Enter fullscreen mode Exit fullscreen mode

Solutions

To teach Flow about CSS Modules file, we can create a definition file Button.css.flow containing the class names exposed by Button.css. By doing so we can get:

  • 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

css-modules-flow-types-cli is a CLI that quickly generate .flow files.

Let us install it:

npm install --save-dev css-modules-flow-types-cli

# or

yarn install -D css-modules-flow-types-cli
Enter fullscreen mode Exit fullscreen mode

And then just run the CLI on your source directory:

css-modules-flow-types src
Enter fullscreen mode Exit fullscreen mode

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

css-modules-flow-types-loader is a webpack loader keeping .flow files updated by consuming the tokens from style-loader. 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.

To get started:

npm install --save-dev css-modules-flow-types-loader
Enter fullscreen mode Exit fullscreen mode

Then update your webpack config:

{
  test: /\.css$/, // or the file format you are using
  use: [
    'style-loader',
    'css-modules-flow-types-loader', // right after style-loader
    // Other loaders like css-loader after this:
    ...
  ]
}
Enter fullscreen mode Exit fullscreen mode

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.

This blog post was cross-posted from https://skovhus.github.io/type-safe-css-modules-with-flow/ and originally posted on hackernoon.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay