postcss.config.js

/* 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(),
    ],
};