frontend/tools/compile-css.js at world-cup-2018 · devhttps/frontend · GitHub

History

108 lines (91 loc) · 2.91 KB

Raw

100

101

102

103

104

105

106

107

108

// unified CSS creation module. used for prod and dev/watch tasks.

// writes files to `static/target/stylesheets` i.e. has side-effects

// exports a function which takes:

// 1. glob for files in static/src/stylesheets

// 2. options object offering `remify` (boolean) and `browsers` (browserlist)

const fs = require('fs');

const path = require('path');

const mkdirp = require('mkdirp');

const glob = require('glob');

const pify = require('pify');

const sass = require('node-sass');

const postcss = require('postcss');

const autoprefixer = require('autoprefixer');

const pxtorem = require('postcss-pxtorem');

const sassRenderP = pify(sass.render);

const writeFileP = pify(fs.writeFile);

const { src, target } = require('./__tasks__/config').paths;

const sassDir = path.resolve(src, 'stylesheets');

const SASS_SETTINGS = {

outputStyle: 'compressed',

sourceMap: true,

precision: 5,

};

const BROWSERS_LIST = [

'Firefox >= 26',

'Explorer >= 10',

'Safari >= 5',

'Chrome >= 36',

'iOS >= 5',

'Android >= 2',

'BlackBerry >= 6',

'ExplorerMobile >= 7',

'> 2% in US',

'> 2% in AU',

'> 2% in GB',

];

const REMIFICATIONS = {

replace: true,

root_value: 16,

unit_precision: 5,

propList: ['*'],

};

const getFiles = sassGlob => glob.sync(path.resolve(sassDir, sassGlob));

module.exports = (

sassGlob,

{ remify = true, browsers = BROWSERS_LIST } = {}

) => {

if (typeof sassGlob !== 'string') {

return Promise.reject(new Error('No glob provided.'));

}

return Promise.all(

getFiles(sassGlob).map(filePath => {

const dest = path.resolve(

target,

'stylesheets',

path.relative(sassDir, filePath).replace('scss', 'css')

);

const sassOptions = Object.assign(

{

file: filePath,

outFile: dest,

sourceMapContents: true,

includePaths: ['node_modules'],

SASS_SETTINGS

);

const postcssPlugins = [autoprefixer({ browsers })];

if (remify) {

postcssPlugins.push(pxtorem(REMIFICATIONS));

}

mkdirp.sync(path.parse(dest).dir);

return sassRenderP(sassOptions)

.then(result =>

postcss(postcssPlugins).process(result.css.toString(), {

from: filePath,

to: dest,

map: {

inline: false,

prev: result.map.toString(),

})

)

.then(result =>

Promise.all([

writeFileP(dest, result.css),

writeFileP(`${dest}.map`, result.map),

])

);

})

);

};

frontend/tools/compile-css.js at world-cup-2018 · devhttps/frontend · GitHub

Expand file tree

Breadcrumbs

compile-css.js

Latest commit

History

Breadcrumbs

compile-css.js

File metadata and controls