# postcss-external-vars

**Repository Path**: mirrors_dsblv/postcss-external-vars

## Basic Information

- **Project Name**: postcss-external-vars
- **Description**: PostCSS plugin for injecting external variables to your CSS
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2026-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# postcss-external-vars [![Build Status](https://travis-ci.org/dsblv/postcss-external-vars.svg?branch=master)](https://travis-ci.org/dsblv/postcss-external-vars)

> [PostCSS] plugin for injecting external variables to your CSS.

[PostCSS]: https://github.com/postcss/postcss


```css
/* Input example */
.foo {
  color: $color.primary;
}
```

```css
/* Output example */
.foo {
  color: #bada55;
}
```


## Install

```
$ npm install postcss-external-vars
```


## Usage

```js
const externalVars = require('postcss-external-vars');

const data = {
	color: {
		primary: '#bada55',
		background: '#1337af'
	}
};

const css = '.foo {color: $color.primary}';

// Use stand-alone:
const result = externalVars.process(css, {data}).css;
//=> '.foo {color: #bada55}'

// Or as PostCSS plugin:
const postcss = require('postcss');

const result = postcss([externalVars({data})]).process(css).css;
//=> '.foo {color: #bada55}'
```

Check [PostCSS] docs out for examples in your preferred environment.


## API

### externalVars([opts])

#### opts

##### data

Type: `object`  
*Required*

An `object` of properties to be used within your CSS.

##### prefix

Type: `string`  
Default: `$`

A prefix for variable names. May contain several characters.


### externalVars.tester([opts])

Returns a `function` that will accept `string` to check if it contains any variables and return `boolean`. Useful to filter your css declarations before processing.

[Options](#opts) are the same.


### externalVars.matcher([opts])

Returns a `function` that will accept `string` and return an `array` of all the matched variable names within it.

[Options](#opts) are the same.


## License

MIT © [Dmitriy Sobolev](https://github.com/dsblv)