{"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,"search_vec":"'1.0.0':23 'addit':99 'alreadi':93 'app':39 'automat':84 'babel':4,20,49,79,89,100,105 'babel-plugin-macro':3,48,88,104 'class':65 'compil':58 'compon':11,17,34,56,78 'config':44 'configur':21,94 'cra':97 'creat':37 'create-react-app':36 'css':64 'current':26 'enabl':13 'environ':86 'explicit':19 'featur':61 'integr':31 'javascript':103 'leverag':47 'like':62 'macro':6,7,30,51,82,91,107 'minifi':63 'name':66 'plugin':5,50,80,90,101,106 'provid':60 'react':38 'releas':28 'render':71 'server':69 'server-sid':68 'setup':45,102 'side':70 'stabl':27 'style':10,16,33,55,77 'styled-compon':9,15,32,54,76 'styled-components.macro':1 'support':72 'time':59 'tradit':75 'transform':53 'unlik':73 'use':14 'version':22 'without':18,98 'work':83 'zero':43 'zero-config':42","created_at":"2026-04-25T11:23:52.444521+00:00","updated_at":"2026-04-25T11:23:52.444521+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://styled-components.com","github":"https://github.com/lucleray/styled-components.macro","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/styled-components.macro","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}