Vite-react-stylename NPM

vite-react-stylename

A vitejs plugin to use babel-plugin-react-css-modules

This project was modified based on the vite-plugin-react-css-module. Due to the lack of adaptation to alias in the source project and a long absence of updates, a new project was opened using vite's lib mode.

getting start

Installation

pnpm install vite-react-stylename

other devDependencies

pnpm install less postcss-less generic-names @types/react-css-modules -D

usage

vite

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteReactStyleName from "vite-react-stylename";
import genericNames from "generic-names";
import { resolve } from "path";

const generateScopedName = genericNames("[name]__[local]__[hash:base64:4]");


export default defineConfig({
  plugins: [
    react(),
    viteReactStyleName({
      generateScopedName,
      filetypes: {
        ".less": {
          syntax: "postcss-less",
        },
      }
    }),
  ],
  css: {
    modules: {
      generateScopedName: generateScopedName,
    },
  }
});

In React, you can use xxx.module.less + stylename to enable the CSS module.

import ReactDOM from "react-dom/client";
import "./index.module.less";
import "@/assets/index.less";

function App() {
  return <div styleName="app-container">Hello vite-react-stylename!</div>;
}

ReactDOM.createRoot(document.getElementById("app")!).render(<App />);

options

you can use all the options exclude webpackHotModuleReloading of babel-plugin-react-css-modules.

Name	Type	Description	Default
`context`	`string`	Must match webpack `context` configuration. `css-loader` inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.	`process.cwd()`
`exclude`	`string`	A RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules `exclude: 'node_modules'`
`filetypes`	`?FiletypesConfigurationType`	Configure postcss syntax loaders like sugarss, LESS and SCSS and extra plugins for them.
`generateScopedName`	`?GenerateScopedNameConfigurationType`	Refer to Generating scoped names. If you use this option, make sure it matches the value of `localIdentName` in webpack config. See this issue	`[path]___[name]__[local]___[hash:base64:5]`
`removeImport`	`boolean`	Remove the matching style import. This option is used to enable server-side rendering.	`false`
`handleMissingStyleName`	`"throw"`, `"warn"`, `"ignore"`	Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined). Setting this option to `"ignore"` is equivalent to setting `errorWhenNotFound: false` in react-css-modules.	`"throw"`
`attributeNames`	`?AttributeNameMapType`	Refer to Custom Attribute Mapping	`{"styleName": "className"}`
`skip`	`boolean`	Whether to apply plugin if no matching `attributeNames` found in the file	`false`
`autoResolveMultipleImports`	`boolean`	Allow multiple anonymous imports if `styleName` is only in one of them.	`false`

Todo

use alias
Adapt to versions of vite 5.0.12 and above

Special Thanks

https://github.com/fchengjin/vite-plugin-react-css-module

styleName css-modules react-css-modules vite-react-stylename babel-plugin-react-css-modules vite-plugin-react-css-module

@babel/core babel-plugin-module-resolver babel-plugin-react-css-modules

12 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago