build-plugin-fusion/lib/webpackPlugins/appendStyleWebpackPlugin.js

plugin for build scripts while use fusion component

/* eslint-disable no-underscore-dangle, no-useless-escape */
var assert = require('assert');
var _a = require('webpack-sources'), ConcatSource = _a.ConcatSource, RawSource = _a.RawSource;
var fs = require('fs');
var path = require('path');
var getSassImplementation = require('@builder/app-helpers').getSassImplementation;
var convertCharStr2CSS = require('../utils/convertCharStr');
/* eslint no-console: 0 */
function compileSass(srcPath, variableFile, coreVarCode) {
    srcPath = String(srcPath);
    var scssContent = '';
    var basePath = path.resolve(srcPath, '..');
    try {
        scssContent = fs.readFileSync(srcPath, 'utf-8');
    }
    catch (err) {
        return ''; // ENEONT 文件不存在
    }
    if (variableFile) {
        try {
            var variableFileContent = fs.readFileSync(variableFile, 'utf-8');
            if (variableFileContent) {
                scssContent = variableFileContent + coreVarCode + scssContent;
            }
        }
        catch (err) {
            // do nothing
        }
    }
    var cssResult = null;
    var sass = getSassImplementation();
    try {
        cssResult = sass.renderSync({
            data: scssContent,
            includePaths: [basePath],
        });
    }
    catch (err) {
        console.error('[WARNING]: 编译 Icon 出错，构建继续。错误详细信息：', err.stack);
        return '';
    }
    var css = '';
    try {
        css = cssResult.css
            .toString('utf-8') // 这里 result 是个对象，css 是个 buffer
            .replace(/content:\s*(?:\'|\")([\u0080-\uffff])(?:\'|\")/g, function (str, $1) {
            return "content: \"".concat(convertCharStr2CSS($1), "\"");
        });
    }
    catch (err) {
        return '';
    }
    return css.replace(/^@charset "UTF-8";/, ''); // 第一行 charset 去掉
}
module.exports = /** @class */ (function () {
    function AppendStylePlugin(options) {
        assert.ok(Object.prototype.toString.call(options) === '[object Object]', 'First arg: "options" in constructor of AppendStylePlugin should be an object.');
        // ENUM: ['header', 'footer'], 默认 footer，既追加在源 CSS 底部。
        this.appendPosition = options.appendPosition || 'footer';
        this.type = options.type || 'sass'; // 源文件类型
        this.srcFile = options.srcFile; // 源文件
        this.variableFile = options.variableFile; // scss 变量文件
        this.compileThemeIcon = options.compileThemeIcon; // 是否为主题的 icons.scss
        this.themeConfig = options.themeConfig; // themeConfig 配置
        this.distMatch =
            options.distMatch instanceof RegExp // chunkName 去匹配的逻辑，正则或者函数
                ? function (chunkName) { return options.distMatch.test(chunkName); }
                : options.distMatch;
    }
    AppendStylePlugin.prototype.apply = function (compiler) {
        var _this = this;
        var srcFile = String(this.srcFile);
        var distMatch = this.distMatch;
        var variableFile = this.variableFile;
        var compilerEntry = compiler.options.entry;
        if (!srcFile || !distMatch) {
            return;
        }
        compiler.hooks.compilation.tap('compilation', function (compilation) {
            var wrapStyleContent = function (fileName) {
                if (distMatch(fileName, compilerEntry, compilation._preparedEntrypoints)) {
                    var css = _this.compileToCSS(srcFile, variableFile);
                    _this.wrapFile(compilation, fileName, css);
                }
            };
            // compatible with webpack 5
            if (typeof compilation.hooks.processAssets !== 'undefined') {
                // eslint-disable-next-line global-require
                var Compilation = require('webpack').Compilation;
                compilation.hooks.processAssets.tapAsync({
                    name: 'optimize-chunk-assets',
                    stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE
                }, function (assets, done) {
                    var fileNames = Object.keys(assets);
                    fileNames.forEach(function (fileName) {
                        wrapStyleContent(fileName);
                    });
                    done();
                });
            }
            else {
                compilation.hooks.optimizeChunkAssets.tapAsync('optimize-chunk-assets', function (chunks, done) {
                    chunks.forEach(function (chunk) {
                        chunk.files.forEach(function (fileName) {
                            wrapStyleContent(fileName);
                        });
                    });
                    done();
                });
            }
        });
    };
    AppendStylePlugin.prototype.wrapFile = function (compilation, fileName, content) {
        // 默认按照底部添加的来
        if (this.appendPosition === 'header') {
            compilation.assets[fileName] = new ConcatSource(new RawSource(String(content)), compilation.assets[fileName]);
        }
        else {
            compilation.assets[fileName] = new ConcatSource(compilation.assets[fileName], new RawSource(String(content)));
        }
    };
    AppendStylePlugin.prototype.compileToCSS = function (srcFile, themeVariableFile) {
        if (this.type === 'sass') {
            var themeConfig = this.themeConfig || {};
            var coreVarCode = '';
            if (this.compileThemeIcon) {
                // 1.x 主题包的 icons.scss 里使用了 css-prefix 变量，因此这里需要手动声明下
                // 即便不手动声明，这里也需要支持自定义 css-prefix 能力
                var cssPrefix = themeConfig.nextPrefix || 'next-';
                coreVarCode = "$css-prefix: '".concat(cssPrefix, "';");
            }
            return compileSass(srcFile, themeVariableFile, coreVarCode);
        }
        var css = '';
        try {
            css = fs.readFileSync(srcFile, 'utf-8');
        }
        catch (err) {
            return '';
        }
        return css;
    };
    return AppendStylePlugin;
}());
//# sourceMappingURL=appendStyleWebpackPlugin.js.map