ko/lib/webpack/loaders/style.js

build & lint library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const path_1 = require("path");
const mini_css_extract_plugin_1 = require("mini-css-extract-plugin");
const autoprefixer_1 = __importDefault(require("autoprefixer"));
const postCssUrl = require('postcss-url');
const utils_1 = require("../../utils");
class Style {
    constructor(opts) {
        this.STYLE_LOADER = (0, utils_1.getResolvePath)('style-loader');
        this.CSS_LOADER = (0, utils_1.getResolvePath)('css-loader');
        this.SASS_LOADER = (0, utils_1.getResolvePath)('sass-loader');
        this.LESS_LOADER = (0, utils_1.getResolvePath)('less-loader');
        this.POSTCSS_LOADER = (0, utils_1.getResolvePath)('postcss-loader');
        this.CSS_MODULE_FILE_SUFFIX_REGEX = /\.module.s[ac]ss$/;
        this.opts = opts;
    }
    get config() {
        const enableCssModule = this.opts?.experiment?.enableCssModule;
        return [
            {
                test: /\.css$/,
                use: [this.styleLoader, this.cssLoader, this.postCSSLoader],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [this.styleLoader, this.cssLoader],
                include: /node_modules/,
            },
            {
                test: /\.s[ac]ss$/,
                exclude: (input) => {
                    if (enableCssModule) {
                        return this.CSS_MODULE_FILE_SUFFIX_REGEX.test(input);
                    }
                    else {
                        return false;
                    }
                },
                use: [
                    this.styleLoader,
                    this.cssLoader,
                    this.postCSSLoader,
                    this.sassLoader,
                ],
            },
            enableCssModule && this.sassCssModuleConfig,
            {
                test: /\.less$/,
                use: [
                    this.styleLoader,
                    this.cssLoader,
                    this.postCSSLoader,
                    this.lessLoader,
                ],
            },
        ];
    }
    get sassCssModuleConfig() {
        return {
            test: /\.module.s[ac]ss$/,
            use: [
                this.styleLoader,
                {
                    loader: this.CSS_LOADER,
                    options: {
                        esModule: true,
                        modules: {
                            namedExport: true,
                            localIdentName: this.opts.isProd
                                ? '[path][name]__[local]'
                                : '[local]_[hash:base64]',
                        },
                    },
                },
                this.postCSSLoader,
                this.sassLoader,
            ],
        };
    }
    get styleLoader() {
        return {
            loader: this.opts.isProd ? mini_css_extract_plugin_1.loader : this.STYLE_LOADER,
        };
    }
    get cssLoader() {
        return {
            loader: this.CSS_LOADER,
            options: {
                sourceMap: true,
            },
        };
    }
    get sassLoader() {
        return {
            loader: this.SASS_LOADER,
            options: {
                sourceMap: true,
            },
        };
    }
    get lessLoader() {
        const { lessOptions = {} } = this.opts;
        return {
            loader: this.LESS_LOADER,
            options: {
                sourceMap: true,
                lessOptions,
            },
        };
    }
    get postCSSLoader() {
        return {
            loader: this.POSTCSS_LOADER,
            options: {
                sourceMap: true,
                postcssOptions: {
                    plugins: this.postCSSPlugins,
                },
            },
        };
    }
    get postCSSPlugins() {
        const extraPostCSSPlugins = this.opts.extraPostCSSPlugins || [];
        return [
            (0, autoprefixer_1.default)(),
            postCssUrl([
                {
                    filter: '**/src/public/img/**/*',
                    url: (args) => {
                        const originUrl = args?.originUrl;
                        return originUrl
                            ? (0, path_1.join)(this.opts.cwd, originUrl)
                            : args.absolutePath;
                    },
                    basePath: '/',
                },
                {
                    filter: '**/src/public/font/**/*',
                    url: (args) => {
                        const originUrl = args?.originUrl;
                        return originUrl
                            ? (0, path_1.join)(this.opts.cwd, originUrl)
                            : args.absolutePath;
                    },
                    basePath: '/',
                },
            ]),
            ...extraPostCSSPlugins,
        ].filter(Boolean);
    }
}
exports.default = Style;