css-module-flow-loader

css-module-flow-loader

Webpack loader for creating Flow type definitions based on CSS Modules files.

This gives you:

• flow type safety showing usage of non existing classes
• auto-completing for css files in most editors

How it works

Given the following css file using CSS Modules:

.my_class {
    display: block;
}

css-module-flow-loader creates the following .flow file next to it:

// @flow strict
/* This file is automatically generated by css-module-flow-loader */
declare module.exports: {|
    +'my_class': string;
|};

How to use

The css-module-flow-loader need to be added right after style-loader:

$ npm i -D css-module-flow-loader

{
  test: /\.css$/,  // or the file format you are using for your CSS Modules
  use: [
    'style-loader',
    'css-module-flow-loader',
    // other loaders here ...
  ]
}

Troubleshooting

Support for other file extensions

To support .scss, .sass or similar files extensions you need to update your .flowconfig file with the following section:

[options]
# Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
module.file_ext=.sass
// other files used by flow

Without this Flow might error out with Required module not found.