# styled-component

> Generates styled-component snippets from colors, text styles and layers.

Latest version **2.8.0** (published 2021-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-component
pnpm add styled-component
yarn add styled-component
bun add styled-component
```

## 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 | 2.8.0 |
| Published | 2021-03-07 |
| First published | 2021-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 620.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | Mortz Gruber |
| Maintainers | m.gruber |

## Links

- npm: https://www.npmjs.com/package/styled-component
- Repository: https://github.com/zeplin/stylesheet-extensions
- npm.io page: https://npm.io/package/styled-component

## Dependencies (2)

- [zem](https://npm.io/package/zem.md) ^1.3.0
- [zeplin-extension-style-kit](https://npm.io/package/zeplin-extension-style-kit.md) ^3.1.0

## Recent versions

- 2.8.0 (latest) — 2021-03-07
- 2.7.0 — 2021-03-07

## README

# Zeplin SCSS Extension

Generates SCSS snippets from colors, text styles and layers. ⚛️📱

## Output
Sample colors output:
```scss
$red: #ff0000;
$green: #00ff00;
$blue: #0000ff;
$yellow: #ffff00;
$black: #000000;
$black50: rgba(0, 0, 0, 0.5);
$white: #ffffff;
```

Sample text style output:
```scss
@mixin Sample-text-style-with-color {
  font-family: SFProText;
  font-size: 20px;
  text-align: left;
  color: $red;
}

@mixin Sample-text-style {
  font-family: SFProText;
  font-size: 20px;
  text-align: left;
}
```

Sample layer output:
```scss
.Layer-with-shadow {
  width: 100px;
  height: 100px;
  box-shadow: 0 2px 4px 6px $black50;
}
```

## Options

#### Color format

Supports HEX, RGB or HSL. Sample colors output as HSL:
```scss
$blue: hsl(240, 100%, 50%)
$black50: hsla(0, 0%, 0%, 0.5)
```

#### Dimensions

Toggles generating `width` and `height` properties from layers.

#### Unitless line-height

Toggles generating unitless value for `line-height` property.

#### Text styles as mixins

Toggles using project text styles as mixins while generating code for text layers.

Sample output when this options disabled:
```scss
.Text-layer {
  width: 220px;
  height: 24px;
  font-family: SFProText;
  font-size: 20px;
  text-align: left;
  color: $black;
}
```

When enabled:
```scss
.Text-layer {
  width: 220px;
  height: 24px;
  color: $black;
  @include Sample-text-style;
}
```

#### Default values

Toggles always generating default values from layers or text styles, such as `fontWeight` and `fontStyle`.

## Development

SCSS extension is developed using [zem](https://github.com/zeplin/zem), Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.

To learn more about zem, [see documentation](https://github.com/zeplin/zem).

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