Featured packages built with this template.

✅ 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)

$ pnpm add esbuild-plugin-react18-css

or

$ npm install esbuild-plugin-react18-css

or

$ yarn add esbuild-plugin-react18-css

// tsup.config.ts or tsup.config.js import { defineConfig } from "tsup"; import cssPlugin from "esbuild-plugin-react18-css"; export default defineConfig(options => ({ ... esbuildPlugins:[cssPlugin()] }));

import cssPlugin from "esbuild-plugin-react18-css"; esbuild.build({ ... plugins: [cssPlugin()], });

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

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

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

Licensed as MIT open source.

with 💖 by Mayank Kumar Chaudhari