mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 17:37:24 +08:00
157 lines
6.9 KiB
JavaScript
157 lines
6.9 KiB
JavaScript
"use strict";
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.createBuildCssPlugin = void 0;
|
|
const path_1 = __importDefault(require("path"));
|
|
const buildPluginAsset_1 = require("./buildPluginAsset");
|
|
const cssUtils_1 = require("../utils/cssUtils");
|
|
const chalk_1 = __importDefault(require("chalk"));
|
|
const pluginutils_1 = require("@rollup/pluginutils");
|
|
const slash_1 = __importDefault(require("slash"));
|
|
const debug = require('debug')('vite:build:css');
|
|
const cssInjectionMarker = `__VITE_CSS__`;
|
|
const cssInjectionRE = /__VITE_CSS__\(\)/g;
|
|
exports.createBuildCssPlugin = ({ root, publicBase, assetsDir, minify = false, inlineLimit = 0, cssCodeSplit = true, preprocessOptions, modulesOptions = {} }) => {
|
|
const styles = new Map();
|
|
let staticCss = '';
|
|
return {
|
|
name: 'vite:css',
|
|
async transform(css, id) {
|
|
if (cssUtils_1.isCSSRequest(id)) {
|
|
// if this is a Vue SFC style request, it's already processed by
|
|
// rollup-plugin-vue and we just need to rewrite URLs + collect it
|
|
const isVueStyle = /\?vue&type=style/.test(id);
|
|
const preprocessLang = (id.match(cssUtils_1.cssPreprocessLangRE) ||
|
|
[])[1];
|
|
const result = isVueStyle
|
|
? css
|
|
: await cssUtils_1.compileCss(root, id, {
|
|
id: '',
|
|
source: css,
|
|
filename: id,
|
|
scoped: false,
|
|
modules: cssUtils_1.cssModuleRE.test(id),
|
|
preprocessLang,
|
|
preprocessOptions,
|
|
modulesOptions
|
|
}, true);
|
|
let modules;
|
|
if (typeof result === 'string') {
|
|
css = result;
|
|
}
|
|
else {
|
|
if (result.errors.length) {
|
|
console.error(`[vite] error applying css transforms: `);
|
|
result.errors.forEach(console.error);
|
|
}
|
|
css = result.code;
|
|
modules = result.modules;
|
|
}
|
|
// process url() - register referenced files as assets
|
|
// and rewrite the url to the resolved public path
|
|
if (cssUtils_1.urlRE.test(css)) {
|
|
const fileDir = path_1.default.dirname(id);
|
|
css = await cssUtils_1.rewriteCssUrls(css, async (rawUrl) => {
|
|
const file = path_1.default.posix.isAbsolute(rawUrl)
|
|
? path_1.default.join(root, rawUrl)
|
|
: path_1.default.join(fileDir, rawUrl);
|
|
let { fileName, content, url } = await buildPluginAsset_1.resolveAsset(file, root, publicBase, assetsDir, inlineLimit);
|
|
if (!url && fileName && content) {
|
|
url =
|
|
'import.meta.ROLLUP_FILE_URL_' +
|
|
this.emitFile({
|
|
name: fileName,
|
|
type: 'asset',
|
|
source: content
|
|
});
|
|
}
|
|
debug(`url(${rawUrl}) -> ${url.startsWith('data:') ? `base64 inlined` : `${file}`}`);
|
|
return url;
|
|
});
|
|
}
|
|
styles.set(id, css);
|
|
return {
|
|
code: modules
|
|
? pluginutils_1.dataToEsm(modules, { namedExports: true })
|
|
: (cssCodeSplit
|
|
? // If code-splitting CSS, inject a fake marker to avoid the module
|
|
// from being tree-shaken. This preserves the .css file as a
|
|
// module in the chunk's metadata so that we can retrieve them in
|
|
// renderChunk.
|
|
`${cssInjectionMarker}()\n`
|
|
: ``) + `export default ${JSON.stringify(css)}`,
|
|
map: null,
|
|
// #795 css always has side effect
|
|
moduleSideEffects: true
|
|
};
|
|
}
|
|
},
|
|
async renderChunk(code, chunk) {
|
|
let chunkCSS = '';
|
|
for (const id in chunk.modules) {
|
|
if (styles.has(id)) {
|
|
chunkCSS += styles.get(id);
|
|
}
|
|
}
|
|
let match;
|
|
while ((match = buildPluginAsset_1.injectAssetRe.exec(chunkCSS))) {
|
|
const outputFilepath = publicBase + slash_1.default(path_1.default.join(assetsDir, this.getFileName(match[1])));
|
|
chunkCSS = chunkCSS.replace(match[0], outputFilepath);
|
|
}
|
|
if (cssCodeSplit) {
|
|
code = code.replace(cssInjectionRE, '');
|
|
// for each dynamic entry chunk, collect its css and inline it as JS
|
|
// strings.
|
|
if (chunk.isDynamicEntry && chunkCSS) {
|
|
chunkCSS = minifyCSS(chunkCSS);
|
|
code =
|
|
`let ${cssInjectionMarker} = document.createElement('style');` +
|
|
`${cssInjectionMarker}.innerHTML = ${JSON.stringify(chunkCSS)};` +
|
|
`document.head.appendChild(${cssInjectionMarker});` +
|
|
code;
|
|
}
|
|
else {
|
|
staticCss += chunkCSS;
|
|
}
|
|
return {
|
|
code,
|
|
map: null
|
|
};
|
|
}
|
|
else {
|
|
staticCss += chunkCSS;
|
|
return null;
|
|
}
|
|
},
|
|
async generateBundle(_options, bundle) {
|
|
// minify css
|
|
if (minify && staticCss) {
|
|
staticCss = minifyCSS(staticCss);
|
|
}
|
|
if (staticCss) {
|
|
this.emitFile({
|
|
name: 'style.css',
|
|
type: 'asset',
|
|
source: staticCss
|
|
});
|
|
}
|
|
}
|
|
};
|
|
};
|
|
let CleanCSS;
|
|
function minifyCSS(css) {
|
|
CleanCSS = CleanCSS || require('clean-css');
|
|
const res = new CleanCSS({ level: 2, rebase: false }).minify(css);
|
|
if (res.errors && res.errors.length) {
|
|
console.error(chalk_1.default.red(`[vite] error when minifying css:`));
|
|
console.error(res.errors);
|
|
}
|
|
if (res.warnings && res.warnings.length) {
|
|
console.error(chalk_1.default.yellow(`[vite] warnings when minifying css:`));
|
|
console.error(res.warnings);
|
|
}
|
|
return res.styles;
|
|
}
|
|
//# sourceMappingURL=buildPluginCss.js.map
|