@arco-plugins/webpack-react
Version:
arco webpack plugin
191 lines (190 loc) • 8 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemePlugin = void 0;
/* eslint-disable no-empty */
var path_1 = __importDefault(require("path"));
var fs_1 = require("fs");
var lodash_1 = require("lodash");
var utils_1 = require("@arco-plugins/utils");
var utils_2 = require("./utils");
var config_1 = require("./config");
var matchers_1 = require("./config/matchers");
var ThemePlugin = /** @class */ (function () {
function ThemePlugin(options) {
this.options = options;
}
ThemePlugin.prototype.apply = function (compiler) {
this.compiler = compiler;
this.hookForGlobalStyle();
this.hookForVariables();
this.hookForComponentStyle();
};
/**
* 读取主题变量，添加到 less-loader
*/
ThemePlugin.prototype.hookForVariables = function () {
var themeVars = this.getThemeVars() || {};
var modifyVars = this.options.modifyVars || {};
var vars = __assign(__assign({}, themeVars), modifyVars);
if ((0, lodash_1.isEmpty)(vars))
return;
var noLessLoaderWarning = '';
var context = (0, utils_2.getContext)(this.compiler, this.options.context);
var include = this.options.varsInjectScope || [];
var isMatch = utils_1.pathUtils.matcher(include, {
extraGlobPattern: matchers_1.lessMatchers,
extensions: ['.less'],
cwd: context,
});
(0, utils_2.hookNormalModuleLoader)(this.compiler, config_1.PLUGIN_NAME, function (_loaderContext, module, resource) {
if (isMatch(resource)) {
var loaders = (0, lodash_1.cloneDeep)(module.loaders);
var lessLoader = (0, utils_2.getLoader)(loaders, 'less-loader');
if (!lessLoader) {
noLessLoaderWarning =
'less-loader not found! The theme and modifyVars has no effective, please check if less-loader is added.';
return;
}
(0, utils_2.rewriteLessLoaderOptions)(lessLoader, {
modifyVars: vars,
});
module.loaders = loaders;
}
});
this.compiler.hooks.afterCompile.tap(config_1.PLUGIN_NAME, function () {
if (noLessLoaderWarning) {
utils_1.print.warn("[arco-design/webpack-plugin]: ".concat(noLessLoaderWarning));
}
});
};
/**
* 读取主题全局样式文件，利用 loader 添加到 style/index.less
*/
ThemePlugin.prototype.hookForGlobalStyle = function () {
if (!this.options.theme)
return;
this.addAppendLoader(matchers_1.globalLessMatchers, "".concat(this.options.theme, "/theme.less"), {
importLessPath: true,
});
this.addAppendLoader(matchers_1.globalCssMatchers, "".concat(this.options.theme, "/theme.css"));
};
/**
* 读取组件的样式文件，附加到各组件的 index.less 和 index.css
*/
ThemePlugin.prototype.hookForComponentStyle = function () {
var _this = this;
if (!this.options.theme)
return;
var componentList = this.getComponentList();
componentList.forEach(function (componentName) {
_this.addAppendLoader((0, matchers_1.componentLessMatchers)(componentName), "".concat(_this.options.theme, "/components/").concat(componentName, "/index.less"), {
importLessPath: true,
});
_this.addAppendLoader((0, matchers_1.componentCssMatchers)(componentName), "".concat(_this.options.theme, "/components/").concat(componentName, "/index.css"));
});
};
// 将 filePath 中的内容添加到 match 的文件中
ThemePlugin.prototype.addAppendLoader = function (matcher, filePath, options) {
try {
var source_1 = (0, utils_1.getFileSource)(filePath);
if (!source_1)
return;
if (options && options.importLessPath) {
source_1 = ";\n@import '~".concat(filePath, "';");
}
var appendLoader_1 = require.resolve('./loaders/append');
(0, utils_2.hookNormalModuleLoader)(this.compiler, config_1.PLUGIN_NAME, function (_loaderContext, module, resource) {
if (utils_1.pathUtils.isMatch(resource, matcher) && !(0, utils_2.getLoader)(module.loaders, appendLoader_1)) {
var loaders = (0, lodash_1.cloneDeep)(module.loaders || []);
loaders.push({
loader: appendLoader_1,
options: {
additionContent: source_1.replace(/!/g, '__ARCO_PLACEHOLDER__'),
},
ident: null,
type: null,
});
module.loaders = loaders;
}
});
}
catch (error) { }
};
/** 读取组件配置目录 */
ThemePlugin.prototype.getComponentList = function () {
if (!this.options.theme)
return [];
try {
var packageRootDir = path_1.default.dirname(require.resolve("".concat(this.options.theme, "/package.json")));
var themeComponentDirPath = "".concat(packageRootDir, "/components");
var componentList = (0, fs_1.readdirSync)(themeComponentDirPath);
return componentList || [];
}
catch (error) {
return [];
}
};
/**
* 读取主题变量
*/
ThemePlugin.prototype.getThemeVars = function () {
if (!this.options.theme)
return {};
try {
var variableLessPath = require.resolve("".concat(this.options.theme, "/tokens.less"));
var source = (0, fs_1.readFileSync)(variableLessPath);
return this.transformSourceToObject(source.toString());
}
catch (error) {
return {};
}
};
/**
* 将文件内容转为对象
* @param {less file content}} source
*/
ThemePlugin.prototype.transformSourceToObject = function (source) {
var _a;
if (source === void 0) { source = ''; }
// 去掉注释
var str = (0, lodash_1.isString)(source) &&
source
.replace(/\/\/.*/g, '') // ‘//’ 之后的所有内容（以一行为结束）
.replace(/\/\*[\s\S]*?\*\//g, ''); // ‘/**/’ 之间的所有内容
if (!str.length)
return;
var cssVarsPrefix = (_a = this.options.modifyVars) === null || _a === void 0 ? void 0 : _a['arco-cssvars-prefix'];
var obj = {};
str
.match(/(?=@)([\s\S]+?)(?=;)/g) // 匹配变量定义，结果为 ‘@变量名: 变量值’
.map(function (item) { return item && item.split(':'); })
.filter(function (item) { return item && item.length === 2; })
.forEach(function (item) {
var key = item[0].replace(/^@/, '').trim();
var value = item[1].trim();
if (key && value) {
if (cssVarsPrefix && value.includes('--')) {
value = value.replace('--', "".concat(cssVarsPrefix, "-"));
}
obj[key] = value;
}
});
return obj;
};
return ThemePlugin;
}());
exports.ThemePlugin = ThemePlugin;