esbuild-plugin-react18-css

esbuild-plugin-react18-css

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

or

$ npm install esbuild-plugin-react18-css

or

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

generateScopedName

It can be a string like [name]__[local]___[hash:base64:5] or [name]__[local] or my-prefix__[name]__[local]

The functions arguments are as follows.

• css: the entire css file content
• className: className from css file for the specific class
• fileName: absolute fileName

🤩 Don't forger to star this repo!

Want hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScrypt

License

Licensed as MIT open source.

with 💖 by Mayank Kumar Chaudhari