Registry / web-framework / styled-components.macro

styled-components.macro

library1.0.0jsnpmunverified

A babel-plugin-macros macro for styled-components that enables using styled-components without explicit Babel configuration. Version 1.0.0 is the current stable release. This macro integrates styled-components with create-react-app and other zero-config setups by leveraging babel-plugin-macros. It transforms styled-components at compile time, providing features like minified CSS class names and server-side rendering support. Unlike the traditional styled-components Babel plugin, this macro works automatically in environments where babel-plugin-macros is already configured, such as CRA, without additional Babel plugin setup.

web-framework

npm install styled-components.macro

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · STYLED-COMPONENTS.

styled-components.macro

web-frameworkjavascriptv1.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.

styled

✓ import styled from 'styled-components.macro'

✗ import styled from 'styled-components'

Direct import from 'styled-components' bypasses the macro; use 'styled-components.macro' to enable compile-time transformations.

css

✓ import { css } from 'styled-components.macro'

✗ import { css } from 'styled-components'

Must import css from 'styled-components.macro' for macro processing.

ThemeProvider

✓ import { ThemeProvider } from 'styled-components'

✗ import { ThemeProvider } from 'styled-components.macro'

ThemeProvider is not re-exported from the macro; import it directly from 'styled-components'.

Shows how to set up and use styled-components.macro with a Babel macro configuration file.

// Install: npm install styled-components && npm install --save-dev styled-components.macro babel-plugin-macros // .babelrc (if not using CRA) { "plugins": ["macros"] } // App.js import styled from 'styled-components.macro'; import { css } from 'styled-components.macro'; const Button = styled.button` background: purple; color: white; padding: 10px 20px; border: none; border-radius: 4px; ${props => props.primary && css` background: blue; `} `; function App() { return <Button primary>Click me</Button>; } export default App;

Debug

Known issues

gotchaImporting from 'styled-components' instead of 'styled-components.macro' will bypass the macro and lose compile-time features like minified class names.

fix

Always import styled and css from 'styled-components.macro', not 'styled-components'.

affects: >=1.0.0

gotchababel-plugin-macros must be installed and configured. In non-CRA projects, forgetting to add the 'macros' plugin to Babel config will cause the macro to not run.

fix

Install babel-plugin-macros and add 'macros' to your Babel plugins list in .babelrc or equivalent.

affects: >=1.0.0

deprecatedThis package is effectively deprecated in favor of using styled-components' built-in Babel plugin with babel-plugin-macros or direct configuration.

fix

Consider using styled-components directly with babel-plugin-styled-components or rely on CRA's native support for styled-components.

affects: >=1.0.0

gotchaThe macro does not re-export all styled-components utilities like ThemeProvider, createGlobalStyle, or keyframes; importing these from the macro will result in undefined.

fix

Import ThemeProvider, createGlobalStyle, and keyframes directly from 'styled-components' instead of 'styled-components.macro'.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'styled-components.macro'

The package is not installed or is missing from node_modules.

fix

Run 'npm install --save-dev styled-components.macro' or 'yarn add styled-components.macro --dev'.

Uncaught ReferenceError: styled is not defined

styled is imported from the wrong path or babel-plugin-macros is not configured.

fix

Ensure import is 'styled from 'styled-components.macro'' and that babel-plugin-macros is set up (see .babelrc).

babel-plugin-macros: Macro 'styled-components.macro' not found

The macro package is not installed or babel-plugin-macros cannot locate it.

fix

Install the package and verify its name in node_modules. Ensure it's a devDependency.

You need to install babel-plugin-styled-components or configure styled-components.macro correctly.

The macro depends on babel-plugin-styled-components which may not be present or incompatible.

fix

Ensure styled-components version >=2 and babel-plugin-styled-components is installed if needed.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

styled-componentsrequiredCore peer dependency; this macro transforms styled-components usage.

babel-plugin-macrosrequiredRequired for macro functionality; unless using CRA which includes it automatically.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/lucleray/styled-components.macro ↗

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

homepagehttps://styled-components.com ↗