-
-
Notifications
You must be signed in to change notification settings - Fork 6.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: don't duplicate styles with dynamic import (fix #9967)
- Loading branch information
1 parent
9f8d79b
commit f40b86c
Showing
10 changed files
with
138 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
playground/css-dynamic-import/__tests__/css-dynamic-import.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import type { InlineConfig } from 'vite' | ||
import { build, createServer, preview } from 'vite' | ||
import { expect, test } from 'vitest' | ||
import { getColor, isBuild, isServe, page, ports, rootDir } from '~utils' | ||
|
||
const baseOptions = [ | ||
{ base: '', label: 'relative' }, | ||
{ base: '/', label: 'absolute' } | ||
] | ||
|
||
const getConfig = (base: string): InlineConfig => ({ | ||
base, | ||
root: rootDir, | ||
logLevel: 'silent', | ||
preview: { port: ports['css/dynamic-import'] } | ||
}) | ||
|
||
async function withBuild(base: string, fn: () => Promise<void>) { | ||
const config = getConfig(base) | ||
await build(config) | ||
const server = await preview(config) | ||
|
||
try { | ||
await page.goto(server.resolvedUrls.local[0]) | ||
await fn() | ||
} finally { | ||
server.httpServer.close() | ||
} | ||
} | ||
|
||
async function withServe(base: string, fn: () => Promise<void>) { | ||
const config = getConfig(base) | ||
const server = await createServer(config) | ||
await server.listen() | ||
await new Promise((r) => setTimeout(r, 500)) | ||
|
||
try { | ||
await page.goto(server.resolvedUrls.local[0]) | ||
await fn() | ||
} finally { | ||
await server.close() | ||
} | ||
} | ||
|
||
async function getChunks() { | ||
const links = await page.$$('link') | ||
const hrefs = await Promise.all(links.map((l) => l.evaluate((el) => el.href))) | ||
return hrefs.map((href) => { | ||
// drop hash part from the file name | ||
const [_, name, ext] = href.match(/assets\/([a-z]+)\..*?\.(.*)$/) | ||
return `${name}.${ext}` | ||
}) | ||
} | ||
|
||
baseOptions.forEach(({ base, label }) => { | ||
test.runIf(isBuild)( | ||
`doesn't duplicate dynamically imported css files when built with ${label} base`, | ||
async () => { | ||
await withBuild(base, async () => { | ||
await page.waitForSelector('.loaded', { state: 'attached' }) | ||
|
||
expect(await getColor('.css-dynamic-import')).toBe('green') | ||
expect(await getChunks()).toEqual([ | ||
'index.css', | ||
'dynamic.js', | ||
'dynamic.css', | ||
'static.js', | ||
'index.js' | ||
]) | ||
}) | ||
} | ||
) | ||
|
||
test.runIf(isServe)( | ||
`doesn't duplicate dynamically imported css files when served with ${label} base`, | ||
async () => { | ||
await withServe(base, async () => { | ||
await page.waitForSelector('.loaded', { state: 'attached' }) | ||
|
||
expect(await getColor('.css-dynamic-import')).toBe('green') | ||
// in serve there is no preloading | ||
expect(await getChunks()).toEqual([]) | ||
}) | ||
} | ||
) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
// this is automatically detected by playground/vitestSetup.ts and will replace | ||
// the default e2e test serve behavior | ||
|
||
// The server is started in the test, so we need to have a custom serve | ||
// function or a default server will be created | ||
export async function serve() { | ||
return { | ||
close: () => Promise.resolve() | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.css-dynamic-import { | ||
color: green; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import './dynamic.css' | ||
|
||
export const lazyLoad = async () => { | ||
await import('./static.js') | ||
document.body.classList.add('loaded') | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<p class="css-dynamic-import">This should be green</p> | ||
|
||
<script type="module" src="./index.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import './static.js' | ||
|
||
import('./dynamic.js').then(async ({ lazyLoad }) => { | ||
await lazyLoad() | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.css-dynamic-import { | ||
color: red; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import './static.css' | ||
|
||
export const foo = 'foo' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters