{"id":25394,"library":"esbuild-plugin-react18-css","title":"esbuild-plugin-react18-css","description":"An ESBuild plugin (v0.0.4) for handling CSS/SCSS modules with autoprefixer, treeshakable CSS, and full TypeScript support. It automatically converts CSS/SCSS modules to BEM-like scoped names without hashes by default for easier library CSS overrides. Unlike similar plugins, it is designed specifically for React 18 server components and supports treeshakable imports (e.g., import from 'esbuild-plugin-react18-css/client/component'). Release cadence is low (4 releases in early 2024); the project is maintained but still in early development (0.x). Requires esbuild as a peer dependency.","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 esbuild-plugin-react18-css","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-react18-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-react18-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin runs as an esbuild plugin.","package":"esbuild","optional":false}],"imports":[{"note":"ESM-only; no default export in CommonJS. The package is ESM-only as of v0.0.1.","wrong":"const cssPlugin = require('esbuild-plugin-react18-css')","symbol":"cssPlugin","correct":"import cssPlugin from 'esbuild-plugin-react18-css'"},{"note":"Use type import for TypeScript types; CSSPluginOptions is a type interface, not a runtime value.","wrong":"import { CSSPluginOptions } from 'esbuild-plugin-react18-css'","symbol":"CSSPluginOptions","correct":"import type { CSSPluginOptions } from 'esbuild-plugin-react18-css'"},{"note":"The package exports a default export, not a named export. Named import will result in 'undefined'.","wrong":"import { cssPlugin } from 'esbuild-plugin-react18-css'","symbol":"cssPlugin (default)","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: 'my-app'\n  })],\n});","lang":"typescript","description":"Shows basic integration of esbuild-plugin-react18-css with esbuild, including plugin options for scoped class names and autoprefixer."},"warnings":[{"fix":"Set generateScopedName to include a hash, e.g., '[name]__[local]___[hash:base64:5]'.","message":"Default generateScopedName does not include hash, which may cause classname collisions in large projects.","severity":"gotcha","affected_versions":"<0.0.4"},{"fix":"Use a separate postcss plugin with autoprefixer for more control.","message":"The skipAutoPrefixer option is deprecated in favor of explicit postcss configuration.","severity":"deprecated","affected_versions":">=0.0.3"},{"fix":"Use import syntax or set up your project for ESM.","message":"Package is ESM-only since v0.0.1; require() will fail.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Use import type { CSSPluginOptions } from 'esbuild-plugin-react18-css'.","message":"Plugin does not import types correctly if using TypeScript without type import.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Filter out node_modules in the plugin's setup function manually.","message":"CSS modules are always processed; no option to skip CSS files from node_modules.","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":"npm install esbuild-plugin-react18-css --save-dev","cause":"Package not installed or ESM/CJS mismatch.","error":"Cannot find module 'esbuild-plugin-react18-css'"},{"fix":"Ensure cssPlugin() is called with an object or no arguments: cssPlugin({}) or cssPlugin().","cause":"Passing undefined or invalid options to cssPlugin.","error":"[esbuild] Error: [plugin: css] Cannot read properties of undefined (reading 'includes')"},{"fix":"Switch to ESM (type: 'module' in package.json) or use dynamic import: await import('esbuild-plugin-react18-css').","cause":"Using require() in CJS project.","error":"TypeError: require() of ES Module /node_modules/esbuild-plugin-react18-css/index.mjs not supported"},{"fix":"Use import type { CSSPluginOptions } from 'esbuild-plugin-react18-css'.","cause":"Trying to import type as value instead of using type-only import.","error":"Module '\"esbuild-plugin-react18-css\"' has no exported member 'CSSPluginOptions'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}