# postcss-theme-variables

> A [postcss](http://postcss.org/) plugin to override variables specified in options. An unobtrusive way to create themes.

Latest version **1.0.0** (published 2017-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-theme-variables
pnpm add postcss-theme-variables
yarn add postcss-theme-variables
bun add postcss-theme-variables
```

## 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.0.0 |
| Published | 2017-09-20 |
| First published | 2017-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Author | Li Chen |
| Maintainers | youzan-lc |

## Links

- npm: https://www.npmjs.com/package/postcss-theme-variables
- npm.io page: https://npm.io/package/postcss-theme-variables

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [postcss](https://npm.io/package/postcss.md) ^6.0.11
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0

## Recent versions

- 1.0.0 (latest) — 2017-09-20

## README

# postcss-theme-variables

A [postcss](http://postcss.org/) plugin to override variables specified in options. An unobtrusive way to create themes.


## Usage

```shell
yarn add postcss postcss-theme-variables --dev

{
  plugins: [require('postcss-theme-variables')(/* options */)]
}

# And in your postcss source files, use variables as you wish.
```

⚠️ Plugin orders are important in postcss, make sure this plugin comes after any `import` related plugins(like `postcss-easy-import`) and before any other plugins(like `precss`).

#### Example Usage with `postcss-easy-import` and `precss`

```js
// PostCSS config
const themeVariables = require('postcss-theme-variables');
const easyImport = require('postcss-easy-import');
const precss = require('precss');

const vars = {
  'padding-size': '10px'
};

postcss([
  easyImport({ prefix: '_' }),
  themeVariables({ vars, prefix: '$' }),

  // Imports are inlined by postcss-easy-import so precss won't see them
  precss()
])
.process(...);
```

```css
/* _colors.css */
$padding-size: 5px;

/* in.css */
@import './_colors.css';

ul li {
  padding: $padding-size;
}
```

```css
/* out.css */

ul li {
  padding: 10px;
}
```

#### Example Usage with `precss`

```js
// PostCSS config
const themeVariables = require('postcss-theme-variables');
const precss = require('precss');

const vars = {
  'padding-size': '10px'
};

postcss([
  themeVariables({ vars, prefix: '$' }),
  precss({
    import: {
      // This is required to process any variables inside dependencies
      plugins: [themeVariables({ vars })]
    }
  })
])
.process(...);
```

```css
/* in.css */
$padding-size: 5px;

ul li {
  padding: $padding-size;
}
```

```css
/* out.css */

ul li {
  padding: 10px;
}
```

## Options

| Option | Type | Description | Default Value | Required |
|------|------|------|--------|--------|
| vars | `Object` | Variables to override | `{}` | No |
| prefix | `string` | Variable prefix, it's `'$'` if you use SCSS. You can omit prefix in vars map. | `''` | No |

## License

MIT license.

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