{"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,"search_vec":"'0.66.3':50 '5.3.11':55 'babel':16,19,62 'babel-plugin-styled-compon':18 'build':69 'compil':28 'compon':4,22,34,54 'current':40 'depend':58 'develop':43 'differenti':59 'direct':61 'display':35 'earli':42 'heft':2,7,12,68 'heft-styled-components-plugin':1 'inject':31 'integr':65 'javascript':71 'name':36 'output':14 'peer':57 'phase':29 'pipelin':70 'plugin':5,8,20 'releas':47 'requir':48 'run':24 'rushstack/heft':49 'stabl':46 'style':3,21,33,53 'styled-compon':32,52 'transform':39 'transpil':11 'typescript':13,27 'usag':63 'use':15 'v0.2.1':9","created_at":"2026-04-25T11:21:18.202975+00:00","updated_at":"2026-04-25T11:21:18.202975+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/priceline/design-system","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/heft-styled-components-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"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}}