postcss([autoprefixer]).process(result.css, { from: src }).then(res => { res.warnings().forEach(warn => { console.warn(warn.toString())
async processCss(assetName, asset, assets) { let css = asset.source(); css = await postcss([autoprefixer({browsers: this.options.browsers})]).process(css).css; const result = csso.minify(css, Object.assign({filename: assetName}, this.options)); css = result.css; if (this.options.sourceMap) { assets.setAsset(`${assetName}.map`, result.map.toString()); css += `/*# sourceMappingURL=${path.basename(assetName)}.map */`; } return css; }
function css(file) { postcss() .process(fs.readFileSync(file, 'utf8')) .then(function(result) { fs.writeFileSync('public/bundle.css', result.css) }) }
async one(absFile) { const relativeFilePath = path.relative(CONFIG.paths.src, absFile); const distFilePath = path .join(CONFIG.paths.dist, relativeFilePath) .replace(/\.scss$/, this.ouputExt) .replace(/\.less$/, this.ouputExt) .replace(/\.sass$/, this.ouputExt) .replace(/\.wxss/, this.ouputExt) .replace(/\.axss/, this.ouputExt) .replace(/\.css$/, this.ouputExt); await fs.ensureFile(distFilePath); const processor = postcss([ CONFIG.isProduction ? cssnano({ preset: "default" }) : undefined ].filter(v=>v)) const result = await processor.process(await fs.readFile(absFile, "utf8"), { from: absFile, to: distFilePath, map: { inline: CONFIG.isProduction ? false : true } }); await fs.writeFile(distFilePath, result.css, "utf8"); }
[ // Test with recent browsers ['last 2 version'], // Test with recent browsers + iOS 8 ['last 2 version', 'iOS >= 8'], // Test with recent browsers by usage, plus iOS 8, no IE. // I discovered that 'not ie' is not allowed. You must set a version. // To disable IE entirely, use 'not ie >= 1' ['last 2 version', 'iOS >= 8', 'not ie >= 1'], // I discovered that disabling IE doesn't disable IE mobile. // To disable IE mobile, I added an extra query. ['last 2 version', 'iOS >= 8', 'not ie >= 1', 'not ie_mob >= 1'], ].forEach(function(query) { var plugin = autoprefixer({ browsers: query }); postcss([ plugin ]).process(css).then(function (result) { result.warnings().forEach(function (warn) { console.warn(warn.toString()); }); console.log(query); console.log(result.css); console.log('\n'); }); });
makeFile(file) { return new Promise((resolve, reject) => { const srcPath = `${this.srcPath}/${file}.css`; const destPath = `${this.buildPath}/${file}.css`; const input = fs.readFileSync(srcPath, 'utf8'); console.log(colors.yellow(` Bundling CSS file: ${srcPath}`)); postcss() //.use(stylelint) .use(cssimport) .use(cssnext) .use(reporter({ clearMessages: true })) .process(input, { from: srcPath, to: destPath, }) .then((result) => { let text = result.css; if (this.isProduction) { text = new CleanCSS().minify(result.css).styles; } fs.writeFileSync(destPath, text); console.log(colors.green(` CSS bundle created: ${destPath}`)); resolve(); }) .catch((e) => { reject(e); }); }); }
async processCss(assetName, asset, assets) { let css = asset.source(); css = await postcss([autoprefixer({browsers: this.options.browsers})]).process(css).css; const result = csso.minify(css, Object.assign({filename: assetName}, this.options)); css = result.css; if (this.options.sourceMap) { assets.setAsset(`${assetName}.map`, result.map.toString()); css += `/*# sourceMappingURL=${path.basename(assetName)}.map */`; } return css; }