https://github.com/webbestmaster/css-module-flow-loader

css module flow loader
https://github.com/webbestmaster/css-module-flow-loader

Last synced: about 1 month ago
JSON representation

css module flow loader

• Host: GitHub
• URL: https://github.com/webbestmaster/css-module-flow-loader
• Owner: webbestmaster
• License: mit
• Created: 2020-08-10T07:57:54.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-09-20T17:11:02.000Z (over 4 years ago)
• Last Synced: 2024-12-15T17:47:10.879Z (2 months ago)
• Language: JavaScript
• Size: 45.9 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# css-module-flow-loader

[![Build Status](https://travis-ci.org/webbestmaster/css-module-flow-loader.svg?branch=master)](https://travis-ci.org/github/webbestmaster/css-module-flow-loader)

[![GitHub license](https://img.shields.io/npm/l/css-module-flow-loader)](https://github.com/webbestmaster/css-module-flow-loader/blob/master/license)

[![npm version](https://img.shields.io/npm/v/css-module-flow-loader.svg?style=flat)](https://www.npmjs.com/package/css-module-flow-loader)

[![GitHub stars](https://img.shields.io/github/stars/webbestmaster/css-module-flow-loader?style=social&maxAge=2592000)](https://github.com/webbestmaster/css-module-flow-loader/)

Webpack loader for creating [Flow](https://flow.org/) type definitions based on [CSS Modules](https://github.com/css-modules/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:

```css

.my_class {

    display: block;

}

```

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

```javascript

// @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`:

```sh

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

```

```javascript

{

  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`.