| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- "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
|