https://github.com/fjc0k/babel-plugin-smart-css-modules

Automatic recognition of CSS Modules.
https://github.com/fjc0k/babel-plugin-smart-css-modules

babel babel-plugin css-modules

Last synced: 22 days ago
JSON representation

Automatic recognition of CSS Modules.

• Host: GitHub
• URL: https://github.com/fjc0k/babel-plugin-smart-css-modules
• Owner: fjc0k
• License: mit
• Created: 2020-11-30T13:10:16.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-17T07:06:33.000Z (about 4 years ago)
• Last Synced: 2024-12-19T15:51:46.932Z (22 days ago)
• Topics: babel, babel-plugin, css-modules
• Language: TypeScript
• Homepage:
• Size: 91.8 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-smart-css-modules

Automatic recognition of CSS Modules.

| Input                          | Output                                 |

| ------------------------------ | -------------------------------------- |

| `import './index.scss'`        | `import './index.scss'`                |

| `import _ from './index.css'`  | `import _ from './index.css?modules'`  |

| `import _ from './index.scss'` | `import _ from './index.scss?modules'` |

| `import _ from './index.less'` | `import _ from './index.less?modules'` |

## Support

| Framework | Support                                                                                                            |

| --------- | ------------------------------------------------------------------------------------------------------------------ |

| Vue CLI   | ✅  [Native](https://github.com/vuejs/vue-cli/blob/master/packages/%40vue/cli-service/lib/config/css.js#L111) |

| UmiJS     | ✅  [Native](https://github.com/umijs/umi/blob/master/packages/bundler-webpack/src/getConfig/css.ts#L39)      |

## Install

```bash

npm i babel-plugin-smart-css-modules -D

```

## Usage

Add `babel-plugin-smart-css-modules` to `babel.config.js`:

```javascript

module.exports = {

  plugins: [

    require('babel-plugin-smart-css-modules').useSmartCssModules({

      // options

    }),

  ],

}

```

## Options

| Parameter | Type     | Description                             | Example               | Default                                                   |

| --------- | -------- | --------------------------------------- | --------------------- | --------------------------------------------------------- |

| exts      | string[] | The supported extensions.               |                       | `['.css', '.less', '.sass', '.scss', '.stylus', '.styl']` |

| flag      | string   | The query flag to identify CSS Modules. |                       | `modules`                                                 |

| ignore    | RegExp   | The RegExp of the ignored files.        | `/_variables\.scss$/` |                                                           |

## License

MIT (c) Jay Fong