css-modules-flow-types-loader

Webpack loader creating Flow type definitions from CSS Modules files

Usage no npm install needed!

<script type="module">
  import cssModulesFlowTypesLoader from 'https://cdn.skypack.dev/css-modules-flow-types-loader';
</script>

README

css-modules-flow-types-loader npm version

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

This gives you:

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

Example

Given the following css file using CSS Modules:

@value primary: red;

.myClass {
  color: primary;
}

css-modules-flow-types creates the following .flow file next to it:

// @flow
/* This file is automatically generated by css-modules-flow-types */
declare module.exports: {|
  +'myClass': string;
  +'primary': string;
|};

Usage

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

$ npm install --dev css-modules-flow-types-loader
$ yarn install -D css-modules-flow-types-loader

{
  test: /\.css$/,  // or the file format you are using for your CSS Modules
  use: [
    'style-loader',
    'css-modules-flow-types-loader',
    // Other loaders like css-loader after this:
    {
      ...
    }
  ]
}

Inspiration

License

This software is released under the MIT License.