Skip to content

Instantly share code, notes, and snippets.

@dkrnl
Created January 24, 2018 14:23
Show Gist options
  • Save dkrnl/62faff3a2afd5b5ac5452058337fc19b to your computer and use it in GitHub Desktop.
Save dkrnl/62faff3a2afd5b5ac5452058337fc19b to your computer and use it in GitHub Desktop.
/* eslint global-require: "off" */
const fs = require('fs');
const path = require('path');
const postcss = require('postcss');
const { URLSearchParams } = require('url');
const DEBUG = ('DEBUG' in process.env && parseInt(process.env.DEBUG, 10) > 0);
const PROD = ('NODE_ENV' in process.env && process.env.NODE_ENV === 'production') || process.argv.indexOf('-p') !== -1;
const { browserslist: BROWSERS } = require('./package.json');
const INLINE_FILES = ['png', 'jpeg', 'jpg', 'gif', 'svg'];
const INLINE_LIMIT = 32 * 1024 * 10;
let inlineTotalSize = 0;
const postcssBeforeParse = postcss.plugin('before-parse', () => () => {
inlineTotalSize = 0;
});
const postcssAfterParse = postcss.plugin('after-parse', () => () => {
inlineTotalSize = 0;
});
module.exports = {
plugins: [
postcssBeforeParse(),
require('postcss-devtools')({ precise: true }),
require('postcss-input-style')(),
require('postcss-quantity-queries')(),
require('postcss-responsive-type')(),
...(PROD || DEBUG ? [
require('pixrem')(),
require('postcss-focus')(),
require('pleeease-filters')(),
require('postcss-image-set-polyfill')(),
require('postcss-url')({
filter(asset) {
if (/[&?]inline=/.test(asset.search)) return false;
const format = path.extname(asset.pathname).substr(1);
return INLINE_FILES.includes(format.toLowerCase());
},
url(asset) {
const stat = fs.statSync(asset.absolutePath);
const params = new URLSearchParams(asset.search);
const format = params.get('format') || path.extname(asset.pathname).substr(1);
if (INLINE_FILES.includes(format.toLowerCase()) && (inlineTotalSize + stat.size) < INLINE_LIMIT) {
params.set('inline', 'inline');
inlineTotalSize += stat.size;
}
return `${asset.pathname}?${params.toString()}`;
},
}),
require('postcss-font-magician')({ display: 'swap', foundries: '' }),
require('postcss-color-rgba-fallback')(),
require('postcss-flexbugs-fixes')(),
require('postcss-will-change')(),
require('css-mqpacker')(),
require('autoprefixer')({ browsers: BROWSERS }), // this always last
] : []),
require('postcss-browser-reporter')(),
require('postcss-reporter')(), // this always last
postcssAfterParse(),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment