# babel-plugin-styled-components-enhancer

> Add custom syntax to `styled-components` template literals You opt-in via the `stld` template literal, so you can use both syntaxes at once

Latest version **1.3.0** (published 2017-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-styled-components-enhancer
pnpm add babel-plugin-styled-components-enhancer
yarn add babel-plugin-styled-components-enhancer
bun add babel-plugin-styled-components-enhancer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2017-10-06 |
| First published | 2017-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | smirea |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-styled-components-enhancer
- npm.io page: https://npm.io/package/babel-plugin-styled-components-enhancer

## Recent versions

- 1.3.0 (latest) — 2017-10-06
- 1.2.1 — 2017-08-10
- 1.2.0 — 2017-08-03
- 1.1.3 — 2017-08-03
- 1.1.2 — 2017-08-03
- 1.1.1 — 2017-08-03
- 1.1.0 — 2017-08-03
- 1.0.0 — 2017-08-02
- 0.2.0 — 2017-08-02
- 0.1.1 — 2017-08-02

## README

## Babel Plugin: Styled Components Enhanced

Add custom syntax to `styled-components` template literals
You opt-in via the `stld` template literal, so you can use both syntaxes at once

**NOTE:** You still need to `import styled from 'styled-components'` even if it's not used in the file (similar to how you'd import React when using JSX)

### Examples:

A more complex example can be run by `node run-example.js` (after installing dev dependencies)

#### Replace all rem number values with a custom imported handler

```js
// source.js

const A = stld.span`
    border: 1px dotted $themeRed;
    background: $themeBlue;
    ${() => css`color: $themeMagenta;`} /* works recursively as well */
`;
```

```js
// configure plugin:

babel.transform({
    plugins: [
        ['styled-components-enhanced', {
            transform: [
                // use theme color: replaces "$themeBlue" --> ${({theme}) => theme.colors.blue}
                {
                    match: [/\$theme([A-Za-z0-9]+)/.source, 'g'],
                    template: '({theme}) => theme.colors.$1',
                },
            ],
        }],
    ],
})
```

Result:

```js
const A = styled.span`
    border: 1px dotted ${({theme}) => theme.colors.Red};
    background: ${({theme}) => theme.colors.Blue};
    ${() => css`color: ${({theme}) => theme.colors.Magenta};`} /* works recursively as well */
`;
```

### Options

 - **[id]** The Identifier to use (Default: `stld`)
 - **[parseRootCss]** By default, only `css` templates withing a `styled` template literal will be evaluated. This option enables parsing `css` templates regardless. (Default: `false`)
 - **transform** (required) An array of transformations
    - **match** RegExp to look for. The result of `.match()` is passed as arguments to **replace** (required)
    - **template** A template string to replace with. Every result from the regexp match above will be passed as values **$0**, **$1** etc
- **[recursive]** Whether to recursively apply the transforms in inner templates (Default: `true`)
- **[recursiveTags]** Which tags to recursively traverse (Default: `['css']`)

---
_Source: https://npm.io/package/babel-plugin-styled-components-enhancer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._