https://github.com/madlittlemods/postcss-raw
Protect nodes inside @raw at-rules from being touched by other plugins.
https://github.com/madlittlemods/postcss-raw
Last synced: 2 months ago
JSON representation
Protect nodes inside @raw at-rules from being touched by other plugins.
- Host: GitHub
- URL: https://github.com/madlittlemods/postcss-raw
- Owner: MadLittleMods
- Created: 2015-11-01T22:56:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-11-02T01:22:19.000Z (over 9 years ago)
- Last Synced: 2025-02-12T22:18:15.055Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 441 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/postcss-raw) [](https://travis-ci.org/MadLittleMods/postcss-raw)
# PostCSS Raw
[PostCSS](https://github.com/postcss/postcss) plugin to output nodes inside the `@raw` at-rule, untouched by other plugins in the plugin stack.
### [Changelog](https://github.com/MadLittleMods/postcss-raw/blob/master/CHANGELOG.md)
### Install
`npm install postcss-raw --save-dev`
# Usage
`postcss-raw` is a two-part process. First we inspect(`require('postcss-raw').inspect()`) and record any child nodes in the `@raw` at-rule and remove them from the AST tree. This way other plugins can't touch what was inside. Then when you run the write(`require('postcss-raw').write()`), we put those child nodes back in place without the wrapping `@raw` at-rule.
## Basic Example
```js
var postcss = require('postcss');
var raw = require('postcss-raw');
// ES6 modules:
//import { inspect as rawInspect, write as rawWrite } from 'postcss-raw';
var fs = require('fs');
var mycss = fs.readFileSync('input.css', 'utf8');
// Process your CSS with postcss-reverse-media
var output = postcss([
raw.inspect(/*options*/),
// other plugins...
raw.write(/*options*/)
])
.process(mycss)
.css;
console.log(output);
```
Input:
```css
@raw {
@import "variables";
$foo: #f00;
}
```
Output:
```css
@import "variables";
$foo: #f00;
```
# Options
- `atRuleKeyword`: string - The media query name keyword that applies the plugin.
- Default: `'raw'`
# Testing
`npm test`