{"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,"search_vec":"'3.0.1':27 'activ':33 'babel':43,68 'babel-on':67 'build':64 'bundl':15 'compar':65 'compon':5,13,42,83 'definit':77 'differenti':57 'display':19 'displaynam':51 'esbuild':2,7,46,60,79 'esbuild-plugin-styled-compon':1 'faster':63 'file':23 'filenam':52 'generat':21 'github':36 'includ':58 'integr':61 'javascript':78 'latest':30 'like':49 'maintain':34 'minif':18 'minifi':53 'name':20,24 'nativ':59 'offer':47 'option':48 'plugin':3,8,44,80 'pure':56 'releas':32 'seamless':72 'ssr':17,50 'stabl':31 'style':4,12,41,82 'styled-compon':11,40,81 'support':16,74 'track':25 'transform':10 'transpiletemplateliter':54 'type':76 'typescript':73,84 'version':26 'workflow':70 'wrap':38","created_at":"2026-04-27T16:59:01.716184+00:00","updated_at":"2026-04-27T16:59:01.716184+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/appzic/esbuild-plugin-styled-components","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/esbuild-plugin-styled-components","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}