CLI and 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
Read more about the background in this blog post: "Type safe CSS Modules with Flow".
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;
|};
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:
{
...
}
]
}
$ npm install --dev css-modules-flow-types-cli
$ yarn install -D css-modules-flow-types-cli
This installs the runner as css-modules-flow-types
.
And run css-modules-flow-types <input directory or glob>
command.
For example, if you have .css files under src
directory, exec the following:
Running,
css-modules-flow-types src
Creates *.css.flow
files next to all css files.
(your project root)
- src/
| myStyle.css
| myStyle.css.flow [created]
To support .scss
, .sass
, .scss.module
or similar files extensions
you need to update your .flowconfig
file with the following section:
[options]
; Extensions
module.file_ext=.css
module.file_ext=.scss
module.file_ext=.sass
module.file_ext=.scss.module
Without this Flow might error out with Required module not found
.
To get started, run:
yarn
When developing:
yarn run check # (runs lint and unit test)
yarn run lint
yarn run test
yarn run test:cov
yarn run test:watch
This software is released under the MIT License.