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

``bash
$ pnpm add esbuild-plugin-react18-css
`

or

`bash
$ npm install esbuild-plugin-react18-css
`

or

`bash
$ yarn add esbuild-plugin-react18-css
`

use with tsup

`ts
// 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

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

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

CSSPluginOptions

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

$3

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

$3

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

!Repo Stats

License

Licensed as MIT open source.

with 💖 by Mayank Kumar Chaudhari