Update Readme

Author: mayank1513

README.md

@@ -1,12 +1,18 @@
 # esbuild-plugin-react18-css
 
-[![test](https://github.com/react18-tools/esbuild-plugin-react18-css/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/esbuild-plugin-react18-css/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/esbuild-plugin-react18-css/maintainability) [![codecov](https://codecov.io/gh/react18-tools/esbuild-plugin-react18-css/graph/badge.svg)](https://codecov.io/gh/react18-tools/esbuild-plugin-react18-css) [![Version](https://img.shields.io/npm/v/esbuild-plugin-react18-css.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-react18-css) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/esbuild-plugin-react18-css.svg)](https://www.npmjs.com/package/esbuild-plugin-react18-css) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-react18-css) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![test](https://github.com/react18-tools/esbuild-plugin-react18-css/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/esbuild-plugin-react18-css/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/4a09ba9315f3296c1524/maintainability)](https://codeclimate.com/github/react18-tools/esbuild-plugin-react18-css/maintainability) [![codecov](https://codecov.io/gh/react18-tools/esbuild-plugin-react18-css/graph/badge.svg)](https://codecov.io/gh/react18-tools/esbuild-plugin-react18-css) [![Version](https://img.shields.io/npm/v/esbuild-plugin-react18-css.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-react18-css) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/esbuild-plugin-react18-css.svg)](https://www.npmjs.com/package/esbuild-plugin-react18-css) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-react18-css) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
 
 > [Featured packages built with this template.](./FEATURED.md)
 
 ## Features
 
-✅ Fully Treeshakable (import from esbuild-plugin-react18-css/client/component)
+✅ 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
 
@@ -34,126 +40,58 @@ or
 $ 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";
 
-
-## Getting started:
-
-Click on the `"Use this template"` button to customize it for your next JavaScript/TypeScript/React/Vue/Next.js library or project.
-
-## What's Different?
-
-Compared to the default scaffold from create-turbo, this template offers:
-
-- Unit tests with `vitest`
-- Build setup with `tsup` and `esbuild-react18-useclient` Supports React Server components out of the box
-- **Automatic file generation**
-  - just run `yarn turbo gen` and follow the prompts to auto generate your new component with test file and dependency linking
-  - follow best practices automatically
-- GitHub actions/workflows to auto publish your package when version changes
-- GitHub action/workflow + preinstall scripts to automatically rebrand your repo on creation
-
-## Step by Step Instructions and Checklist
-
-- [ ] Star [this repo](https://github.com/react18-tools/esbuild-plugin-react18-css/) so that you and others can find it more easily for your next projects. It also helps me understand that people are using this repo so that I can maintain the repo and the documentation well.
-
-
-
-
-- [ ] Install and setup Node.js and IDE (I prefer VSCode)
-- [ ] Install the recommended VSCode extensions - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), [Trello Kanban](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)
-- [ ] Install dependencies using `pnpm`
-  - [ ] If you don't have `pnpm` installed, run `npm i -g pnpm` to install `pnpm` -> run `pnpm setup` to set up `pnpm` for global installations
-  - [ ] Run `pnpm i` to install dependencies and `preinstall` script will automatically touch up workflows and create a commit
-  - [ ] Run `pnpm i -g turbo` to install `turbo` globally (Sometime due to `TypeScript` and `Plop` version conflicts code generation requires global `turbo`).
-  - [ ] Run `turbo gen react-component`, and follow prompts to generate server or client components for your library
-    - [ ] Use `snake-case` for your component name - it will be automatically converted to `PascalCase`
-    - [ ] Your component and test files will be created in `**/src/client/` or `**/src/server/` directory depending on whether you choose `client` or `server` component
-- [ ] run `node scope.js` from the root directory if you want to publish scoped pacckage.
-  - [ ] We assumed that your npm user name is same as your GitHub account or organization username.
-  - [ ] Please make sure `owner` is set to your <npmjs.com> username before running the above command.
-- [ ] Set up `CodeCov`
-  - [ ] Visit codecov and setup your repo
-  - [ ] Create [repository secret](https://github.com/react18-tools/esbuild-plugin-react18-css/settings/secrets/actions) for `CODECOV_TOKEN`
-- [ ] Set up `CodeClimate`
-  - [ ] Visit CodeClimate and setup your repo
-  - [ ] Create [repository secret](https://github.com/react18-tools/esbuild-plugin-react18-css/settings/secrets/actions) for `CC_TEST_REPORTER_ID`
-  - [ ] add `*.test.*` to ignore patterns on the website
-  - [ ] update code climate badge
-- [ ] Add `NPM_AUTH_TOKEN` to repository secrets to automate publishing package
-  - [ ] login to your [`npm` account](https://www.npmjs.com/login) and create automation token
-  - [ ] Create a new repository secrets `NPM_AUTH_TOKEN`
-- [ ] Update description in `lib/esbuild-plugin-react18-css/package.json`
-- [ ] Update Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)
-- [ ] Create your library and update examples
-- [ ] Update README
-- [ ] Setup GitHub pages to deploy docs
-  - [ ] Go to [repo settings](https://github.com/react18-tools/esbuild-plugin-react18-css/settings/pages) -> pages (On left panel); Select deploy from a branch; Then Select `main` and `/docs`
-- [ ] Push your changes/Create PR and see your library being automatically tested and published
-- [ ] Optionally deploy your example(s) to Vercel.
-- [ ] Update sponsorship urls.
-- [ ] You are most welcome to star this template, contribute, and/or sponsor the `terbo-repo-template` project or my other open-source work
-- [ ] You can also fork the `terbo-repo-template` and add your package to `packages/shared-ui/src/examples/featured.json`
-  - [ ] If approved your package will be automatically added to FEATURED.md and also published on the home page of this repo.
-
-## What's inside?
-
-### Utilities
-
-This Turborepo template includes pre-configured tools:
-
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
-- Plop based code generator for scaffolding new components
-- Automatically rebrand this template to match your repo name
-
-### Apps and Packages
-
-This Turborepo includes the following packages/examples/lib:
-
-- `nextjs`: a [Next.js](https://nextjs.org/) app
-- `vite`: a [Vite.js](https://vitest.dev) app
-- `fork-me`: a React component library shared by both `Next.js` and `Vite` examples
-- `eslint-config-custom`: ESLint configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
-
-Each package/example is 100% [TypeScript](https://www.typescriptlang.org/).
-
-### Build
-
-To build all apps and packages, run the following command:
-
-```
-cd esbuild-plugin-react18-css
-pnpm build
+export default defineConfig(options => ({
+    ...
+    esbuildPlugins:[cssPlugin()]
+}));
 ```
 
-### Develop
+## use with esbuild
 
-To develop all apps and packages, run the following command:
+```ts
+import cssPlugin from "esbuild-plugin-react18-css";
 
+esbuild.build({
+  ...
+  plugins: [cssPlugin()],
+});
 ```
-cd esbuild-plugin-react18-css
-pnpm dev
+
+## 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*/
+  generateScopedName?: string | ((className: string, filename: string, css: string) => string);
+  /** set skipAutoPrefixer to true to disable autoprefixer */
+  skipAutoPrefixer?: boolean;
+  /** global CSS class prefix. @defaultValue "" */
+  globalPrefix?: string;
+}
 ```
 
-## Useful Links
+### generateScopedName
+
+It can be a string like `[name]__[local]___[hash:base64:5]` or `[name]__[local]` or `my-prefix__[name]__[local]`
 
-Learn more about the power of Turborepo:
+The functions arguments are as follows.
 
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+- 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)
 
-![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image")
+![Repo Stats](https://repobeats.axiom.co/api/embed/b9f60aadc635649d8a66039094bcb26b5ccea1c1.svg "Repobeats analytics image")
 
 ## License
 

lib/esbuild-plugin-react18-css/package.json

@@ -3,7 +3,7 @@
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
   "version": "0.0.0",
-  "description": "An intuitive React.js fork me ribbon component for promoting open source project forks.",
+  "description": "ESBuild plugin to handle CSS/SCSS modules, autoprefixer, etc.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -53,6 +53,7 @@
     "esbuild-plugin",
     "typescript",
     "javascript",
+    "autoprefixer",
     "css-module",
     "postcss",
     "esbuild",

lib/esbuild-plugin-react18-css/src/index.ts

@@ -8,9 +8,9 @@ import { compile } from "sass";
 
 const uuid = () => (Date.now() * Math.random()).toString(36).slice(0, 8);
 
-interface CSSModulePluginOptions {
-  /** by default name is generated without hash */
-  generateScopedName?: string | ((name: string, filename: string, css: string) => string);
+interface CSSPluginOptions {
+  /** by default name is generated without hash so that it is easier and reliable for library users to override some CSS */
+  generateScopedName?: string | ((className: string, filename: string, css: string) => string);
   /** set skipAutoPrefixer to true to disable autoprefixer */
   skipAutoPrefixer?: boolean;
   /** global CSS class prefix. @defaultValue "" */
@@ -47,7 +47,7 @@ function generateCombinedCSS(result: BuildResult) {
     });
 }
 
-function applyAutoPrefixer(build: PluginBuild, options: CSSModulePluginOptions, write?: boolean) {
+function applyAutoPrefixer(build: PluginBuild, options: CSSPluginOptions, write?: boolean) {
   build.onEnd(async result => {
     if (!options.skipAutoPrefixer) {
       for (const f of result.outputFiles?.filter(f => f.path.match(/\.css$/)) || []) {
@@ -75,7 +75,7 @@ function handleScss(build: PluginBuild) {
   }));
 }
 
-function handleModules(build: PluginBuild, { generateScopedName }: CSSModulePluginOptions) {
+function handleModules(build: PluginBuild, { generateScopedName }: CSSPluginOptions) {
   const namespace = "scss-module";
   const filter = /\.module\.(sc|sa|c)ss/;
   build.onResolve({ filter, namespace: "file" }, args => ({
@@ -121,7 +121,7 @@ function handleModules(build: PluginBuild, { generateScopedName }: CSSModulePlug
   }));
 }
 
-const cssPlugin: (options?: CSSModulePluginOptions) => Plugin = (options = {}) => ({
+const cssPlugin: (options?: CSSPluginOptions) => Plugin = (options = {}) => ({
   name: "esbuild-plugin-react18-css-" + uuid(),
   setup(build): void {
     const write = build.initialOptions.write;