heft-styled-components-plugin

0.2.1 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Cannot find module 'heft-styled-components-plugin' ↓

cause Plugin not installed or missing from package.json

fix

Run 'npm install heft-styled-components-plugin --save-dev'

error Plugin heft-styled-components-plugin not found ↓

cause Heft cannot locate the plugin in node_modules

fix

Ensure the package is installed and listed in devDependencies

error Cannot find module '@rushstack/heft' ↓

cause Missing peer dependency @rushstack/heft

fix

Run 'npm install @rushstack/heft --save-dev'

Warnings

breaking Requires Heft >=0.66.3 ↓

fix Update @rushstack/heft to ^0.66.3

breaking Requires styled-components >=5.3.11 ↓

fix Install styled-components@^5.3.11

gotcha Plugin is not imported; it's registered in Heft configuration ↓

fix Use JSON config, not import

deprecated No active development; use with caution ↓

fix Consider alternative Babel integration

Install

npm install heft-styled-components-plugin

yarn add heft-styled-components-plugin

pnpm add heft-styled-components-plugin

Imports

heft-styled-components-plugin

wrong

import { heft-styled-components-plugin } from 'heft-styled-components-plugin'

correct

none (Heft plugin, not directly imported)

This is a Heft plugin registered in heft.json, not imported in source code.

Plugin
wrong
```
const Plugin = require('heft-styled-components-plugin')
```
correct
```
none
```
Do not require or import the package; it is loaded by Heft's plugin system.

Quickstart

Configures the heft-styled-components-plugin in a Heft project's heft.json to transpile styled-components after TypeScript compilation.

// In config/heft.json
{
  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft.schema.json",
  "plugins": [
    {
      "plugin": "heft-styled-components-plugin",
      "options": {}
    }
  ]
}

// In heft.json (phase definition)
{
  "plugins": [
    {
      "plugin": "heft-styled-components-plugin",
      "options": {}
    }
  ]
}