From 8665c288020c210dac38a259984261b05cd4fced Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Sat, 30 Apr 2022 22:09:05 +0900 Subject: [PATCH 1/4] test: add failing css dynamic import in deps test --- .../dynamic-import/__tests__/dynamic-import.spec.ts | 7 ++++++- packages/playground/dynamic-import/index.html | 1 + packages/playground/dynamic-import/nested/deps.js | 3 +++ packages/playground/dynamic-import/nested/index.js | 5 +++++ packages/playground/dynamic-import/package.json | 6 +++++- packages/playground/dynamic-import/pkg/index.js | 1 + packages/playground/dynamic-import/pkg/package.json | 7 +++++++ packages/playground/dynamic-import/pkg/pkg.css | 3 +++ pnpm-lock.yaml | 6 ++++++ 9 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 packages/playground/dynamic-import/nested/deps.js create mode 100644 packages/playground/dynamic-import/pkg/index.js create mode 100644 packages/playground/dynamic-import/pkg/package.json create mode 100644 packages/playground/dynamic-import/pkg/pkg.css diff --git a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts index c7157ef4652ec6..4730b5e990a1c3 100644 --- a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts +++ b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts @@ -1,4 +1,4 @@ -import { isBuild, untilUpdated } from '../../testUtils' +import { getColor, isBuild, untilUpdated } from '../../testUtils' test('should load literal dynamic import', async () => { await page.click('.baz') @@ -59,3 +59,8 @@ test('should load dynamic import with css', async () => { true ) }) + +test('should load dynamic import with css in package', async () => { + await page.click('.pkg-css') + await untilUpdated(() => getColor('.pkg-css'), 'blue', true) +}) diff --git a/packages/playground/dynamic-import/index.html b/packages/playground/dynamic-import/index.html index c87ef2a17f48d5..8e18204a7e4296 100644 --- a/packages/playground/dynamic-import/index.html +++ b/packages/playground/dynamic-import/index.html @@ -8,6 +8,7 @@ +
diff --git a/packages/playground/dynamic-import/nested/deps.js b/packages/playground/dynamic-import/nested/deps.js new file mode 100644 index 00000000000000..88fd4787941fd0 --- /dev/null +++ b/packages/playground/dynamic-import/nested/deps.js @@ -0,0 +1,3 @@ +/* don't include dynamic import inside this file */ + +import 'pkg' diff --git a/packages/playground/dynamic-import/nested/index.js b/packages/playground/dynamic-import/nested/index.js index 5518c56a35a2cc..f84ec00380d604 100644 --- a/packages/playground/dynamic-import/nested/index.js +++ b/packages/playground/dynamic-import/nested/index.js @@ -70,6 +70,11 @@ document.querySelector('.css').addEventListener('click', async () => { text('.view', 'dynamic import css') }) +document.querySelector('.pkg-css').addEventListener('click', async () => { + await import('./deps') + text('.view', 'dynamic import css in package') +}) + function text(el, text) { document.querySelector(el).textContent = text } diff --git a/packages/playground/dynamic-import/package.json b/packages/playground/dynamic-import/package.json index a6b6d5f863f1b8..3aac1090af5be4 100644 --- a/packages/playground/dynamic-import/package.json +++ b/packages/playground/dynamic-import/package.json @@ -6,6 +6,10 @@ "dev": "vite", "build": "vite build", "debug": "node --inspect-brk ../../vite/bin/vite", - "preview": "vite preview" + "preview": "vite preview", + "postinstall": "ts-node ../../../scripts/patchFileDeps.ts" + }, + "dependencies": { + "pkg": "file:./pkg" } } diff --git a/packages/playground/dynamic-import/pkg/index.js b/packages/playground/dynamic-import/pkg/index.js new file mode 100644 index 00000000000000..20f705c0b4a8c9 --- /dev/null +++ b/packages/playground/dynamic-import/pkg/index.js @@ -0,0 +1 @@ +import('./pkg.css') diff --git a/packages/playground/dynamic-import/pkg/package.json b/packages/playground/dynamic-import/pkg/package.json new file mode 100644 index 00000000000000..1eab564572e245 --- /dev/null +++ b/packages/playground/dynamic-import/pkg/package.json @@ -0,0 +1,7 @@ +{ + "name": "pkg", + "type": "module", + "private": true, + "version": "1.0.0", + "main": "index.js" +} diff --git a/packages/playground/dynamic-import/pkg/pkg.css b/packages/playground/dynamic-import/pkg/pkg.css new file mode 100644 index 00000000000000..349d669b6829bf --- /dev/null +++ b/packages/playground/dynamic-import/pkg/pkg.css @@ -0,0 +1,3 @@ +.pkg-css { + color: blue; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73be476b1c911b..e856099869f585 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -185,6 +185,12 @@ importers: specifiers: {} packages/playground/dynamic-import: + specifiers: + pkg: file:./pkg + dependencies: + pkg: link:pkg + + packages/playground/dynamic-import/pkg: specifiers: {} packages/playground/env: From 09748008aaeeec191b8707ad7e51c1130b9f788e Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Sat, 30 Apr 2022 22:18:50 +0900 Subject: [PATCH 2/4] fix(css): dynamic import css in package fetches removed js --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index ff315d008f57a5..0fddf402673f54 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -118,7 +118,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { async transform(source, importer) { if ( importer.includes('node_modules') && - !source.includes('import.meta.glob') + !source.includes('import.meta.glob') && + !/import\s*\(/.test(source) ) { return } From 9f1e2e0ce7506b39821e8aa547e8c8c70713d8c2 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Sun, 1 May 2022 16:10:59 +0900 Subject: [PATCH 3/4] refactor: extract dynamicImportPrefixRegex to variable --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 0fddf402673f54..3685091b43d554 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -24,6 +24,8 @@ export const preloadBaseMarker = `__VITE_PRELOAD_BASE__` const preloadHelperId = 'vite/preload-helper' const preloadMarkerWithQuote = `"${preloadMarker}"` as const +const dynamicImportPrefixRegex = /import\s*\(/ + /** * Helper for preloading CSS and direct imports of async chunks in parallel to * the async chunk itself. @@ -119,7 +121,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { if ( importer.includes('node_modules') && !source.includes('import.meta.glob') && - !/import\s*\(/.test(source) + !dynamicImportPrefixRegex.test(source) ) { return } From 06507ce2208550d298750f77a084a30b81c5dcfa Mon Sep 17 00:00:00 2001 From: patak-dev Date: Sun, 1 May 2022 20:21:30 +0200 Subject: [PATCH 4/4] chore: Regex -> RE naming convention --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 3685091b43d554..7e684db2b4cc6b 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -24,7 +24,7 @@ export const preloadBaseMarker = `__VITE_PRELOAD_BASE__` const preloadHelperId = 'vite/preload-helper' const preloadMarkerWithQuote = `"${preloadMarker}"` as const -const dynamicImportPrefixRegex = /import\s*\(/ +const dynamicImportPrefixRE = /import\s*\(/ /** * Helper for preloading CSS and direct imports of async chunks in parallel to @@ -121,7 +121,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { if ( importer.includes('node_modules') && !source.includes('import.meta.glob') && - !dynamicImportPrefixRegex.test(source) + !dynamicImportPrefixRE.test(source) ) { return }