styled-components.macro

1.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause 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'.

error Uncaught ReferenceError: styled is not defined ↓

cause 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).

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

cause 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.

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

cause 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.

Warnings

gotcha Importing 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'.

gotcha babel-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.

deprecated This 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.

gotcha The 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'.

Install

npm install styled-components.macro

yarn add styled-components.macro

pnpm add styled-components.macro

Imports

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

css

wrong

import { css } from 'styled-components'

correct

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

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

ThemeProvider
wrong
```
import { ThemeProvider } from 'styled-components.macro'
```
correct
```
import { ThemeProvider } from 'styled-components'
```
ThemeProvider is not re-exported from the macro; import it directly from 'styled-components'.

Quickstart

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;