@alicloud/console-toolkit-plugin-react
Version:
console toolkit plugin for base react app
169 lines (168 loc) • 7.44 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 __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 });
exports.style = void 0;
var autoprefixer = require("autoprefixer");
var tailwindcss = require("tailwindcss");
var utils_1 = require("../../../utils");
var conditions_1 = require("./conditions");
var normalizeTheme_1 = require("./normalizeTheme");
function applyCssLoaders(rule, options) {
var shouldExtract = options.shouldExtract, loader = options.loader, loaderOptions = options.loaderOptions, _a = options.modules, modules = _a === void 0 ? false : _a, _b = options.sourceMap, sourceMap = _b === void 0 ? false : _b, classNamePrefix = options.classNamePrefix, _c = options.hashPrefix, hashPrefix = _c === void 0 ? '' : _c, _d = options.postCssPlugins, postCssPlugins = _d === void 0 ? [] : _d, _e = options.tailwindcss, tailwindcssConfig = _e === void 0 ? {} : _e;
// extract-text-webpack-plugin 在 webpack 4 中用作提取 css 的时候存在问题
// 使用 mini-css-extract-plugin 作为更好的代替方案进行 css 的抽取
var styleLoaderOptions = classNamePrefix ? {
singleton: true,
attrs: {
// Add a custom attr to the generated style tag to easily
// identify which widget the style tag belonging to.
from: classNamePrefix
}
} : {};
if (shouldExtract) {
rule
.use('extract-css-loader')
.loader(require('mini-css-extract-plugin').loader)
.options(__assign(__assign({}, styleLoaderOptions), { publicPath: './' }));
}
else {
rule
.use('style-loader')
.loader(require.resolve('style-loader'))
.options(styleLoaderOptions);
}
var cssOptions = {
sourceMap: sourceMap,
importLoaders: 2,
modules: modules,
};
if (modules === true || modules === 'local') {
cssOptions = __assign(__assign({}, cssOptions), { localIdentName: "".concat(classNamePrefix ? classNamePrefix : "[path]", "___[name]__[local]___[hash:base64:5]"), hashPrefix: hashPrefix });
}
postCssPlugins.unshift(autoprefixer({
// @ts-ignore
overrideBrowserslist: [
'> 0%',
'not ie <= 9',
],
}));
// add tailwindcss plugin
if (tailwindcssConfig.config) {
postCssPlugins.unshift(tailwindcss({
config: tailwindcssConfig.config,
}));
}
// css loader
rule
.use('css-loader')
.loader(require.resolve('css-loader'))
.options(cssOptions);
// postcss loader
rule
.use('postcss-loader')
.loader(require.resolve('postcss-loader'))
.options({
postcssOptions: {
plugins: postCssPlugins,
}
});
// style loader, eg: less, scss
if (loader) {
rule
.use(loader)
.loader(require.resolve(loader))
.options(loaderOptions);
}
}
/**
*
* @param config
* @param options
*/
var style = function (config, options) {
var cwd = options.cwd, shouldExtract = options.shouldExtract, _a = options.condition, condition = _a === void 0 ? 'stable' : _a, consoleOS = options.consoleOS, disableConsoleOS = options.disableConsoleOS;
var _b = consoleOS || {}, disableOsCssExtends = _b.disableOsCssExtends, disableCssPrefix = _b.disableCssPrefix;
function createCssRules(lang, test, styleOptions) {
var baseRule = (0, utils_1.createRules)(config, { lang: lang, test: test });
applyCssLoaders(baseRule, __assign(__assign({}, options), styleOptions));
}
// 兼容 less-loader v5 配置
var _c = options.lessLoaderOptions || {}, lessOptions = _c.lessOptions, prependData = _c.prependData, appendData = _c.appendData, sourceMap = _c.sourceMap, implementation = _c.implementation, restLessLoaderOptions = __rest(_c, ["lessOptions", "prependData", "appendData", "sourceMap", "implementation"]);
var lessLoaderOptions = {
lessOptions: typeof lessOptions === 'function' ? lessOptions : __assign(__assign({ javascriptEnabled: true, modifyVars: (options.theme ? (0, normalizeTheme_1.default)(options.theme, { cwd: cwd }) : {}) }, lessOptions), restLessLoaderOptions),
prependData: prependData,
appendData: appendData,
sourceMap: sourceMap,
implementation: implementation
};
createCssRules('css', /\.css$/);
/*
* 排除掉 scope.less 的 的文件, 以防 less-loader 被加载两次
*/
var _d = (0, conditions_1.getCondtions)(cwd), LessConditionsPreset = _d.LessConditionsPreset, ScopedLessConditionsPreset = _d.ScopedLessConditionsPreset;
var lessCondition = LessConditionsPreset[condition];
/**
* 这个地方 由于以前默认的时候 css-loader 0.x 和 1.x 会对 :global 默认转义,
* 但是在 2.x 之后 需要配置 modules = 'global' 字段. 为了兼容以前的版本 默认开启
* 对 :global 的处理.
* @see https://github.com/webpack-contrib/css-loader#modules
*/
createCssRules('less', lessCondition, {
loader: 'less-loader',
loaderOptions: lessLoaderOptions,
modules: false,
});
// scoped.less
var scopeCondition = ScopedLessConditionsPreset[condition];
createCssRules('less-scoped', scopeCondition, {
loader: 'less-loader',
loaderOptions: lessLoaderOptions,
modules: true,
});
if (shouldExtract) {
// NOTE there 'extract-css' used by breezr-plugin-long-term-caching
config.plugin('extract-css')
.use(require('mini-css-extract-plugin'), [{
filename: '[name].css',
chunkFilename: '[id].css',
// 针对沙箱场景替换 async chunk 的文件名
// 必须是没有关闭微应用构建且没关闭构建 .os.css 文件
insert: (!disableConsoleOS && !disableOsCssExtends && !disableCssPrefix) ? function (linkTag) {
var isConsoleOS = false;
try {
// context maybe not defined
// @ts-ignore
isConsoleOS = !!context.__IS_CONSOLE_OS_CONTEXT__ && window !== window.parent;
}
catch (e) {
// ...
}
if (isConsoleOS)
linkTag.href = linkTag.href.replace('.css', '.os.css');
document.head.appendChild(linkTag);
} : undefined,
}]);
}
};
exports.style = style;