{"id":21273,"library":"esbuild-plugin-styled-components","title":"esbuild-plugin-styled-components","description":"An esbuild plugin that transforms styled-components during bundling, supporting SSR, minification, display name generation, and file name tracking. Version 3.0.1 is the latest stable release, actively maintained on GitHub. It wraps the styled-components babel plugin for esbuild, offering options like ssr, displayName, fileName, minify, transpileTemplateLiterals, and pure. Differentiators include native esbuild integration for faster builds compared to Babel-only workflows, and seamless TypeScript support with type definitions.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/appzic/esbuild-plugin-styled-components","tags":["javascript","esbuild","plugin","styled-components","typescript"],"install":[{"cmd":"npm install esbuild-plugin-styled-components","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-styled-components","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-styled-components","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; this plugin transforms styled-components code at build time","package":"styled-components","optional":false},{"reason":"peer dependency; the plugin is an esbuild plugin","package":"esbuild","optional":false}],"imports":[{"note":"The module exports a single default export, not a named export.","wrong":"import { styledComponentsPlugin } from 'esbuild-plugin-styled-components'","symbol":"default","correct":"import styledComponentsPlugin from 'esbuild-plugin-styled-components'"},{"note":"CommonJS require returns the plugin function as the default export.","wrong":"const { styledComponentsPlugin } = require('esbuild-plugin-styled-components')","symbol":"default (CommonJS)","correct":"const styledComponentsPlugin = require('esbuild-plugin-styled-components')"},{"note":"PluginOptions is exported as a type; use type import for proper tree-shaking in TypeScript.","wrong":"import { PluginOptions } from 'esbuild-plugin-styled-components'","symbol":"PluginOptions (TypeScript)","correct":"import type { PluginOptions } from 'esbuild-plugin-styled-components'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport styledComponentsPlugin from 'esbuild-plugin-styled-components';\n\nawait esbuild.build({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outfile: 'dist/bundle.js',\n  plugins: [\n    styledComponentsPlugin({\n      ssr: true,\n      displayName: true,\n      fileName: true,\n      minify: true,\n    }),\n  ],\n});","lang":"typescript","description":"Bundles a TypeScript entry point with esbuild and styled-components transformation for SSR, display names, file names, and minification."},"warnings":[{"fix":"Use import syntax or upgrade to Node >=12.22, >=14.17, or >=16.0. For CommonJS, use dynamic import: const plugin = (await import('esbuild-plugin-styled-components')).default;","message":"v3.0.0 changed from CommonJS to ESM-only. require() will fail in older Node versions.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Avoid using 'pure' option; it is no longer recommended.","message":"The 'pure' option is deprecated and may be removed in a future version.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure styled-components template literals are valid CSS after preprocessing; use separate build steps if needed.","message":"The plugin does not work with 'sass' or 'less' CSS preprocessing unless the styled-components syntax is already valid CSS.","severity":"gotcha","affected_versions":"all"},{"fix":"Set the filter option to '\\.[tj]sx?$' to only process JavaScript/TypeScript files.","message":"If the 'filter' option is not set, the plugin processes all files, which may slow down builds.","severity":"gotcha","affected_versions":"all"},{"fix":"Remove the option from your plugin configuration.","message":"The 'meaninglessFileNames' option is deprecated; use 'filename' or custom logic instead.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install -D esbuild-plugin-styled-components' and ensure import path is correct.","cause":"Package not installed or incorrect import path.","error":"Cannot find module 'esbuild-plugin-styled-components'"},{"fix":"Use default import: import styledComponentsPlugin from 'esbuild-plugin-styled-components'.","cause":"Named import used instead of default import.","error":"styledComponentsPlugin is not a function"},{"fix":"Remove the 'pure' option from your plugin configuration.","cause":"Using the deprecated 'pure' option.","error":"Error: The 'pure' option is deprecated."},{"fix":"Use dynamic import: const plugin = (await import('esbuild-plugin-styled-components')).default;","cause":"CommonJS require() returns an object with default property when using ESM-only package.","error":"TypeError: Cannot read properties of undefined (reading 'default')"},{"fix":"Disable fileName: true or use a custom namespace to avoid conflicts.","cause":"Styled-components file name tracking may cause selector issues in rare cases.","error":"Error: Component selectors can't end with space when using fileName: true?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}