Skip to content

Instantly share code, notes, and snippets.

@dehuszar
Created February 22, 2016 19:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dehuszar/f4a8dc4209cd4d88b6cb to your computer and use it in GitHub Desktop.
Save dehuszar/f4a8dc4209cd4d88b6cb to your computer and use it in GitHub Desktop.
PostCSS-Reference Node API example
// dependencies
var fs = require("fs");
var postcss = require("postcss");
var atImport = require("postcss-import");
var nested = require("postcss-nested");
var reference = require("postcss-reference");
var file = "style.css";
// css to be processed
var css = fs.readFileSync("./" + file, "utf8");
// process css
postcss()
.use(atImport())
.use(nested())
.use(reference())
.process(css, {
from: "./" + file,
to: file
}).then(function (result) {
fs.writeFileSync(file, result.css);
if ( result.map ) fs.writeFileSync(file + '.map', result.map);
});
{
"name": "postcss-reference-bug-testing",
"version": "1.0.0",
"description": "Fixing ze bugs",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer-core": "^6.0.1",
"bootstrap": "^3.3.6",
"css-mqpacker": "^4.0.0",
"gulp": "^3.9.1",
"gulp-postcss": "^6.1.0",
"postcss-import": "^8.0.2",
"postcss-mixins": "^4.0.0",
"postcss-nested": "^1.0.0",
"postcss-reference": "^1.0.3",
"postcss-simple-vars": "^1.2.0"
}
}
@reference {
@import "node_modules/bootstrap/dist/css/bootstrap.css";
}
.button {
@references .btn, .btn-default;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment