Registry / web-framework / esbuild-plugin-styled-components

esbuild-plugin-styled-components

library3.0.1jsnpmunverified

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.

web-framework devops

npm install esbuild-plugin-styled-components

github ↗package ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-STY

esbuild-plugin-styled-components

web-frameworkjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import styledComponentsPlugin from 'esbuild-plugin-styled-components'

✗ import { styledComponentsPlugin } from 'esbuild-plugin-styled-components'

The module exports a single default export, not a named export.

default (CommonJS)

✓ const styledComponentsPlugin = require('esbuild-plugin-styled-components')

✗ const { styledComponentsPlugin } = require('esbuild-plugin-styled-components')

CommonJS require returns the plugin function as the default export.

PluginOptions (TypeScript)

✓ import type { PluginOptions } from 'esbuild-plugin-styled-components'

✗ import { PluginOptions } from 'esbuild-plugin-styled-components'

PluginOptions is exported as a type; use type import for proper tree-shaking in TypeScript.

Bundles a TypeScript entry point with esbuild and styled-components transformation for SSR, display names, file names, and minification.

import esbuild from 'esbuild'; import styledComponentsPlugin from 'esbuild-plugin-styled-components'; await esbuild.build({ entryPoints: ['src/index.ts'], bundle: true, outfile: 'dist/bundle.js', plugins: [ styledComponentsPlugin({ ssr: true, displayName: true, fileName: true, minify: true, }), ], });

Debug

Known issues

breakingv3.0.0 changed from CommonJS to ESM-only. require() will fail in older Node versions.

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;

affects: >=3.0.0

deprecatedThe 'pure' option is deprecated and may be removed in a future version.

fix

Avoid using 'pure' option; it is no longer recommended.

affects: >=1.0.0

gotchaThe plugin does not work with 'sass' or 'less' CSS preprocessing unless the styled-components syntax is already valid CSS.

fix

Ensure styled-components template literals are valid CSS after preprocessing; use separate build steps if needed.

affects: all

gotchaIf the 'filter' option is not set, the plugin processes all files, which may slow down builds.

fix

Set the filter option to '\.[tj]sx?$' to only process JavaScript/TypeScript files.

affects: all

deprecatedThe 'meaninglessFileNames' option is deprecated; use 'filename' or custom logic instead.

fix

Remove the option from your plugin configuration.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot find module 'esbuild-plugin-styled-components'

Package not installed or incorrect import path.

fix

Run 'npm install -D esbuild-plugin-styled-components' and ensure import path is correct.

styledComponentsPlugin is not a function

Named import used instead of default import.

fix

Use default import: import styledComponentsPlugin from 'esbuild-plugin-styled-components'.

Error: The 'pure' option is deprecated.

Using the deprecated 'pure' option.

fix

Remove the 'pure' option from your plugin configuration.

TypeError: Cannot read properties of undefined (reading 'default')

CommonJS require() returns an object with default property when using ESM-only package.

fix

Use dynamic import: const plugin = (await import('esbuild-plugin-styled-components')).default;

Error: Component selectors can't end with space when using fileName: true?

Styled-components file name tracking may cause selector issues in rare cases.

fix

Disable fileName: true or use a custom namespace to avoid conflicts.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

styled-componentsrequiredpeer dependency; this plugin transforms styled-components code at build time

esbuildrequiredpeer dependency; the plugin is an esbuild plugin

Agent activity

5 hits · last 30 days

node

Resources

githubhttps://github.com/appzic/esbuild-plugin-styled-components ↗

packagehttps://www.npmjs.com/package/esbuild-plugin-styled-components ↗