From 65817ee4e8f5e77d2cb29786d227831b87f8d54a Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 9 Dec 2021 17:05:11 -0500 Subject: [PATCH 01/15] test: Add failing tests for async css modules --- packages/playground/css/__tests__/css.spec.ts | 8 ++++++++ packages/playground/css/async-modules/base.js | 10 ++++++++++ packages/playground/css/async-modules/black.module.css | 3 +++ packages/playground/css/async-modules/blue.js | 4 ++++ packages/playground/css/async-modules/blue.module.css | 3 +++ packages/playground/css/async-modules/red.js | 4 ++++ packages/playground/css/async-modules/red.module.css | 3 +++ packages/playground/css/main.js | 4 ++++ 8 files changed, 39 insertions(+) create mode 100644 packages/playground/css/async-modules/base.js create mode 100644 packages/playground/css/async-modules/black.module.css create mode 100644 packages/playground/css/async-modules/blue.js create mode 100644 packages/playground/css/async-modules/blue.module.css create mode 100644 packages/playground/css/async-modules/red.js create mode 100644 packages/playground/css/async-modules/red.module.css diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index f1eb66e097ad86..330b2d08c399c0 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -284,6 +284,14 @@ test('treeshaken async chunk', async () => { } }) +test('async css modules', async () => { + const blue = await page.$('.async-modules-blue') + const red = await page.$('.async-modules-red') + + expect(await getColor(blue)).toBe('blue') + expect(await getColor(red)).toBe('red') +}) + test('PostCSS dir-dependency', async () => { const el1 = await page.$('.dir-dep') const el2 = await page.$('.dir-dep-2') diff --git a/packages/playground/css/async-modules/base.js b/packages/playground/css/async-modules/base.js new file mode 100644 index 00000000000000..95ea925aa95b97 --- /dev/null +++ b/packages/playground/css/async-modules/base.js @@ -0,0 +1,10 @@ +import styles from './black.module.css' + +export function baseAsync(className, color) { + const div = document.createElement('div') + div.className = `${styles.black} ${className} async-modules-${color}` + document.body.appendChild(div) + div.textContent = `async css modules (${color}) ${ + getComputedStyle(div).color + }` +} diff --git a/packages/playground/css/async-modules/black.module.css b/packages/playground/css/async-modules/black.module.css new file mode 100644 index 00000000000000..2491c2d607632b --- /dev/null +++ b/packages/playground/css/async-modules/black.module.css @@ -0,0 +1,3 @@ +.black { + color: black; +} diff --git a/packages/playground/css/async-modules/blue.js b/packages/playground/css/async-modules/blue.js new file mode 100644 index 00000000000000..adc92a5775068b --- /dev/null +++ b/packages/playground/css/async-modules/blue.js @@ -0,0 +1,4 @@ +import { baseAsync } from './base' +import styles from './blue.module.css' + +baseAsync(styles.blue, 'blue') diff --git a/packages/playground/css/async-modules/blue.module.css b/packages/playground/css/async-modules/blue.module.css new file mode 100644 index 00000000000000..659edcf511a928 --- /dev/null +++ b/packages/playground/css/async-modules/blue.module.css @@ -0,0 +1,3 @@ +.blue { + color: blue; +} diff --git a/packages/playground/css/async-modules/red.js b/packages/playground/css/async-modules/red.js new file mode 100644 index 00000000000000..2a98267dedfdf6 --- /dev/null +++ b/packages/playground/css/async-modules/red.js @@ -0,0 +1,4 @@ +import { baseAsync } from './base' +import styles from './red.module.css' + +baseAsync(styles.red, 'red') diff --git a/packages/playground/css/async-modules/red.module.css b/packages/playground/css/async-modules/red.module.css new file mode 100644 index 00000000000000..c6dd2c88fabe35 --- /dev/null +++ b/packages/playground/css/async-modules/red.module.css @@ -0,0 +1,3 @@ +.red { + color: red; +} diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index 24a278c8687940..671f5a551b907b 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -68,3 +68,7 @@ if (import.meta.env.DEV) { // inlined import inlined from './inlined.css?inline' text('.inlined-code', inlined) + +// async css modules +import('./async-modules/blue') +import('./async-modules/red') From 16ad8821349e05ab591906605eeeb076a79009e5 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Wed, 29 Dec 2021 20:08:39 +0800 Subject: [PATCH 02/15] wip: dfs add deps --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index bb5b50f93cdbb9..f8782fb8b22a9f 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -274,11 +274,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { const ownerFilename = chunk.fileName // literal import - trace direct imports and add to deps const analyzed: Set = new Set() + // dfs add deps let the upper-level had a higher priority (#3924) const addDeps = (filename: string) => { if (filename === ownerFilename) return if (analyzed.has(filename)) return analyzed.add(filename) const chunk = bundle[filename] as OutputChunk | undefined + console.log('deps', filename, chunk?.imports) if (chunk) { deps.add(chunk.fileName) const cssFiles = chunkToEmittedCssFileMap.get(chunk) @@ -309,6 +311,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { path.posix.dirname(chunk.fileName), url ) + console.log(); + console.log('start deps', normalizedFile); addDeps(normalizedFile) } @@ -319,6 +323,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { } if (markPos > 0) { + console.log() + console.log('generate', name, [...deps]) s.overwrite( markPos - 1, markPos + preloadMarker.length + 1, From 4e10f6fd9acc84258659d394f975f78a72ce99c7 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Wed, 29 Dec 2021 21:10:48 +0800 Subject: [PATCH 03/15] feat: dfs add deps let the upper-level had a higher priority --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index f8782fb8b22a9f..910f962d7cd2b8 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -280,8 +280,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { if (analyzed.has(filename)) return analyzed.add(filename) const chunk = bundle[filename] as OutputChunk | undefined - console.log('deps', filename, chunk?.imports) if (chunk) { + chunk.imports.forEach(addDeps) deps.add(chunk.fileName) const cssFiles = chunkToEmittedCssFileMap.get(chunk) if (cssFiles) { @@ -289,7 +289,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } - chunk.imports.forEach(addDeps) } else { const removedPureCssFiles = removedPureCssFilesCache.get(config)! @@ -311,8 +310,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { path.posix.dirname(chunk.fileName), url ) - console.log(); - console.log('start deps', normalizedFile); addDeps(normalizedFile) } @@ -323,8 +320,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { } if (markPos > 0) { - console.log() - console.log('generate', name, [...deps]) s.overwrite( markPos - 1, markPos + preloadMarker.length + 1, From 350ae16543497d0a59499e7642aaa284567bd58d Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Tue, 4 Jan 2022 22:03:51 +0800 Subject: [PATCH 04/15] test: feat more test --- packages/playground/css/__tests__/css.spec.ts | 4 ++++ packages/playground/css/async-modules/base2.js | 10 ++++++++++ packages/playground/css/async-modules/green.js | 6 ++++++ packages/playground/css/async-modules/green.module.css | 3 +++ packages/playground/css/main.js | 1 + 5 files changed, 24 insertions(+) create mode 100644 packages/playground/css/async-modules/base2.js create mode 100644 packages/playground/css/async-modules/green.js create mode 100644 packages/playground/css/async-modules/green.module.css diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index 330b2d08c399c0..baab12ff64fe68 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -287,9 +287,13 @@ test('treeshaken async chunk', async () => { test('async css modules', async () => { const blue = await page.$('.async-modules-blue') const red = await page.$('.async-modules-red') + const green = await page.$('.async-modules-green') + const blue2 = await page.$('.async-modules-blue2') expect(await getColor(blue)).toBe('blue') expect(await getColor(red)).toBe('red') + expect(await getColor(green)).toBe('green') + expect(await getColor(blue2)).toBe('blue') }) test('PostCSS dir-dependency', async () => { diff --git a/packages/playground/css/async-modules/base2.js b/packages/playground/css/async-modules/base2.js new file mode 100644 index 00000000000000..7de78ae8e06c47 --- /dev/null +++ b/packages/playground/css/async-modules/base2.js @@ -0,0 +1,10 @@ +import styles from './red.module.css' + +export function baseAsync(className, color) { + const div = document.createElement('div') + div.className = `${styles.red} ${className} async-modules-${color}` + document.body.appendChild(div) + div.textContent = `async css modules (${color}) ${ + getComputedStyle(div).color + }` +} diff --git a/packages/playground/css/async-modules/green.js b/packages/playground/css/async-modules/green.js new file mode 100644 index 00000000000000..412d8ff905cbab --- /dev/null +++ b/packages/playground/css/async-modules/green.js @@ -0,0 +1,6 @@ +import { baseAsync } from './base2' +import green from './green.module.css' +import blue from './blue.module.css' + +baseAsync(green.green, 'green') +baseAsync(blue.blue, 'blue2') diff --git a/packages/playground/css/async-modules/green.module.css b/packages/playground/css/async-modules/green.module.css new file mode 100644 index 00000000000000..fa95e11ba9ef9a --- /dev/null +++ b/packages/playground/css/async-modules/green.module.css @@ -0,0 +1,3 @@ +.green { + color: green; +} diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index 671f5a551b907b..7a755d6c93512c 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -72,3 +72,4 @@ text('.inlined-code', inlined) // async css modules import('./async-modules/blue') import('./async-modules/red') +import('./async-modules/green') From e6cd509372cf74d628d1c626f134ee1063188bd4 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 9 Dec 2021 17:05:11 -0500 Subject: [PATCH 05/15] test: Add failing tests for async css modules --- packages/playground/css/__tests__/css.spec.ts | 8 ++++++++ packages/playground/css/async-modules/base.js | 10 ++++++++++ packages/playground/css/async-modules/black.module.css | 3 +++ packages/playground/css/async-modules/blue.js | 4 ++++ packages/playground/css/async-modules/blue.module.css | 3 +++ packages/playground/css/async-modules/red.js | 4 ++++ packages/playground/css/async-modules/red.module.css | 3 +++ packages/playground/css/main.js | 4 ++++ 8 files changed, 39 insertions(+) create mode 100644 packages/playground/css/async-modules/base.js create mode 100644 packages/playground/css/async-modules/black.module.css create mode 100644 packages/playground/css/async-modules/blue.js create mode 100644 packages/playground/css/async-modules/blue.module.css create mode 100644 packages/playground/css/async-modules/red.js create mode 100644 packages/playground/css/async-modules/red.module.css diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index f1eb66e097ad86..330b2d08c399c0 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -284,6 +284,14 @@ test('treeshaken async chunk', async () => { } }) +test('async css modules', async () => { + const blue = await page.$('.async-modules-blue') + const red = await page.$('.async-modules-red') + + expect(await getColor(blue)).toBe('blue') + expect(await getColor(red)).toBe('red') +}) + test('PostCSS dir-dependency', async () => { const el1 = await page.$('.dir-dep') const el2 = await page.$('.dir-dep-2') diff --git a/packages/playground/css/async-modules/base.js b/packages/playground/css/async-modules/base.js new file mode 100644 index 00000000000000..95ea925aa95b97 --- /dev/null +++ b/packages/playground/css/async-modules/base.js @@ -0,0 +1,10 @@ +import styles from './black.module.css' + +export function baseAsync(className, color) { + const div = document.createElement('div') + div.className = `${styles.black} ${className} async-modules-${color}` + document.body.appendChild(div) + div.textContent = `async css modules (${color}) ${ + getComputedStyle(div).color + }` +} diff --git a/packages/playground/css/async-modules/black.module.css b/packages/playground/css/async-modules/black.module.css new file mode 100644 index 00000000000000..2491c2d607632b --- /dev/null +++ b/packages/playground/css/async-modules/black.module.css @@ -0,0 +1,3 @@ +.black { + color: black; +} diff --git a/packages/playground/css/async-modules/blue.js b/packages/playground/css/async-modules/blue.js new file mode 100644 index 00000000000000..adc92a5775068b --- /dev/null +++ b/packages/playground/css/async-modules/blue.js @@ -0,0 +1,4 @@ +import { baseAsync } from './base' +import styles from './blue.module.css' + +baseAsync(styles.blue, 'blue') diff --git a/packages/playground/css/async-modules/blue.module.css b/packages/playground/css/async-modules/blue.module.css new file mode 100644 index 00000000000000..659edcf511a928 --- /dev/null +++ b/packages/playground/css/async-modules/blue.module.css @@ -0,0 +1,3 @@ +.blue { + color: blue; +} diff --git a/packages/playground/css/async-modules/red.js b/packages/playground/css/async-modules/red.js new file mode 100644 index 00000000000000..2a98267dedfdf6 --- /dev/null +++ b/packages/playground/css/async-modules/red.js @@ -0,0 +1,4 @@ +import { baseAsync } from './base' +import styles from './red.module.css' + +baseAsync(styles.red, 'red') diff --git a/packages/playground/css/async-modules/red.module.css b/packages/playground/css/async-modules/red.module.css new file mode 100644 index 00000000000000..c6dd2c88fabe35 --- /dev/null +++ b/packages/playground/css/async-modules/red.module.css @@ -0,0 +1,3 @@ +.red { + color: red; +} diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index 24a278c8687940..671f5a551b907b 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -68,3 +68,7 @@ if (import.meta.env.DEV) { // inlined import inlined from './inlined.css?inline' text('.inlined-code', inlined) + +// async css modules +import('./async-modules/blue') +import('./async-modules/red') From 223148df877af9a47a8f61e92c21f39c723b30d3 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 6 Jan 2022 00:19:33 -0500 Subject: [PATCH 06/15] test: Add test for mixed css and css modules --- packages/playground/css/__tests__/css.spec.ts | 8 ++++++++ packages/playground/css/async-modules-and-css/base.css | 4 ++++ packages/playground/css/async-modules-and-css/black.js | 9 +++++++++ .../css/async-modules-and-css/black.module.css | 3 +++ packages/playground/css/async-modules-and-css/blue.js | 9 +++++++++ .../playground/css/async-modules-and-css/blue.module.css | 3 +++ packages/playground/css/main.js | 4 ++++ 7 files changed, 40 insertions(+) create mode 100644 packages/playground/css/async-modules-and-css/base.css create mode 100644 packages/playground/css/async-modules-and-css/black.js create mode 100644 packages/playground/css/async-modules-and-css/black.module.css create mode 100644 packages/playground/css/async-modules-and-css/blue.js create mode 100644 packages/playground/css/async-modules-and-css/blue.module.css diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index 330b2d08c399c0..09d6dd6984f8ef 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -292,6 +292,14 @@ test('async css modules', async () => { expect(await getColor(red)).toBe('red') }) +test('async css modules with normal css', async () => { + const black = await page.$('.async-modules-and-css-black') + const blue = await page.$('.async-modules-and-css-blue') + + expect(await getColor(black)).toBe('black') + expect(await getColor(blue)).toBe('blue') +}) + test('PostCSS dir-dependency', async () => { const el1 = await page.$('.dir-dep') const el2 = await page.$('.dir-dep-2') diff --git a/packages/playground/css/async-modules-and-css/base.css b/packages/playground/css/async-modules-and-css/base.css new file mode 100644 index 00000000000000..c82e5de33f9bae --- /dev/null +++ b/packages/playground/css/async-modules-and-css/base.css @@ -0,0 +1,4 @@ +.base { + font-size: 1rem; + color: hotpink; +} diff --git a/packages/playground/css/async-modules-and-css/black.js b/packages/playground/css/async-modules-and-css/black.js new file mode 100644 index 00000000000000..0c1ddfa45aa1c2 --- /dev/null +++ b/packages/playground/css/async-modules-and-css/black.js @@ -0,0 +1,9 @@ +import './base.css' +import styles from './black.module.css' + +const div = document.createElement('div') +div.className = `base ${styles.black} async-modules-and-css-black` +document.body.appendChild(div) +div.textContent = `async css modules and normal css (black) ${ + getComputedStyle(div).color +}` diff --git a/packages/playground/css/async-modules-and-css/black.module.css b/packages/playground/css/async-modules-and-css/black.module.css new file mode 100644 index 00000000000000..2491c2d607632b --- /dev/null +++ b/packages/playground/css/async-modules-and-css/black.module.css @@ -0,0 +1,3 @@ +.black { + color: black; +} diff --git a/packages/playground/css/async-modules-and-css/blue.js b/packages/playground/css/async-modules-and-css/blue.js new file mode 100644 index 00000000000000..cbfc061fddd059 --- /dev/null +++ b/packages/playground/css/async-modules-and-css/blue.js @@ -0,0 +1,9 @@ +import './base.css' +import styles from './blue.module.css' + +const div = document.createElement('div') +div.className = `base ${styles.blue} async-modules-and-css-blue` +document.body.appendChild(div) +div.textContent = `async css modules and normal css (blue) ${ + getComputedStyle(div).color +}` diff --git a/packages/playground/css/async-modules-and-css/blue.module.css b/packages/playground/css/async-modules-and-css/blue.module.css new file mode 100644 index 00000000000000..659edcf511a928 --- /dev/null +++ b/packages/playground/css/async-modules-and-css/blue.module.css @@ -0,0 +1,3 @@ +.blue { + color: blue; +} diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js index 671f5a551b907b..9fe63bdc36e580 100644 --- a/packages/playground/css/main.js +++ b/packages/playground/css/main.js @@ -72,3 +72,7 @@ text('.inlined-code', inlined) // async css modules import('./async-modules/blue') import('./async-modules/red') + +// async css module with normal css +import('./async-modules-and-css/black') +import('./async-modules-and-css/blue') From 1e785012acc90ead475b311ca13ea7f7f4798f89 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Sun, 9 Jan 2022 15:07:24 +0800 Subject: [PATCH 07/15] test: fix test case expect --- packages/playground/css/__tests__/css.spec.ts | 4 +++- packages/playground/css/async-modules/base2.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index 33c40eb2a1a83d..854da97ed190ce 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -293,7 +293,9 @@ test('async css modules', async () => { expect(await getColor(blue)).toBe('blue') expect(await getColor(red)).toBe('red') expect(await getColor(green)).toBe('green') - expect(await getColor(blue2)).toBe('blue') + // because that loaded blue > red first + // and can't change the style order + expect(await getColor(blue2)).toBe('red') expect(await getColor(blue)).toBe('blue') expect(await getColor(red)).toBe('red') }) diff --git a/packages/playground/css/async-modules/base2.js b/packages/playground/css/async-modules/base2.js index 7de78ae8e06c47..6d28b9c6bbed5b 100644 --- a/packages/playground/css/async-modules/base2.js +++ b/packages/playground/css/async-modules/base2.js @@ -4,7 +4,7 @@ export function baseAsync(className, color) { const div = document.createElement('div') div.className = `${styles.red} ${className} async-modules-${color}` document.body.appendChild(div) - div.textContent = `async css modules (${color}) ${ + div.textContent = `async css modules2 (${color}) ${ getComputedStyle(div).color }` } From 583ff47443f346732a8881d4c3d33751efa19585 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Mon, 10 Jan 2022 20:14:20 +0800 Subject: [PATCH 08/15] fix: back dfs --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 910f962d7cd2b8..a2a5acca536e18 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -281,7 +281,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { analyzed.add(filename) const chunk = bundle[filename] as OutputChunk | undefined if (chunk) { - chunk.imports.forEach(addDeps) deps.add(chunk.fileName) const cssFiles = chunkToEmittedCssFileMap.get(chunk) if (cssFiles) { @@ -289,6 +288,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } + chunk.imports.forEach(addDeps) } else { const removedPureCssFiles = removedPureCssFilesCache.get(config)! From 71444287fda17ef2f910b187df4e9b1d62d2513c Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Mon, 10 Jan 2022 22:32:32 +0800 Subject: [PATCH 09/15] wip: build had dev load behavior --- packages/playground/css/async-modules/blue.js | 2 +- packages/vite/src/node/plugins/importAnalysisBuild.ts | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/playground/css/async-modules/blue.js b/packages/playground/css/async-modules/blue.js index adc92a5775068b..30f8adc83e7189 100644 --- a/packages/playground/css/async-modules/blue.js +++ b/packages/playground/css/async-modules/blue.js @@ -1,4 +1,4 @@ -import { baseAsync } from './base' import styles from './blue.module.css' +import { baseAsync } from './base' baseAsync(styles.blue, 'blue') diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index a2a5acca536e18..e49aa04572722b 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -288,7 +288,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } - chunk.imports.forEach(addDeps) + // TODO more accurate judgment + const isModuleCSS = (id: string) => + Number(id.includes('.module.')) + chunk.imports + .sort((a, b) => isModuleCSS(a) - isModuleCSS(b)) + .forEach(addDeps) } else { const removedPureCssFiles = removedPureCssFilesCache.get(config)! From 6a5c2dcbc82c01573cbb3e86951309920fb994c8 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Sat, 15 Jan 2022 19:28:45 +0800 Subject: [PATCH 10/15] wip: isModuleCss --- packages/vite/src/node/plugins/css.ts | 20 +++++++++++++++---- .../src/node/plugins/importAnalysisBuild.ts | 7 +++---- 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 8f7dbdae363fe8..38485fb2e7069b 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -120,6 +120,8 @@ const cssModulesCache = new WeakMap< Map> >() +export const cssModulesSets = new WeakMap>() + export const chunkToEmittedCssFileMap = new WeakMap< RenderedChunk, Set @@ -265,6 +267,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // styles initialization in buildStart causes a styling loss in watch const styles: Map = new Map() let pureCssChunks: Set + let cssModulesSet: Set // when there are multiple rollup outputs and extracting CSS, only emit once, // since output formats have no effect on the generated CSS. @@ -278,6 +281,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // Ensure new caches for every build (i.e. rebuilding in watch mode) pureCssChunks = new Set() outputToExtractedCSSMap = new Map() + + cssModulesSet = new Set() + cssModulesSets.set(config, cssModulesSet) hasEmitted = false }, @@ -356,8 +362,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { async renderChunk(code, chunk, opts) { let chunkCSS = '' let isPureCssChunk = true + let isModuleCssChunk = false const ids = Object.keys(chunk.modules) for (const id of ids) { + if (cssModuleRE.test(id)) { + isModuleCssChunk = true + } if ( !isCSSRequest(id) || cssModuleRE.test(id) || @@ -427,10 +437,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { type: 'asset', source: chunkCSS }) - chunkToEmittedCssFileMap.set( - chunk, - new Set([this.getFileName(fileHandle)]) - ) + const assetFileName = this.getFileName(fileHandle) + if (isModuleCssChunk) { + cssModulesSet.add(assetFileName) + } + + chunkToEmittedCssFileMap.set(chunk, new Set([assetFileName])) } else if (!config.build.ssr) { // legacy build, inline css chunkCSS = await processChunkCSS(chunkCSS, { diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index e49aa04572722b..a8da4aa3f4d4a9 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -7,6 +7,7 @@ import { init, parse as parseImports } from 'es-module-lexer' import type { OutputChunk } from 'rollup' import { chunkToEmittedCssFileMap, + cssModulesSets, isCSSRequest, removedPureCssFilesCache } from './css' @@ -93,7 +94,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { ? `'modulepreload'` : `(${detectScriptRel.toString()})()` const preloadCode = `const scriptRel = ${scriptRel};const seen = {};const base = '${preloadBaseMarker}';export const ${preloadMethod} = ${preload.toString()}` - return { name: 'vite:build-import-analysis', @@ -274,7 +274,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { const ownerFilename = chunk.fileName // literal import - trace direct imports and add to deps const analyzed: Set = new Set() - // dfs add deps let the upper-level had a higher priority (#3924) + const cssModulesSet = cssModulesSets.get(config)! const addDeps = (filename: string) => { if (filename === ownerFilename) return if (analyzed.has(filename)) return @@ -288,9 +288,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } - // TODO more accurate judgment const isModuleCSS = (id: string) => - Number(id.includes('.module.')) + Number(cssModulesSet.has(id)) chunk.imports .sort((a, b) => isModuleCSS(a) - isModuleCSS(b)) .forEach(addDeps) From 0336e9acf963387924f8d7b4016744c04b528bc9 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Sat, 15 Jan 2022 22:49:48 +0800 Subject: [PATCH 11/15] wip: split load moudle with breadth --- packages/vite/src/node/plugins/css.ts | 30 ++++++++-------- .../src/node/plugins/importAnalysisBuild.ts | 35 +++++++++++++++---- 2 files changed, 42 insertions(+), 23 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 38485fb2e7069b..2ebe0212dd2b43 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -362,24 +362,25 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { async renderChunk(code, chunk, opts) { let chunkCSS = '' let isPureCssChunk = true - let isModuleCssChunk = false + let moduleCssCount = 0 const ids = Object.keys(chunk.modules) for (const id of ids) { - if (cssModuleRE.test(id)) { - isModuleCssChunk = true + const isCssModule = cssModuleRE.test(id) + if (isCssModule) { + moduleCssCount++ } - if ( - !isCSSRequest(id) || - cssModuleRE.test(id) || - commonjsProxyRE.test(id) - ) { + if (!isCSSRequest(id) || isCssModule || commonjsProxyRE.test(id)) { isPureCssChunk = false } if (styles.has(id)) { chunkCSS += styles.get(id) } } - + // if module css generate javescript module + // will only had module css file + if (moduleCssCount === ids.length) { + cssModulesSet.add(chunk.fileName) + } if (!chunkCSS) { return null } @@ -420,7 +421,6 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { } return css } - if (config.build.cssCodeSplit) { if (isPureCssChunk) { // this is a shared CSS-only chunk that is empty. @@ -437,12 +437,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { type: 'asset', source: chunkCSS }) - const assetFileName = this.getFileName(fileHandle) - if (isModuleCssChunk) { - cssModulesSet.add(assetFileName) - } - - chunkToEmittedCssFileMap.set(chunk, new Set([assetFileName])) + chunkToEmittedCssFileMap.set( + chunk, + new Set([this.getFileName(fileHandle)]) + ) } else if (!config.build.ssr) { // legacy build, inline css chunkCSS = await processChunkCSS(chunkCSS, { diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index a8da4aa3f4d4a9..755cff77ea0f29 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -237,6 +237,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { return } + const cssModulesSet = cssModulesSets.get(config)! + const isCss = (id: string) => + cssModulesSet.has(id) || // is module css + isCSSRequest(id) + for (const file in bundle) { const chunk = bundle[file] // can't use chunk.dynamicImports.length here since some modules e.g. @@ -274,13 +279,17 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { const ownerFilename = chunk.fileName // literal import - trace direct imports and add to deps const analyzed: Set = new Set() - const cssModulesSet = cssModulesSets.get(config)! const addDeps = (filename: string) => { if (filename === ownerFilename) return if (analyzed.has(filename)) return analyzed.add(filename) const chunk = bundle[filename] as OutputChunk | undefined if (chunk) { + chunk.imports + .sort((a, b) => +isCss(b) - +isCss(a)) + .forEach((moduleName) => { + addDeps(moduleName) + }) deps.add(chunk.fileName) const cssFiles = chunkToEmittedCssFileMap.get(chunk) if (cssFiles) { @@ -288,11 +297,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } - const isModuleCSS = (id: string) => - Number(cssModulesSet.has(id)) - chunk.imports - .sort((a, b) => isModuleCSS(a) - isModuleCSS(b)) - .forEach(addDeps) } else { const removedPureCssFiles = removedPureCssFilesCache.get(config)! @@ -324,6 +328,23 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { } if (markPos > 0) { + // split module load like browser(breadth first) + let loadOnceCache: string[] = [] + const splitDepsLoadingOrder: string[] = [] + const pushSplitDepsLoadingOrder = () => + loadOnceCache.length && + splitDepsLoadingOrder.push( + `[${loadOnceCache.map((d) => JSON.stringify(d)).join(',')}]` + ) + deps.forEach((dep) => { + if (!isCss(dep)) { + pushSplitDepsLoadingOrder() + loadOnceCache = [] + } + loadOnceCache.push(dep) + }) + pushSplitDepsLoadingOrder() // push last time load module + s.overwrite( markPos - 1, markPos + preloadMarker.length + 1, @@ -332,7 +353,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.size > 1 || // main chunk is removed (hasRemovedPureCssChunk && deps.size > 0) - ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]` + ? `[${splitDepsLoadingOrder.join(',')}]` : `[]` ) } From 9bd1ba6fb0494134d4503a7557e5ff15b3f21065 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Sun, 16 Jan 2022 21:13:44 +0800 Subject: [PATCH 12/15] wip: runtime --- .../src/node/plugins/importAnalysisBuild.ts | 95 ++++++++++--------- 1 file changed, 52 insertions(+), 43 deletions(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 755cff77ea0f29..9fa63d66c7741d 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -42,45 +42,53 @@ function detectScriptRel() { } declare const scriptRel: string -function preload(baseModule: () => Promise<{}>, deps?: string[]) { +function preload(baseModule: () => Promise<{}>, splitDeps?: string[][]) { // @ts-ignore - if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) { + if (!__VITE_IS_MODERN__ || !splitDeps || splitDeps.length === 0) { return baseModule() } + const LoadOneTime = (deps: string[]) => { + return Promise.all( + deps.map((dep) => { + const isCss = dep.endsWith('.css') + const cssSelector = isCss ? '[rel="stylesheet"]' : '' + // @ts-ignore check if the file is already preloaded by SSR markup + if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) { + return + } + // @ts-ignore + const link = document.createElement('link') + // @ts-ignore + link.rel = isCss ? 'stylesheet' : scriptRel + if (!isCss) { + link.as = 'script' + link.crossOrigin = '' + } + link.href = dep + // @ts-ignore + document.head.appendChild(link) + if (isCss) { + return new Promise((res, rej) => { + link.addEventListener('load', res) + link.addEventListener('error', rej) + }) + } + }) + ) + } - return Promise.all( - deps.map((dep) => { - // @ts-ignore - dep = `${base}${dep}` - // @ts-ignore - if (dep in seen) return - // @ts-ignore - seen[dep] = true - const isCss = dep.endsWith('.css') - const cssSelector = isCss ? '[rel="stylesheet"]' : '' - // @ts-ignore check if the file is already preloaded by SSR markup - if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) { - return - } - // @ts-ignore - const link = document.createElement('link') - // @ts-ignore - link.rel = isCss ? 'stylesheet' : scriptRel - if (!isCss) { - link.as = 'script' - link.crossOrigin = '' - } - link.href = dep - // @ts-ignore - document.head.appendChild(link) - if (isCss) { - return new Promise((res, rej) => { - link.addEventListener('load', res) - link.addEventListener('error', rej) - }) - } - }) - ).then(() => baseModule()) + splitDeps + .reduce((queue, deps) => { + const needLoadDep = deps + // @ts-ignore + .map((dep) => `${base}${dep}`) + // @ts-ignore + .filter((dep) => (dep in seen ? false : (seen[dep] = true))) + return needLoadDep.length + ? queue.then(() => LoadOneTime(needLoadDep)) + : queue + }, Promise.resolve([]) as Promise) + .then(() => baseModule()) } /** @@ -239,8 +247,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { const cssModulesSet = cssModulesSets.get(config)! const isCss = (id: string) => - cssModulesSet.has(id) || // is module css - isCSSRequest(id) + isCSSRequest(id) ? 2 : cssModulesSet.has(id) ? 1 : 0 for (const file in bundle) { const chunk = bundle[file] @@ -285,11 +292,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { analyzed.add(filename) const chunk = bundle[filename] as OutputChunk | undefined if (chunk) { - chunk.imports - .sort((a, b) => +isCss(b) - +isCss(a)) - .forEach((moduleName) => { - addDeps(moduleName) - }) deps.add(chunk.fileName) const cssFiles = chunkToEmittedCssFileMap.get(chunk) if (cssFiles) { @@ -297,6 +299,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } + chunk.imports + .sort((a, b) => isCss(b) - isCss(a)) + .forEach((moduleName) => { + addDeps(moduleName) + }) } else { const removedPureCssFiles = removedPureCssFilesCache.get(config)! @@ -338,10 +345,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { ) deps.forEach((dep) => { if (!isCss(dep)) { + loadOnceCache.push(dep) pushSplitDepsLoadingOrder() loadOnceCache = [] + } else { + loadOnceCache.push(dep) } - loadOnceCache.push(dep) }) pushSplitDepsLoadingOrder() // push last time load module From aaf89ec49b40c86fa41cd20d1b90617a8f30a181 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Mon, 21 Feb 2022 20:58:17 +0800 Subject: [PATCH 13/15] feat: split module css chunk with in js chunk or is js chunk --- .../css/async-modules-and-css/black.js | 2 +- .../css/async-modules-and-css/blue.js | 2 +- .../{base.css => hotpink.css} | 2 +- packages/vite/src/node/plugins/css.ts | 31 ++++++++++++++----- .../src/node/plugins/importAnalysisBuild.ts | 27 +++++++++++++--- 5 files changed, 48 insertions(+), 16 deletions(-) rename packages/playground/css/async-modules-and-css/{base.css => hotpink.css} (78%) diff --git a/packages/playground/css/async-modules-and-css/black.js b/packages/playground/css/async-modules-and-css/black.js index 0c1ddfa45aa1c2..f45c0c0fc9dc2b 100644 --- a/packages/playground/css/async-modules-and-css/black.js +++ b/packages/playground/css/async-modules-and-css/black.js @@ -1,5 +1,5 @@ -import './base.css' import styles from './black.module.css' +import './hotpink.css' const div = document.createElement('div') div.className = `base ${styles.black} async-modules-and-css-black` diff --git a/packages/playground/css/async-modules-and-css/blue.js b/packages/playground/css/async-modules-and-css/blue.js index cbfc061fddd059..be865427782cf3 100644 --- a/packages/playground/css/async-modules-and-css/blue.js +++ b/packages/playground/css/async-modules-and-css/blue.js @@ -1,4 +1,4 @@ -import './base.css' +import './hotpink.css' import styles from './blue.module.css' const div = document.createElement('div') diff --git a/packages/playground/css/async-modules-and-css/base.css b/packages/playground/css/async-modules-and-css/hotpink.css similarity index 78% rename from packages/playground/css/async-modules-and-css/base.css rename to packages/playground/css/async-modules-and-css/hotpink.css index c82e5de33f9bae..b10defd3d5b152 100644 --- a/packages/playground/css/async-modules-and-css/base.css +++ b/packages/playground/css/async-modules-and-css/hotpink.css @@ -1,4 +1,4 @@ -.base { +.hotpink { font-size: 1rem; color: hotpink; } diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 0df21deac378fa..c4be7965654090 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -120,7 +120,13 @@ const cssModulesCache = new WeakMap< Map> >() -export const cssModulesSets = new WeakMap>() +export const cssModulesSets = new WeakMap< + ResolvedConfig, + { + isJSChunk: Set // css module is js chunk + inJSChunk: Set // css module in js chunk + } +>() export const chunkToEmittedCssFileMap = new WeakMap< RenderedChunk, @@ -267,7 +273,8 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { // styles initialization in buildStart causes a styling loss in watch const styles: Map = new Map() let pureCssChunks: Set - let cssModulesSet: Set + let cssModulesIsJSChunkSet: Set + let cssModulesInJSChunkSet: Set // when there are multiple rollup outputs and extracting CSS, only emit once, // since output formats have no effect on the generated CSS. @@ -282,8 +289,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { pureCssChunks = new Set() outputToExtractedCSSMap = new Map() - cssModulesSet = new Set() - cssModulesSets.set(config, cssModulesSet) + cssModulesIsJSChunkSet = new Set() + cssModulesInJSChunkSet = new Set() + cssModulesSets.set(config, { + isJSChunk: cssModulesIsJSChunkSet, + inJSChunk: cssModulesInJSChunkSet + }) hasEmitted = false }, @@ -376,11 +387,15 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin { chunkCSS += styles.get(id) } } - // if module css generate javescript module - // will only had module css file - if (moduleCssCount === ids.length) { - cssModulesSet.add(chunk.fileName) + + if (moduleCssCount) { + if (moduleCssCount === ids.length) { + cssModulesIsJSChunkSet.add(chunk.fileName) + } else { + cssModulesInJSChunkSet.add(chunk.fileName) + } } + if (!chunkCSS) { return null } diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 9fa63d66c7741d..8d18befba6ae17 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -245,9 +245,23 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { return } - const cssModulesSet = cssModulesSets.get(config)! - const isCss = (id: string) => - isCSSRequest(id) ? 2 : cssModulesSet.has(id) ? 1 : 0 + const { + isJSChunk: cssModulesIsJSChunkSets, + inJSChunk: cssModulesInJSChunkSets + } = cssModulesSets.get(config)! + + // css > module css is chunk > module css in chunk > other + const getCssPriority = (id: string) => { + if (isCSSRequest(id)) { + return 3 + } else if (cssModulesIsJSChunkSets.has(id)) { + return 2 + } else if (cssModulesInJSChunkSets.has(id)) { + return 1 + } else { + return 0 + } + } for (const file in bundle) { const chunk = bundle[file] @@ -299,8 +313,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { deps.add(file) }) } + chunk.imports - .sort((a, b) => isCss(b) - isCss(a)) + .sort((a, b) => getCssPriority(b) - getCssPriority(a)) .forEach((moduleName) => { addDeps(moduleName) }) @@ -344,7 +359,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin { `[${loadOnceCache.map((d) => JSON.stringify(d)).join(',')}]` ) deps.forEach((dep) => { - if (!isCss(dep)) { + // js will load depth + // so if js file will load in next list + if (getCssPriority(dep) <= 1) { loadOnceCache.push(dep) pushSplitDepsLoadingOrder() loadOnceCache = [] From 8123465cef3b6fc3ba859420671463b8305a41e1 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Mon, 21 Feb 2022 22:52:50 +0800 Subject: [PATCH 14/15] chore: code --- packages/vite/src/node/plugins/importAnalysisBuild.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts index 8d18befba6ae17..23124bd721fe5b 100644 --- a/packages/vite/src/node/plugins/importAnalysisBuild.ts +++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts @@ -42,12 +42,14 @@ function detectScriptRel() { } declare const scriptRel: string +declare const base: string +declare const seen: Record function preload(baseModule: () => Promise<{}>, splitDeps?: string[][]) { // @ts-ignore if (!__VITE_IS_MODERN__ || !splitDeps || splitDeps.length === 0) { return baseModule() } - const LoadOneTime = (deps: string[]) => { + const LoadModules = (deps: string[]) => { return Promise.all( deps.map((dep) => { const isCss = dep.endsWith('.css') @@ -80,12 +82,10 @@ function preload(baseModule: () => Promise<{}>, splitDeps?: string[][]) { splitDeps .reduce((queue, deps) => { const needLoadDep = deps - // @ts-ignore .map((dep) => `${base}${dep}`) - // @ts-ignore .filter((dep) => (dep in seen ? false : (seen[dep] = true))) return needLoadDep.length - ? queue.then(() => LoadOneTime(needLoadDep)) + ? queue.then(() => LoadModules(needLoadDep)) : queue }, Promise.resolve([]) as Promise) .then(() => baseModule()) From 539091d5d52bee0ee1674f12b51fec1431f18384 Mon Sep 17 00:00:00 2001 From: poyoho <907415276@qq.com> Date: Mon, 21 Feb 2022 23:16:25 +0800 Subject: [PATCH 15/15] feat: test --- packages/playground/css/__tests__/css.spec.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/playground/css/__tests__/css.spec.ts b/packages/playground/css/__tests__/css.spec.ts index 07357d95a00640..b228536da1c4a2 100644 --- a/packages/playground/css/__tests__/css.spec.ts +++ b/packages/playground/css/__tests__/css.spec.ts @@ -293,19 +293,24 @@ test('treeshaken async chunk', async () => { }) test('async css modules', async () => { - const blue = await page.$('.async-modules-blue') - const red = await page.$('.async-modules-red') const green = await page.$('.async-modules-green') const blue2 = await page.$('.async-modules-blue2') + const red = await page.$('.async-modules-red') + const blue = await page.$('.async-modules-blue') + + const _black = await page.$('.async-modules-and-css-black') + const _blue = await page.$('.async-modules-and-css-blue') - expect(await getColor(blue)).toBe('blue') - expect(await getColor(red)).toBe('red') expect(await getColor(green)).toBe('green') + expect(await getColor(blue2)).toBe('blue') + + expect(await getColor(_black)).toBe('black') + expect(await getColor(_blue)).toBe('blue') + // because that loaded blue > red first // and can't change the style order - expect(await getColor(blue2)).toBe('red') - expect(await getColor(blue)).toBe('blue') - expect(await getColor(red)).toBe('red') + expect(await getColor(blue)).toBe('black') + expect(await getColor(red)).toBe('black') }) test('async css modules with normal css', async () => {