react-inline-css-module

Auto transform CSS Module class name for React with Webpack or Vite.

Like babel-plugin-react-css-modules, but more easy to use.

1. Support Webpack and Vite
2. Support import multiple style files

Webpack Configuration

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          // options are optional
          { loader: 'react-inline-css-module/dist/webpack-loader', options: { reactVariableName: 'React' } },

          // other loaders, eg babel-loader
          ...
        ]
      }
    ]
  }
  ...
}

Vite Configuration

const reactInlineCSSModulePlugin = require('react-inline-css-module/dist/vite-plugin').default

module.exports = {
  ...
  plugins: [
    reactInlineCSSModulePlugin({ reactVariableName: 'React' })    // options are optional
  ]
  ...
}

TypeScript Configuration

{
  "compilerOptions": {
    "types": ["react-inline-css-module/src/style-name"]
  }
}

App Code Example

app.module.css

.app {
  color: #777;
}

.info {
  color: green;
}

App.tsx

import './app.module.css'

function App() {
  return (
    <div styleName="app">
      <div>content</div>
      <div styleName="info">info</div>
    </div>
  )
}