Registry / type-stubs / typescript-plugin-styled-components

typescript-plugin-styled-components

JSON →
library3.0.0jsnpmunverified

This package, `typescript-plugin-styled-components`, serves as a TypeScript transformer designed to enhance the development and debugging experience when working with `styled-components`. It achieves this by providing compile-time information, specifically the names of created styled components, to the runtime. This functionality is crucial for tools like style linting, inspecting components in development tools, and server-side rendering hydration. The current stable version is 3.0.0, which requires TypeScript 4.8+ or 5.0+. The release cadence is generally tied to significant TypeScript version updates. It's a key differentiator for projects that transpile TypeScript code directly using `tsc`, `ts-loader`, or `awesome-typescript-loader`, as opposed to those using Babel for TypeScript transformation, which should instead use `babel-plugin-styled-components`.

type-stubs
npm install typescript-plugin-styled-components
github ↗package ↗
INSTALL
IMPORT
SIG · TYPESCRIPT-PLUGIN-
T
typescript-plugin-styled-components
type-stubsjavascriptv3.0.0
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–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

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

createStyledComponentsTransformer
✓ import createStyledComponentsTransformer from 'typescript-plugin-styled-components';
✗ import { createStyledComponentsTransformer } from 'typescript-plugin-styled-components';
The primary API is a default export, typically used in build configuration files.
createStyledComponentsTransformer
✓ const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default;
✗ const createStyledComponentsTransformer = require('typescript-plugin-styled-components');
For CommonJS, access the default export via the `.default` property.

Demonstrates how to integrate `typescript-plugin-styled-components` into a Webpack configuration using `awesome-typescript-loader` to enable compile-time styled component name generation.

const createStyledComponentsTransformer = require('typescript-plugin-styled-components').default; const path = require('path'); // Create a transformer; the factory additionally accepts an options object. // Example options: { ssr: true, displayName: true, componentIdPrefix: 'sc' } const styledComponentsTransformer = createStyledComponentsTransformer(); module.exports = { mode: 'development', // or 'production' entry: './src/index.ts', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader', // or 'ts-loader' options: { // Other loader options like `configFileName` getCustomTransformers: () => ({ before: [styledComponentsTransformer] }), // Important note: If using awesome-typescript-loader in forked process mode, // this setup might require a different configuration approach documented // on the plugin's GitHub page under 'Forked process configuration'. } } ] }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] } };
Debug
Known issues
breakingVersion 3.0.0 introduces a breaking change, requiring TypeScript 4.8+ or 5.0+. Projects on older TypeScript versions will encounter compilation errors.
fix
Upgrade your project's TypeScript dependency to version 4.8, 5.0, or higher. Alternatively, for older TypeScript versions, pin the plugin to `typescript-plugin-styled-components@^2.0.0`.
affects: >=3.0.0
breakingVersion 2.0.0 upgraded its internal TypeScript API usage to align with TypeScript 4+, making it incompatible with TypeScript versions prior to 4.0.
fix
Upgrade your project's TypeScript dependency to version 4.0 or higher. If unable to upgrade TypeScript, use `typescript-plugin-styled-components@^1.x.x`.
affects: >=2.0.0 <3.0.0
gotchaThis plugin is designed for projects transpiling TypeScript with `tsc` or loaders like `ts-loader` and `awesome-typescript-loader`. If your project uses Babel (specifically `babel-plugin-transform-typescript`) for TypeScript transpilation, this plugin will not function; you should instead use `babel-plugin-styled-components`.
fix
Verify your transpilation setup. If Babel is used, switch to `babel-plugin-styled-components`. If using TypeScript's own compiler or loaders, proceed with this plugin.
affects: *
deprecatedThe `.extend` transformation pattern for styled-components was removed in version 1.5.0. Using this deprecated pattern will no longer be transformed correctly by the plugin.
fix
Update your `styled-components` code to use modern composition patterns, such as `styled(Component)` or object spreading for props.
affects: >=1.5.0
gotchaWhen `awesome-typescript-loader` operates in development mode with forked processes, the standard method of configuring `getCustomTransformers` (passing a function) does not work due to limitations in function serialization between processes.
fix
Refer to the 'Forked process configuration' section in the `typescript-plugin-styled-components` documentation for `awesome-typescript-loader` to implement the correct setup.
affects: *
Errors
Common errors & fixes
TypeError: customTransformers.before is not iterable
The `getCustomTransformers` function in your webpack loader configuration is returning an object that either lacks a `before` property or its value is not an array.
fix
Ensure your `getCustomTransformers` function returns an object in the format `{ before: [styledComponentsTransformer] }`.
Error: Cannot read properties of undefined (reading 'default')
Attempting to access the `default` export incorrectly in a CommonJS environment, or destructuring a module that primarily exports a default.
fix
For CommonJS, use `require('typescript-plugin-styled-components').default`. For ESM, use `import createStyledComponentsTransformer from 'typescript-plugin-styled-components'`.
TSxxxx: [Related to AST transformation or compiler API]
Mismatch between the installed `typescript` version and the version required by `typescript-plugin-styled-components`, leading to incompatible TypeScript AST or API usage.
fix
Check the plugin's peer dependencies and your installed TypeScript version. Upgrade TypeScript to meet the plugin's requirements (e.g., TS 4.8+/5.0+ for plugin v3.0.0).
awesome-typescript-loader: functions are not transferrable between processes in forked mode.
You are using `awesome-typescript-loader` in a forked process setup, which prevents passing functions like `getCustomTransformers` directly.
fix
Follow the 'Forked process configuration' instructions in the plugin's documentation for `awesome-typescript-loader`.
Upgrade
Version history
3.0.0latest on npm
Audit
Dependencies
typescriptrequiredRequired peer dependency for TypeScript compilation and API interaction.
styled-componentsrequiredThis plugin enhances the usage of styled-components.
Agent activity
32 hits · last 30 days
node
28
Amazon
1
OpenAI (training)
1
Resources
githubhttps://github.com/Igorbek/typescript-plugin-styled-components ↗
packagehttps://www.npmjs.com/package/typescript-plugin-styled-components ↗
typescript-plugin-styled-components — npm install typescript-plugin-styled-components · libregistry