Skip to content

Instantly share code, notes, and snippets.

@soluml

soluml/css.js

Last active April 5, 2016 21:56
Show Gist options
  • Save soluml/666fb95fa2a0723fe2926da4f3f3e066 to your computer and use it in GitHub Desktop.
Save soluml/666fb95fa2a0723fe2926da4f3f3e066 to your computer and use it in GitHub Desktop.
Download ZIP
NPM CSS Build Script
Raw
css.js
var fs = require('fs');
var path = require('path');
var glob = require('glob');
var publicDir = './public';
var nodesass = require('node-sass');
var postcss = require('postcss');
var autoprefixer = require('autoprefixer')({ browsers: ['last 2 versions', 'ie >= 9'] });
var cssnano = require('cssnano')({});
var cssmodules = require('postcss-modules')({
getJSON(cssFileName, json) {
fs.writeFileSync(path.resolve(publicDir, path.basename(cssFileName) +'.json'), JSON.stringify(json));
},
generateScopedName(name, filename, css) {
return myMap.set(name);
}
});
var SweatMap = require('SweatMap');
var myMap = new SweatMap({cssSafe: true});
//Process SCSS Files
glob('src/css/**/*.scss', {}, function(err, files) {
if(err) {
console.log('Could not glob .SCSS files!', err);
return;
}
files.filter(fn => !/^_/.test(path.basename(fn))).map(fn => {
var out = path.resolve(publicDir, path.basename(fn).split('.').slice(0, -1).join('.')),
outCSS = out +'.css',
outMap = out +'.css.map';
var Sass = nodesass.renderSync({
file: path.resolve(fn),
outFile: outCSS,
sourceMap: true,
outputStyle: 'expanded'
});
//Run PostCSS
//cssmodules fails with autoprefixer and cssnano for some reason, run it first
postcss([cssmodules]).process(Sass.css, {
map: { prev: Sass.map.toString() }
}).then(PostCSS => {
postcss([autoprefixer, cssnano]).process(PostCSS.css, {
map: { prev: PostCSS.map }
}).then(PostCSS => {
fs.writeFileSync(outCSS, PostCSS.css);
fs.writeFileSync(outMap, PostCSS.map);
}, err => {
console.log('PostCSS Error:', err);
});
}, err => {
console.log('PostCSS Error:', err);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment