https://github.com/react18-tools/esbuild-plugin-react18-css
ESBuild plugin to handle CSS/SCSS modules, autoprefixer, etc.
https://github.com/react18-tools/esbuild-plugin-react18-css
Last synced: 12 months ago
JSON representation
ESBuild plugin to handle CSS/SCSS modules, autoprefixer, etc.
- Host: GitHub
- URL: https://github.com/react18-tools/esbuild-plugin-react18-css
- Owner: react18-tools
- License: mit
- Created: 2024-03-15T11:02:53.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T08:25:19.000Z (over 1 year ago)
- Last Synced: 2024-10-29T09:47:05.999Z (over 1 year ago)
- Language: TypeScript
- Size: 564 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# esbuild-plugin-react18-css
[](https://github.com/react18-tools/esbuild-plugin-react18-css/actions/workflows/test.yml) [](https://codeclimate.com/github/react18-tools/esbuild-plugin-react18-css/maintainability) [](https://codecov.io/gh/react18-tools/esbuild-plugin-react18-css) [](https://www.npmjs.com/package/esbuild-plugin-react18-css) [](https://www.npmjs.com/package/esbuild-plugin-react18-css)  [](https://gitpod.io/from-referrer/)
> [Featured packages built with this template.](./FEATURED.md)
## 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](https://react18-tools.github.io/esbuild-plugin-react18-css) ([Docs](https://react18-tools.github.io/esbuild-plugin-react18-css))
## 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](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](https://github.com/react18-tools/esbuild-plugin-react18-css)!
Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)
## License
Licensed as MIT open source.
with 💖 by Mayank Kumar Chaudhari