https://github.com/postcss/postcss-plugin-context
Limit a PostCSS processor to a local stylesheet context.
https://github.com/postcss/postcss-plugin-context
Last synced: 3 months ago
JSON representation
Limit a PostCSS processor to a local stylesheet context.
- Host: GitHub
- URL: https://github.com/postcss/postcss-plugin-context
- Owner: postcss
- License: mit
- Created: 2015-05-01T21:52:10.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-08-27T17:02:45.000Z (over 10 years ago)
- Last Synced: 2024-04-14T02:32:48.842Z (over 1 year ago)
- Language: JavaScript
- Size: 146 KB
- Stars: 35
- Watchers: 9
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# [postcss]-plugin-context [][ci]
> Limit a PostCSS processor to a local stylesheet context.
## Install
With [npm](https://npmjs.org/package/postcss-plugin-context) do:
```
npm install postcss-plugin-context --save
```
## Example
This plugin is useful should you need to contextualize another processor inside
your CSS file. For example, [`postcss-map`] will allow you to specify a short
syntax if only one file is specified. Using this module, we can limit the scope
of the transform to be of our choice, rather than the module's. In this example,
only the first ruleset is actually passed to postcss-map, and the rest of the
CSS file is untouched.
Simply define a `@context` block inside your CSS file, such as:
```css
@context brandColors {
h1 {
color: map(primary);
}
}
```
Then, the plugin will work on the `brandColors` context. The `@context` block is
removed automatically for you after the fact.
```js
var postcss = require('postcss');
var map = require('postcss-map');
var context = require('postcss-plugin-context');
var css = '@context brandColors { h1 { color: map(primary) } } h2 { color: map(primary) }';
console.log(postcss([
context({
brandColors: map({
maps: ['brand.yml']
})
})
]).process(css).css);
// => 'h1 { color: red } h2 { color: map(primary) }'
```
Note that you can pass multiple processors to a single context block:
```css
h1 {
@context brandColors, size {
color: map(primary);
size: 100px;
}
}
```
Outputs:
```css
h1 {
color: red;
width: 100px;
height: 100px;
}
```
Note that a context may also be defined across a whole file; if you specify
`@context` without curly braces. For example:
```css
@context size;
h1 {
size: 100px;
}
```
Outputs:
```css
h1 {
width: 100px;
height: 100px;
}
```
## API
### context(plugins)
#### plugins
Type: `object`
*Required value*.
Pass an object of processors to contextualize.
```js
context({
brandColors: map({maps: ['brand.yml']})
size: require('postcss-size')
});
```
## Contributing
Pull requests are welcome. If you add functionality, then please add unit tests
to cover it.
## License
MIT © [Ben Briggs](http://beneb.info)
[ci]: https://travis-ci.org/postcss/postcss-plugin-context
[postcss]: https://github.com/postcss/postcss
[`postcss-map`]: https://github.com/pascalduez/postcss-map