Code Documentation

esbuild-plugin-react18-css

npm bundle size

Featured packages built with this template.

Features

✅ ESBuild plugin to handle CSS/SCSS modules, autoprefixer, etc.

✅ Create fully treeshakable libraries (import from esbuild-plugin-react18-css/client/component)

✅ Use CSS/SCSS modules - automatically converted to BEM like CSS

✅ fully treeshakable CSS - import only the CSS files your users need

✅ Full TypeScript Support

✅ Unleash the full power of React18 Server components

✅ Works with all build systems/tools/frameworks for React18

✅ Doccumented with Typedoc (Docs)

Install

$ pnpm add esbuild-plugin-react18-css

$ npm install esbuild-plugin-react18-css

$ yarn add esbuild-plugin-react18-css

use with `tsup`

// tsup.config.ts or tsup.config.js
import { defineConfig } from "tsup";
import cssPlugin from "esbuild-plugin-react18-css";

export default defineConfig(options => ({
    ...
    esbuildPlugins:[cssPlugin()]
}));

use with esbuild

import cssPlugin from "esbuild-plugin-react18-css";

esbuild.build({
  ...
  plugins: [cssPlugin()],
});

CSSPluginOptions

interface CSSPluginOptions {
  /**
   * By default name is generated without hash so that it is easier and reliable for library users to override some CSS.
   * Refer [loader-utils docs](https://github.com/webpack/loader-utils?tab=readme-ov-file#interpolatename) for more options
   * @defaultValue A function that generates name similar to [name]__[local] but without .module
   */
  generateScopedName?: string | ((className: string, path: string, css: string) => string);
  /** set skipAutoPrefixer to true to disable autoprefixer */
  skipAutoPrefixer?: boolean;
  /** global CSS class prefix. @defaultValue undefined */
  globalPrefix?: string;
  /** If you want to keep .module.css files. @defaultValue undefined */
  keepModules?: boolean;
}