{"id":20579,"library":"styled-components.macro","title":"styled-components.macro","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/lucleray/styled-components.macro","tags":["javascript","babel-plugin-macros"],"install":[{"cmd":"npm install styled-components.macro","lang":"bash","label":"npm"},{"cmd":"yarn add styled-components.macro","lang":"bash","label":"yarn"},{"cmd":"pnpm add styled-components.macro","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core peer dependency; this macro transforms styled-components usage.","package":"styled-components","optional":false},{"reason":"Required for macro functionality; unless using CRA which includes it automatically.","package":"babel-plugin-macros","optional":false}],"imports":[{"note":"Direct import from 'styled-components' bypasses the macro; use 'styled-components.macro' to enable compile-time transformations.","wrong":"import styled from 'styled-components'","symbol":"styled","correct":"import styled from 'styled-components.macro'"},{"note":"Must import css from 'styled-components.macro' for macro processing.","wrong":"import { css } from 'styled-components'","symbol":"css","correct":"import { css } from 'styled-components.macro'"},{"note":"ThemeProvider is not re-exported from the macro; import it directly from 'styled-components'.","wrong":"import { ThemeProvider } from 'styled-components.macro'","symbol":"ThemeProvider","correct":"import { ThemeProvider } from 'styled-components'"}],"quickstart":{"code":"// Install: npm install styled-components && npm install --save-dev styled-components.macro babel-plugin-macros\n\n// .babelrc (if not using CRA)\n{\n  \"plugins\": [\"macros\"]\n}\n\n// App.js\nimport styled from 'styled-components.macro';\nimport { css } from 'styled-components.macro';\n\nconst Button = styled.button`\n  background: purple;\n  color: white;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 4px;\n  ${props => props.primary && css`\n    background: blue;\n  `}\n`;\n\nfunction App() {\n  return <Button primary>Click me</Button>;\n}\n\nexport default App;","lang":"javascript","description":"Shows how to set up and use styled-components.macro with a Babel macro configuration file."},"warnings":[{"fix":"Always import styled and css from 'styled-components.macro', not 'styled-components'.","message":"Importing from 'styled-components' instead of 'styled-components.macro' will bypass the macro and lose compile-time features like minified class names.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install babel-plugin-macros and add 'macros' to your Babel plugins list in .babelrc or equivalent.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using styled-components directly with babel-plugin-styled-components or rely on CRA's native support for styled-components.","message":"This package is effectively deprecated in favor of using styled-components' built-in Babel plugin with babel-plugin-macros or direct configuration.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Import ThemeProvider, createGlobalStyle, and keyframes directly from 'styled-components' instead of 'styled-components.macro'.","message":"The macro does not re-export all styled-components utilities like ThemeProvider, createGlobalStyle, or keyframes; importing these from the macro will result in undefined.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev styled-components.macro' or 'yarn add styled-components.macro --dev'.","cause":"The package is not installed or is missing from node_modules.","error":"Module not found: Can't resolve 'styled-components.macro'"},{"fix":"Ensure import is 'styled from 'styled-components.macro'' and that babel-plugin-macros is set up (see .babelrc).","cause":"styled is imported from the wrong path or babel-plugin-macros is not configured.","error":"Uncaught ReferenceError: styled is not defined"},{"fix":"Install the package and verify its name in node_modules. Ensure it's a devDependency.","cause":"The macro package is not installed or babel-plugin-macros cannot locate it.","error":"babel-plugin-macros: Macro 'styled-components.macro' not found"},{"fix":"Ensure styled-components version >=2 and babel-plugin-styled-components is installed if needed.","cause":"The macro depends on babel-plugin-styled-components which may not be present or incompatible.","error":"You need to install babel-plugin-styled-components or configure styled-components.macro correctly."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}