{"id":26137,"library":"r18css","title":"esbuild-plugin-react18-css","description":"An ESBuild plugin for handling CSS and SCSS modules with autoprefixer, BEM-like scoped class names, and full tree-shaking support. Version 0.0.4 is the latest, with active development and frequent releases. Key differentiators: integrates seamlessly with ESBuild and tsup, provides full TypeScript support, offers customizable scoped class name generation, and enables fully tree-shakable CSS for React 18 libraries. It supports CSS modules, SCSS modules, and PostCSS autoprefixer out of the box.","status":"active","version":"0.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/react18-tools/esbuild-plugin-react18-css","tags":["javascript","esbuild-plugin-react18-css","esbuild-plugin","typescript","autoprefixer","css-module","scss-module","sass-module"],"install":[{"cmd":"npm install r18css","lang":"bash","label":"npm"},{"cmd":"yarn add r18css","lang":"bash","label":"yarn"},{"cmd":"pnpm add r18css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for ESBuild plugin integration.","package":"esbuild","optional":false},{"reason":"Internal dependency for autoprefixer and CSS processing.","package":"postcss","optional":false},{"reason":"Used for vendor prefixing unless skipAutoPrefixer is set.","package":"autoprefixer","optional":true}],"imports":[{"note":"ESM-only package. Use default import.","wrong":"const cssPlugin = require('esbuild-plugin-react18-css')","symbol":"default","correct":"import cssPlugin from 'esbuild-plugin-react18-css'"},{"note":"Type-only import for TypeScript.","wrong":"import { CSSPluginOptions } from 'esbuild-plugin-react18-css'","symbol":"CSSPluginOptions","correct":"import type { CSSPluginOptions } from 'esbuild-plugin-react18-css'"},{"note":"The default export is a function; there is no named CSSPlugin export.","wrong":"import { default as cssPlugin } from 'esbuild-plugin-react18-css'","symbol":"CSSPlugin","correct":"import cssPlugin from 'esbuild-plugin-react18-css'"}],"quickstart":{"code":"import cssPlugin from 'esbuild-plugin-react18-css';\nimport esbuild from 'esbuild';\n\nawait esbuild.build({\n  entryPoints: ['src/index.tsx'],\n  bundle: true,\n  outfile: 'dist/bundle.js',\n  plugins: [cssPlugin({\n    generateScopedName: '[name]__[local]___[hash:base64:5]',\n    skipAutoPrefixer: false,\n    globalPrefix: 'myapp',\n  })],\n});\n\n// With tsup:\n// tsup.config.ts\nimport { defineConfig } from 'tsup';\nexport default defineConfig({\n  esbuildPlugins: [cssPlugin()],\n});","lang":"typescript","description":"Shows how to use the plugin with ESBuild and tsup, including options like custom scoped name and global prefix."},"warnings":[{"fix":"Update to v0.0.4 and remove any manual peerDependencies or modules config.","message":"v0.0.1 removed 'modules' and 'peerDependencies' – older configuration may break.","severity":"breaking","affected_versions":"<0.0.1"},{"fix":"Set generateScopedName to include a hash, e.g., '[name]__[local]___[hash:base64:5]'.","message":"The plugin generates class names without hash by default for easier overrides, which may cause conflicts in large projects.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Stay updated with releases.","message":"No known deprecations yet due to early version.","severity":"deprecated","affected_versions":"0.0.x"},{"fix":"Use import syntax or dynamic import().","message":"The package is ESM-only; CommonJS require() will throw an error.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Install autoprefixer as a dependency, or set skipAutoPrefixer: true.","message":"If skipAutoPrefixer is false (default), autoprefixer must be installed separately.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use only in ESBuild-based build chains.","message":"The plugin only works with ESBuild or tools that support ESBuild plugins (e.g., tsup). Not compatible with webpack or Vite without additional wrappers.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Install sass as a devDependency if using SCSS.","message":"SCSS modules require node-sass or sass to be installed in the project, though not listed as a dependency.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to `import cssPlugin from 'esbuild-plugin-react18-css'`","cause":"Using require() on an ESM-only package.","error":"Error: Must use import to load ES Module: esbuild-plugin-react18-css"},{"fix":"Run `npm install autoprefixer` or set `skipAutoPrefixer: true` in options.","cause":"autoprefixer not installed but skipAutoPrefixer is false (default).","error":"Error: Cannot find module 'autoprefixer'"},{"fix":"Use `import cssPlugin from 'esbuild-plugin-react18-css'`","cause":"Using a named import like `import { cssPlugin }` instead of default export.","error":"TypeError: cssPlugin is not a function"},{"fix":"Only use in esbuild or tsup configuration.","cause":"Using plugin outside ESBuild context.","error":"Error: The plugin 'esbuild-plugin-react18-css' is not compatible with this build tool (e.g., Vite)."},{"fix":"Ensure entry points reference .module.css or .module.scss files that are processed by the plugin.","cause":"Missing or misconfigured CSS/SCSS loader in the build chain.","error":"Error: Cannot read properties of undefined (reading 'css')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}