react-inline-css-module

    0.5.0 • Public • Published

    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
      ]
      ...
    }

    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>
    }

    Install

    npm i react-inline-css-module

    DownloadsWeekly Downloads

    3

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    25 kB

    Total Files

    19

    Last publish

    Collaborators

    • anjianshi