https://github.com/ezhlobo/babel-plugin-transform-jsx-css-modules

Transform className attributes in JSX to reference CSS Modules
https://github.com/ezhlobo/babel-plugin-transform-jsx-css-modules

Last synced: 9 days ago
JSON representation

Transform className attributes in JSX to reference CSS Modules

• Host: GitHub
• URL: https://github.com/ezhlobo/babel-plugin-transform-jsx-css-modules
• Owner: ezhlobo
• License: mit
• Created: 2018-01-30T08:25:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T01:22:13.000Z (almost 2 years ago)
• Last Synced: 2024-04-23T14:41:47.187Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 753 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-transform-jsx-css-modules

Transforms `className` attributes in JSX to get css-modules' references.

[![npm version](https://img.shields.io/npm/v/babel-plugin-transform-jsx-css-modules.svg?longCache)](https://www.npmjs.com/package/babel-plugin-transform-jsx-css-modules) [![CI Status](https://img.shields.io/circleci/project/github/ezhlobo/babel-plugin-transform-jsx-css-modules/master.svg?longCache)](https://circleci.com/gh/ezhlobo/babel-plugin-transform-jsx-css-modules/tree/master)

**Note:** It does not turn on CSS Modules in your project, it assumes that you made it yourself (via webpack and css-loader for example).

- [Example](#example)

- [Usage](#usage)

- [Options](#options)

## Example

```jsx

import './styles.css'

const Component = () => (

  


    
Hello World

    
I'm an example!

  

)

```


Will be transpiled into

```jsx

import __CSSM__ from './styles.css'

const Component = () => (

  


    
Hello World

    
I'm an example!

  

)

```


## Usage

1. Install plugin

   ```shell

   npm install --save-dev babel-plugin-transform-jsx-css-modules

   ```

2. Add plugin to your `.babelrc` file

   ```json

   {

     "plugins": [

       "transform-jsx-css-modules"

     ]

   }

   ```

## Options

| Name | Type | Default | Description

| - | - | - | -

| [`pathToStyles`](#pathtostyles) | `RegExp` | `/^\.\/styles\.css$/` | It specifies what imports should be transformed
**Note:** Escape symbols if you specify it as a string

### `pathToStyles`

If you set it to `/^\.\/module\.scss$/` it will handle imports which start and end with `./module.scss`:

```json

{

  "plugins": [

    ["transform-jsx-css-modules", {

      "pathToStyles": "^\\.\\/module\\.scss$"

    }]

  ]

}

```

```jsx

import './module.scss'

```

Will be transformed into:

```jsx

import __CSSM__ from './module.scss'

```