From ee3871fcabd4a6d4aed3d7630c28ed3668681ef5 Mon Sep 17 00:00:00 2001 From: Maximo Mussini Date: Fri, 24 Jun 2022 11:32:44 -0300 Subject: [PATCH 1/5] chore: add failing test that checks manifest asset extension --- .../__tests__/backend-integration.spec.ts | 3 +++ .../frontend/entrypoints/blue.scss | 5 +++++ playground/backend-integration/package.json | 5 ++--- pnpm-lock.yaml | 19 +++---------------- 4 files changed, 13 insertions(+), 19 deletions(-) create mode 100644 playground/backend-integration/frontend/entrypoints/blue.scss diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts index db3790ee67e4ac..d70dae5ffcf0df 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -33,10 +33,13 @@ describe.runIf(isBuild)('build', () => { const manifest = readManifest('dev') const htmlEntry = manifest['index.html'] const cssAssetEntry = manifest['global.css'] + const scssAssetEntry = manifest['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(scssAssetEntry?.file).not.toBeUndefined() + expect(scssAssetEntry?.src).toEqual('blue.scss') expect(imgAssetEntry?.file).not.toBeUndefined() }) }) diff --git a/playground/backend-integration/frontend/entrypoints/blue.scss b/playground/backend-integration/frontend/entrypoints/blue.scss new file mode 100644 index 00000000000000..67be4f93044cce --- /dev/null +++ b/playground/backend-integration/frontend/entrypoints/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 6a036ebe08ce13..82146770b60e77 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -363,11 +363,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: {} @@ -2666,12 +2667,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==} @@ -2794,7 +2793,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==} @@ -3042,7 +3040,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==} @@ -3719,7 +3716,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==} @@ -3770,7 +3766,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==} @@ -3781,7 +3776,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==} @@ -3796,7 +3790,6 @@ packages: /dlv/1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} - dev: false /doctrine/2.1.0: resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} @@ -6441,7 +6434,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==} @@ -6776,7 +6768,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==} @@ -6811,7 +6802,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==} @@ -6904,7 +6894,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==} @@ -7122,7 +7111,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==} @@ -7958,7 +7946,6 @@ packages: resolve: 1.22.0 transitivePeerDependencies: - ts-node - dev: false /tailwindcss/3.1.3_ts-node@10.8.1: resolution: {integrity: sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==} From ecb83e45d476a030097a3699ccb89ec65c19b95d Mon Sep 17 00:00:00 2001 From: Maximo Mussini Date: Fri, 24 Jun 2022 12:40:38 -0300 Subject: [PATCH 2/5] fix: preserve original extension of css assets --- packages/vite/src/node/plugins/css.ts | 5 +++-- .../__tests__/backend-integration.spec.ts | 4 ++-- .../frontend/entrypoints/{ => nested}/blue.scss | 0 3 files changed, 5 insertions(+), 4 deletions(-) rename playground/backend-integration/frontend/entrypoints/{ => nested}/blue.scss (100%) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index a362fc124c4150..49052fecf4bb86 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -513,7 +513,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { chunk.facadeModuleId ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) : chunk.name, - '.css' + (chunk.facadeModuleId && path.extname(chunk.facadeModuleId)) || + '.css' ) chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) @@ -524,7 +525,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { name: cssAssetName, fileName: assetFileNamesToFileName( resolveAssetFileNames(config), - cssAssetName, + ensureFileExt(cssAssetName, '.css'), getHash(chunkCSS), chunkCSS ), diff --git a/playground/backend-integration/__tests__/backend-integration.spec.ts b/playground/backend-integration/__tests__/backend-integration.spec.ts index d70dae5ffcf0df..c53ac368a2e015 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -33,13 +33,13 @@ describe.runIf(isBuild)('build', () => { const manifest = readManifest('dev') const htmlEntry = manifest['index.html'] const cssAssetEntry = manifest['global.css'] - const scssAssetEntry = manifest['blue.scss'] + 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(scssAssetEntry?.file).not.toBeUndefined() - expect(scssAssetEntry?.src).toEqual('blue.scss') + expect(scssAssetEntry?.src).toEqual('nested/blue.scss') expect(imgAssetEntry?.file).not.toBeUndefined() }) }) diff --git a/playground/backend-integration/frontend/entrypoints/blue.scss b/playground/backend-integration/frontend/entrypoints/nested/blue.scss similarity index 100% rename from playground/backend-integration/frontend/entrypoints/blue.scss rename to playground/backend-integration/frontend/entrypoints/nested/blue.scss From 6aefab45715f7bc15e895188787174aacc73b17d Mon Sep 17 00:00:00 2001 From: Maximo Mussini Date: Fri, 24 Jun 2022 13:26:11 -0300 Subject: [PATCH 3/5] feat: remember which css assets are entrypoints --- packages/vite/src/node/plugins/css.ts | 16 +++++++++------- packages/vite/src/node/plugins/manifest.ts | 9 ++++++++- .../__tests__/backend-integration.spec.ts | 3 +++ 3 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 49052fecf4bb86..4c065409b3bd4b 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,13 +513,11 @@ 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, - (chunk.facadeModuleId && path.extname(chunk.facadeModuleId)) || - '.css' - ) + const cssAssetName = chunk.facadeModuleId + ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) + : ensureFileExt(chunk.name, '.css') + + if (chunk.isEntry) cssEntryFiles.add(cssAssetName) chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) chunkCSS = await finalizeCss(chunkCSS, true, config) 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 c53ac368a2e015..f0589783cbecf8 100644 --- a/playground/backend-integration/__tests__/backend-integration.spec.ts +++ b/playground/backend-integration/__tests__/backend-integration.spec.ts @@ -38,9 +38,12 @@ describe.runIf(isBuild)('build', () => { 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() }) }) From 672518cfe2ea1740d02565dae2405b2462d42215 Mon Sep 17 00:00:00 2001 From: Maximo Mussini Date: Fri, 24 Jun 2022 13:29:22 -0300 Subject: [PATCH 4/5] fix: only pure css chunks should be considered entries --- packages/vite/src/node/plugins/css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 4c065409b3bd4b..0f5e6b9cac1cd1 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -517,7 +517,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) : ensureFileExt(chunk.name, '.css') - if (chunk.isEntry) cssEntryFiles.add(cssAssetName) + if (chunk.isEntry && isPureCssChunk) cssEntryFiles.add(cssAssetName) chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName) chunkCSS = await finalizeCss(chunkCSS, true, config) From 5239fe67f17403e19938e18b9c572c12359a71fe Mon Sep 17 00:00:00 2001 From: Maximo Mussini Date: Fri, 24 Jun 2022 14:30:26 -0300 Subject: [PATCH 5/5] fix: use isPreprocessor to decide when to preserve the filename --- packages/vite/src/node/plugins/css.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 0f5e6b9cac1cd1..01c72d0c24edcc 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -515,7 +515,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { if (opts.format === 'es' || opts.format === 'cjs') { const cssAssetName = chunk.facadeModuleId ? normalizePath(path.relative(config.root, chunk.facadeModuleId)) - : ensureFileExt(chunk.name, '.css') + : chunk.name + + const lang = path.extname(cssAssetName).slice(1) + const cssFileName = ensureFileExt(cssAssetName, '.css') if (chunk.isEntry && isPureCssChunk) cssEntryFiles.add(cssAssetName) @@ -524,10 +527,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // emit corresponding css file const fileHandle = this.emitFile({ - name: cssAssetName, + name: isPreProcessor(lang) ? cssAssetName : cssFileName, fileName: assetFileNamesToFileName( resolveAssetFileNames(config), - ensureFileExt(cssAssetName, '.css'), + cssFileName, getHash(chunkCSS), chunkCSS ),