build-plugin-rax-app
Version:
The basic webpack configuration for rax project
166 lines • 7.54 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 _a = require('../../constants'), WEB = _a.WEB, WEEX = _a.WEEX, DOCUMENT = _a.DOCUMENT, SSR = _a.SSR, KRAKEN = _a.KRAKEN, MINIAPP = _a.MINIAPP, WECHAT_MINIPROGRAM = _a.WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP = _a.BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM = _a.BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM = _a.KUAISHOU_MINIPROGRAM;
var createCSSRule = require('rax-webpack-config').createCSSRule;
var isWebpack4 = require('@builder/compat-webpack4').isWebpack4;
var getPostCssPlugin = require('../../getPostCssPlugin');
var webStandardList = [WEB, KRAKEN];
var inlineStandardList = [WEEX];
var miniappStandardList = [MINIAPP, WECHAT_MINIPROGRAM, BYTEDANCE_MICROAPP, BAIDU_SMARTPROGRAM, KUAISHOU_MINIPROGRAM];
var nodeStandardList = [DOCUMENT, SSR];
module.exports = function (config, value, context) {
['css', 'less', 'scss'].forEach(function (style) {
var cssRule = config.module.rule(style);
var cssModuleRule = config.module.rule("".concat(style, "-module"));
setCSSRule(config, { configRule: cssRule, context: context, value: value, type: style });
setCSSRule(config, { configRule: cssModuleRule, context: context, value: value, type: 'module' });
});
var taskName = context.taskName;
deleteExtractCSSPlugin(config, value, taskName);
};
function setCSSRule(config, options) {
var configRule = options.configRule, context = options.context, value = options.value, type = options.type;
var taskName = context.taskName;
var isInlineStandard = inlineStandardList.includes(taskName);
var isWebStandard = webStandardList.includes(taskName);
var isMiniAppStandard = miniappStandardList.includes(taskName);
var isNodeStandard = nodeStandardList.includes(taskName);
// `inlineStyle` should be enabled when target is `weex` or `kraken`
if (isInlineStandard) {
configRule.uses.delete('MiniCssExtractPlugin.loader');
configInlineStyle(configRule, 'normal');
return;
}
var postCssType = isWebStandard ? 'web' : 'normal';
if (isWebStandard || isMiniAppStandard) {
if (value) {
// value is `true || { forceEnableCSS: true } || { forceEnableCSS: false }`
if (value.forceEnableCSS) {
// value is `{ forceEnableCSS: true }`
if (type === 'module') {
// rule is `css-module`
// extract `*.module.(c|le|sc)ss`
configPostCssLoader(configRule, postCssType);
}
else {
// rule is `css`
// exclude `global.(c|le|sc)ss`
// create new rule to transform `global.(c|le|sc)ss`
setCSSGlobalRule(config, { configRule: configRule, type: type, postCssType: postCssType });
}
}
else {
configRule.uses.delete('MiniCssExtractPlugin.loader');
configInlineStyle(configRule, isWebStandard ? 'web-inline' : 'normal');
}
}
else {
// value is `false`
configPostCssLoader(configRule, postCssType);
}
return;
}
if (isNodeStandard) {
// should not extract css when `isNodeStandard`
configRule.uses.delete('MiniCssExtractPlugin.loader');
if (value) {
if (value.forceEnableCSS) {
// value is `{ forceEnableCSS: true }`
if (type === 'module') {
// rule is `css-module`
// transform `*.module.(c|le|sc)ss`
configLoadersInNode(configRule);
}
else {
// rule is `css`
// exclude `global.(c|le|sc)ss`
var cssGlobalReg = new RegExp("src\\/global\\.".concat(type));
configRule.exclude.add(cssGlobalReg);
configInlineStyle(configRule, 'web-inline');
// create new rule to transform `global.(c|le|sc)ss`
var cssGlobalRule = createCSSRule(config, "".concat(type, "-global"), cssGlobalReg);
cssGlobalRule.uses.delete('MiniCssExtractPlugin.loader');
configLoadersInNode(cssGlobalRule);
}
}
else {
configInlineStyle(configRule, 'web-inline');
}
}
else {
// Do not generate CSS file, it will be built by web complier
configLoadersInNode(configRule, type);
}
}
}
function configInlineStyle(configRule, type) {
return configPostCssLoader(configRule, type)
.use('css-loader')
.loader(require.resolve('stylesheet-loader'))
.options({
transformDescendantCombinator: true,
})
.end();
}
function configPostCssLoader(configRule, type) {
return configRule
.use('postcss-loader')
.tap(function (options) {
var postcssOptions = options.postcssOptions || {};
return __assign(__assign({}, options), { postcssOptions: __assign(__assign({}, postcssOptions), { plugins: (postcssOptions.plugins || []).concat(getPostCssPlugin(type)) }) });
})
.end();
}
function configLoadersInNode(configRule, type) {
configRule.uses.delete('postcss-loader').end();
if (type === 'module') {
var cssLoaderOptions_1 = {};
if (isWebpack4) {
cssLoaderOptions_1.onlyLocals = true;
}
else {
cssLoaderOptions_1.modules = {
exportOnlyLocals: true,
};
}
return configRule
.use('css-loader')
.tap(function (loaderOptions) { return (__assign(__assign(__assign({}, loaderOptions), cssLoaderOptions_1), { modules: __assign(__assign({}, loaderOptions.modules), cssLoaderOptions_1.modules) })); })
.end();
}
}
function setCSSGlobalRule(config, options) {
var configRule = options.configRule, type = options.type, postCssType = options.postCssType;
var cssGlobalReg = new RegExp("src\\/global\\.".concat(type));
configRule.exclude.add(cssGlobalReg);
configRule.uses.delete('MiniCssExtractPlugin.loader');
configInlineStyle(configRule, postCssType === 'web' ? 'web-inline' : postCssType);
// create rule to process `global.(c|le|sa|sc)ss`
var cssGlobalRule = createCSSRule(config, "".concat(type, "-global"), cssGlobalReg);
configPostCssLoader(cssGlobalRule, postCssType);
}
function deleteExtractCSSPlugin(config, value, taskName) {
var isInlineStandard = inlineStandardList.includes(taskName);
var isNodeStandard = nodeStandardList.includes(taskName);
// taskName is `weex` `kraken` `ssr` or `document`
// delete `MiniCssExtractPlugin`
if (isInlineStandard || isNodeStandard) {
config.plugins.delete('MiniCssExtractPlugin');
return;
}
// value is `true || { forceEnableCSS: false }`
// delete `MiniCssExtractPlugin` when `forceEnableCSS` is false
if (value && !value.forceEnableCSS) {
config.plugins.delete('MiniCssExtractPlugin');
}
}
//# sourceMappingURL=inlineStyle.js.map