{"id":20096,"library":"heft-styled-components-plugin","title":"heft-styled-components-plugin","description":"A Heft plugin (v0.2.1) that transpiles Heft TypeScript output using Babel with babel-plugin-styled-components. It runs after the TypeScript compilation phase to inject styled-components display names and other transforms. Currently in early development with no stable release; requires @rushstack/heft ^0.66.3 and styled-components >=5.3.11 as peer dependencies. Differentiates from direct Babel usage by integrating into the Heft build pipeline.","status":"active","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/priceline/design-system","tags":["javascript"],"install":[{"cmd":"npm install heft-styled-components-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add heft-styled-components-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add heft-styled-components-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; Heft build system integration","package":"@rushstack/heft","optional":false},{"reason":"peer dependency; requires styled-components v5.3.11+","package":"styled-components","optional":false}],"imports":[{"note":"This is a Heft plugin registered in heft.json, not imported in source code.","wrong":"import { heft-styled-components-plugin } from 'heft-styled-components-plugin'","symbol":"heft-styled-components-plugin","correct":"none (Heft plugin, not directly imported)"},{"note":"Do not require or import the package; it is loaded by Heft's plugin system.","wrong":"const Plugin = require('heft-styled-components-plugin')","symbol":"Plugin","correct":"none"}],"quickstart":{"code":"// In config/heft.json\n{\n  \"$schema\": \"https://developer.microsoft.com/json-schemas/heft/v0/heft.schema.json\",\n  \"plugins\": [\n    {\n      \"plugin\": \"heft-styled-components-plugin\",\n      \"options\": {}\n    }\n  ]\n}\n\n// In heft.json (phase definition)\n{\n  \"plugins\": [\n    {\n      \"plugin\": \"heft-styled-components-plugin\",\n      \"options\": {}\n    }\n  ]\n}","lang":"json","description":"Configures the heft-styled-components-plugin in a Heft project's heft.json to transpile styled-components after TypeScript compilation."},"warnings":[{"fix":"Update @rushstack/heft to ^0.66.3","message":"Requires Heft >=0.66.3","severity":"breaking","affected_versions":"<=0.2.0"},{"fix":"Install styled-components@^5.3.11","message":"Requires styled-components >=5.3.11","severity":"breaking","affected_versions":">=0"},{"fix":"Use JSON config, not import","message":"Plugin is not imported; it's registered in Heft configuration","severity":"gotcha","affected_versions":">=0"},{"fix":"Consider alternative Babel integration","message":"No active development; use with caution","severity":"deprecated","affected_versions":">=0.2.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install heft-styled-components-plugin --save-dev'","cause":"Plugin not installed or missing from package.json","error":"Cannot find module 'heft-styled-components-plugin'"},{"fix":"Ensure the package is installed and listed in devDependencies","cause":"Heft cannot locate the plugin in node_modules","error":"Plugin heft-styled-components-plugin not found"},{"fix":"Run 'npm install @rushstack/heft --save-dev'","cause":"Missing peer dependency @rushstack/heft","error":"Cannot find module '@rushstack/heft'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}