diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index a362fc124c4150..01c72d0c24edcc 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -143,6 +143,8 @@ export const removedPureCssFilesCache = new WeakMap< Map >() +export const cssEntryFilesCache = new WeakMap>() + const postcssConfigCache = new WeakMap< ResolvedConfig, PostCSSConfigResult | null @@ -179,6 +181,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin { cssModulesCache.set(config, moduleCache) removedPureCssFilesCache.set(config, new Map()) + cssEntryFilesCache.set(config, new Set()) }, async transform(raw, id, options) { @@ -453,6 +456,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { return null } + const cssEntryFiles = cssEntryFilesCache.get(config)! const publicAssetUrlMap = publicAssetUrlCache.get(config)! // resolve asset URL placeholders to their built file URLs @@ -509,22 +513,24 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { pureCssChunks.add(chunk.fileName) } if (opts.format === 'es' || opts.format === 'cjs') { - const cssAssetName = ensureFileExt( - chunk.facadeModuleId - ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) - : chunk.name, - '.css' - ) + const cssAssetName = chunk.facadeModuleId + ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) + : chunk.name + + const lang = path.extname(cssAssetName).slice(1) + const cssFileName = ensureFileExt(cssAssetName, '.css') + + if (chunk.isEntry && isPureCssChunk) cssEntryFiles.add(cssAssetName) chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) chunkCSS = await finalizeCss(chunkCSS, true, config) // emit corresponding css file const fileHandle = this.emitFile({ - name: cssAssetName, + name: isPreProcessor(lang) ? cssAssetName : cssFileName, fileName: assetFileNamesToFileName( resolveAssetFileNames(config), - cssAssetName, + cssFileName, getHash(chunkCSS), chunkCSS ), diff --git a/packages/vite/src/node/plugins/manifest.ts b/packages/vite/src/node/plugins/manifest.ts index a0e231a3e034fb..e342102946904a 100644 --- a/packages/vite/src/node/plugins/manifest.ts +++ b/packages/vite/src/node/plugins/manifest.ts @@ -3,6 +3,7 @@ import type { OutputAsset, OutputChunk } from 'rollup' import type { ResolvedConfig } from '..' import type { Plugin } from '../plugin' import { normalizePath } from '../utils' +import { cssEntryFilesCache } from './css' export type Manifest = Record @@ -100,12 +101,18 @@ export function manifestPlugin(config: ResolvedConfig): Plugin { } function createAsset(chunk: OutputAsset): ManifestChunk { - return { + const manifestChunk: ManifestChunk = { file: chunk.fileName, src: chunk.name } + + if (cssEntryFiles.has(chunk.name!)) manifestChunk.isEntry = true + + return manifestChunk } + const cssEntryFiles = cssEntryFilesCache.get(config)! + for (const file in bundle) { const chunk = bundle[file] if (chunk.type === 'chunk') { diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts index db3790ee67e4ac..f0589783cbecf8 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -33,11 +33,17 @@ describe.runIf(isBuild)('build', () => { const manifest = readManifest('dev') const htmlEntry = manifest['index.html'] const cssAssetEntry = manifest['global.css'] + const scssAssetEntry = manifest['nested/blue.scss'] const imgAssetEntry = manifest['../images/logo.png'] expect(htmlEntry.css.length).toEqual(1) expect(htmlEntry.assets.length).toEqual(1) expect(cssAssetEntry?.file).not.toBeUndefined() + expect(cssAssetEntry?.isEntry).toEqual(true) + expect(scssAssetEntry?.file).not.toBeUndefined() + expect(scssAssetEntry?.src).toEqual('nested/blue.scss') + expect(scssAssetEntry?.isEntry).toEqual(true) expect(imgAssetEntry?.file).not.toBeUndefined() + expect(imgAssetEntry?.isEntry).toBeUndefined() }) }) diff --git a/playground/backend-integration/frontend/entrypoints/nested/blue.scss b/playground/backend-integration/frontend/entrypoints/nested/blue.scss new file mode 100644 index 00000000000000..67be4f93044cce --- /dev/null +++ b/playground/backend-integration/frontend/entrypoints/nested/blue.scss @@ -0,0 +1,5 @@ +$primary: #cc0000; + +.text-primary { + color: $primary; +} diff --git a/playground/backend-integration/package.json b/playground/backend-integration/package.json index 5c713942228ae6..aeb061f095391f 100644 --- a/playground/backend-integration/package.json +++ b/playground/backend-integration/package.json @@ -8,10 +8,9 @@ "debug": "node --inspect-brk ../../packages/vite/bin/vite", "preview": "vite preview" }, - "dependencies": { - "tailwindcss": "^3.1.3" - }, "devDependencies": { + "sass": "^1.52.3", + "tailwindcss": "^3.1.3", "fast-glob": "^3.2.11" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 585fd0b471542d..1398973edda041 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -361,11 +361,12 @@ importers: playground/backend-integration: specifiers: fast-glob: ^3.2.11 + sass: ^1.52.3 tailwindcss: ^3.1.3 - dependencies: - tailwindcss: 3.1.3 devDependencies: fast-glob: 3.2.11 + sass: 1.52.3 + tailwindcss: 3.1.3 playground/cli: specifiers: {} @@ -2680,12 +2681,10 @@ packages: acorn: 7.4.1 acorn-walk: 7.2.0 xtend: 4.0.2 - dev: false /acorn-walk/7.2.0: resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==} engines: {node: '>=0.4.0'} - dev: false /acorn-walk/8.2.0: resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==} @@ -2808,7 +2807,6 @@ packages: /arg/5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} - dev: false /argparse/1.0.10: resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} @@ -3056,7 +3054,6 @@ packages: /camelcase-css/2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - dev: false /camelcase-keys/6.2.2: resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==} @@ -3733,7 +3730,6 @@ packages: /defined/1.0.0: resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==} - dev: false /defu/5.0.1: resolution: {integrity: sha512-EPS1carKg+dkEVy3qNTqIdp2qV7mUP08nIsupfwQpz++slCVRw7qbQyWvSTig+kFPwz2XXp5/kIIkH+CwrJKkQ==} @@ -3784,7 +3780,6 @@ packages: acorn-node: 1.8.2 defined: 1.0.0 minimist: 1.2.6 - dev: false /dicer/0.3.0: resolution: {integrity: sha512-MdceRRWqltEG2dZqO769g27N/3PXfcKl04VhYnBlo2YhH7zPi88VebsjTKclaOyiuMaGU72hTfw3VkUitGcVCA==} @@ -3795,7 +3790,6 @@ packages: /didyoumean/1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} - dev: false /diff/4.0.2: resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==} @@ -3810,7 +3804,6 @@ packages: /dlv/1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} - dev: false /doctrine/2.1.0: resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} @@ -6448,7 +6441,6 @@ packages: /object-hash/3.0.0: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} - dev: false /object-inspect/1.12.2: resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==} @@ -6783,7 +6775,6 @@ packages: dependencies: camelcase-css: 2.0.1 postcss: 8.4.14 - dev: false /postcss-load-config/3.1.4_apxnowcr5uhxb4jlsbpuejnlvi: resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} @@ -6818,7 +6809,6 @@ packages: lilconfig: 2.0.5 postcss: 8.4.14 yaml: 1.10.2 - dev: false /postcss-load-config/4.0.1_postcss@8.4.14: resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} @@ -6911,7 +6901,6 @@ packages: dependencies: postcss: 8.4.14 postcss-selector-parser: 6.0.10 - dev: false /postcss-selector-parser/6.0.10: resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} @@ -7129,7 +7118,6 @@ packages: /quick-lru/5.1.1: resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==} engines: {node: '>=10'} - dev: false /range-parser/1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} @@ -7965,7 +7953,6 @@ packages: resolve: 1.22.0 transitivePeerDependencies: - ts-node - dev: false /tailwindcss/3.1.3_ts-node@10.8.1: resolution: {integrity: sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==}