# postcss-compose

> A postcss plugin that implements a @compose feature.

Latest version **1.1.0** (published 2019-06-25) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install postcss-compose
pnpm add postcss-compose
yarn add postcss-compose
bun add postcss-compose
```

## 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.1.0 |
| Published | 2019-06-25 |
| First published | 2019-06-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Nathan Goings |
| Maintainers | binaryspike |

## Links

- npm: https://www.npmjs.com/package/postcss-compose
- Repository: https://github.com/binaryspike/postcss-compose
- Homepage: https://github.com/binaryspike/postcss-compose#readme
- Issues: https://github.com/binaryspike/postcss-compose/issues
- npm.io page: https://npm.io/package/postcss-compose

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^7.0.17
- [object-path](https://npm.io/package/object-path.md) ^0.11.4

## Recent versions

- 1.1.0 (latest) — 2019-06-25
- 1.0.4 — 2019-06-25
- 1.0.3 — 2019-06-19
- 1.0.2 — 2019-06-19
- 1.0.1 — 2019-06-19
- 1.0.0 — 2019-06-19

## README

# postcss-compose

[PostCSS](https://github.com/postcss/postcss) plugin enabling component composing using `@compose`

## Install
```js
npm install --save-dev postcss-compose
yarn add --dev postcss-compose
```

## Usage (with Tailwind support featured)
```js
var data = {
    styles: {
        red: {default: '#FF0000', hover: 'darkred' },
        blue: {default: 'blue', hover: '#0000AA' },
    }
}

module.exports = {
    plugins: [
        require('../postcss-compose/index.js')(data, true),
        require('tailwindcss'),
    ]
}
```

### Before
```css
@compose style in styles, {
    .bg-$(style) {
        color: $(style.default);
        @apply bg-$(style)-700;
    }
    .bg-$(style):hover {
        color: $(style.hover);
    }
}
```

### After
```css
.bg-red {
  color: #FF0000;
  background-color: #c53030; /* from @apply bg-red-700 */
}

.bg-red:hover {
  color: darkred;
}

.bg-blue {
  color: blue;
  background-color: #2b6cb0; /* from @apply bg-blue-700 */
}

.bg-blue:hover {
  color: #0000AA;
}
```

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