@wjunt/webpack-config/lib/presets/css.js

Presets of webpack config

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const node_logger_1 = require("@wjunt/node-logger");
const fs = require("fs");
const lodash_1 = require("lodash");
const path = require("path");
const utils_1 = require("../common/utils");
const common_1 = require("./common");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
/**
 * Support importing CSS.
 * @example
 * // Use default options.
 * module.exports = merge({
 *     css(),
 *     { ...others },
 * });
 * @example
 * // Use less-loader.
 * module.exports = merge({
 *     css({
 *         test: /\.(less|css)$/,
 *         'use.append': ['less-loader'],
 *     }),
 *     { ...others },
 * });
 */
function css(_a = {}) {
    var { modules, esModule, px2rem } = _a, rule = __rest(_a, ["modules", "esModule", "px2rem"]);
    const loaders = [];
    const plugins = [];
    if (utils_1.isDevelopment()) {
        loaders.push((data) => {
            if (/\.vue$/.test(data.resource)) {
                return 'vue-style-loader';
            }
            if (data.resourceQuery) {
                const params = new URLSearchParams(data.resourceQuery);
                if (params.has('vue') && params.get('type') === 'style') {
                    return 'vue-style-loader';
                }
            }
            return {
                loader: 'style-loader',
                options: {
                    esModule,
                },
            };
        });
    }
    else {
        loaders.push({
            loader: MiniCssExtractPlugin.loader,
            options: {
                esModule,
            },
        });
        plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }));
        plugins.push(new OptimizeCssAssetsPlugin({
            cssProcessorPluginOptions: {
                preset: ['advanced', {
                        safe: true,
                        autoprefixer: {
                            overrideBrowserslist: 'last 2 versions, > 0.5%, iOS >= 9',
                            add: true,
                            remove: false,
                        },
                        mergeIdents: false,
                        reduceIdents: false,
                        normalizeUrl: false,
                        reduceTransforms: false,
                        zindex: false,
                    }],
            },
        }));
    }
    const options = Object.assign(Object.assign({}, rule.options), { esModule });
    if (modules) {
        if (modules === true) {
            options.modules = {
                localIdentName: utils_1.isDevelopment() ? '[path][name]__[local]' : '[hash:base64:5]',
            };
        }
    }
    if (rule.cacheable !== false) {
        loaders.push(common_1.getCacheLoader(Object.assign({ cacheIdentifier: `cache-loader:css-loader ${process.env.NODE_ENV} ${JSON.stringify(options)}` }, rule.cacheable && {})));
    }
    loaders.push({
        loader: 'css-loader',
        options,
    });
    if (typeof px2rem === 'undefined') {
        try {
            const packageConfig = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'));
            if (/^(inner-|pc-)/.test(packageConfig.name)) {
                node_logger_1.default.getLogger('fwc').debug('App project on PC disables `px2rem` by default.');
                px2rem = false;
            }
        }
        catch (e) {
        }
    }
    if (px2rem !== false) {
        loaders.push({
            loader: 'px2rem-loader',
            options: lodash_1.defaults(px2rem === true ? {} : px2rem, {
                remUnit: 100,
            }),
        });
    }
    return {
        module: {
            rules: [
                common_1.combineRule(rule, {
                    test: /\.css$/,
                    use: loaders,
                }),
            ],
        },
        plugins,
    };
}
exports.css = css;