https://github.com/meomix/postcss-inline-trait
https://github.com/meomix/postcss-inline-trait
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/meomix/postcss-inline-trait
- Owner: MeoMix
- License: mit
- Created: 2016-02-19T07:08:25.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-05-07T11:43:08.000Z (about 9 years ago)
- Last Synced: 2025-04-06T13:11:23.920Z (about 1 year ago)
- Language: JavaScript
- Size: 22.5 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Inline Trait [![Build Status][ci-img]][ci]
[PostCSS] plugin which allows for inline declaration of CSS properties whose values will be imported from a traits directory..
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/MeoMix/postcss-inline-trait.svg
[ci]: https://travis-ci.org/MeoMix/postcss-inline-trait
Converts:
```css
.foo {
/* .css file-ending is optional */
/* path is assumed to be ./common/css/traits/fancy.trait */
trait: superFancy from 'fancy.trait';
}
/* fancy.css */
.superFancy {
background-color: 'pink';
}
```
into:
```css
.foo {
background-color: 'pink';
}
```
## Usage
```js
var inlineTrait = require('postcss-inline-trait');
postcss([inlineTrait({
getFileText: function(path){
// return environment-specific means of retrieving text at path such as Node's fs.readFile or SystemJS fetch
// e.g:
return System.normalize(path).then(System.import.bind(System));
}
})])
```
See [PostCSS] docs for examples for your environment.