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

• [x] use alias
• [ ] Adapt to versions of vite 5.0.12 and above

Special Thanks

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