Vue/vite
1
0
Fork 0
mirror of https://github.com/vitejs/vite.git synced 2024-11-22 07:09:05 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(css): dynamic import css abnormal after build (#3333)

Browse Source 
* fix(css): dynamic import css abnormal after build

* fix(css): dynamic import css abnormal after build

* fix: dynamicIndex

* fix: typo & clear removedPureCssFiles in buildStart

* fix: depend on the resolved config

* fix: assert

Co-authored-by: patak <matias.capeletto@gmail.com>

* fix: assert

Co-authored-by: patak <matias.capeletto@gmail.com>

Co-authored-by: patak <matias.capeletto@gmail.com>
This commit is contained in:
Ruicong 2021-08-17 04:51:55 +08:00 committed by GitHub
parent dbfd931f13
commit b572f57ec0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
View File

@ -45,3 +45,13 @@ test('should load dynamic import with vars', async () => {
await page.click('.bar')
await untilUpdated(() => page.textContent('.view'), 'Bar view', true)
})
// dynamic import css
test('should load dynamic import with css', async () => {
await page.click('.css')
await untilUpdated(
() => page.$eval('.css', (node) => window.getComputedStyle(node).boxSizing),
'border-box',
true
)
})

2
packages/playground/dynamic-import/css/index.css Normal file
View File

@ -0,0 +1,2 @@
.css { box-sizing: border-box; }
.view { color: red; }

1
packages/playground/dynamic-import/index.html
View File

@ -7,6 +7,7 @@
<button class="mxdjson">Mxdjson</button>
<button class="issue-2658-1">Issue 2658 - 1</button>
<button class="issue-2658-2">Issue 2658 - 2</button>
<button class="css">css</button>
<div class="view"></div>

5
packages/playground/dynamic-import/nested/index.js
View File

@ -65,6 +65,11 @@ document.querySelector('.issue-2658-2').addEventListener('click', async () => {
text('.view', msg)
})
document.querySelector('.css').addEventListener('click', async () => {
await import('../css/index.css')
text('.view', 'dynamic import css')
})
function text(el, text) {
document.querySelector(el).textContent = text
}

9
packages/vite/src/node/plugins/css.ts
View File

@ -120,6 +120,11 @@ export const chunkToEmittedCssFileMap = new WeakMap<
Set<string>
>()
export const removedPureCssFilesCache = new WeakMap<
ResolvedConfig,
Map<string, RenderedChunk>
>()
const postcssConfigCache = new WeakMap<
ResolvedConfig,
PostCSSConfigResult | null
@ -150,6 +155,8 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
// Ensure a new cache for every build (i.e. rebuilding in watch mode)
moduleCache = new Map<string, Record<string, string>>()
cssModulesCache.set(config, moduleCache)
removedPureCssFilesCache.set(config, new Map<string, RenderedChunk>())
},
async transform(raw, id) {
@ -471,7 +478,9 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
)
}
}
const removedPureCssFiles = removedPureCssFilesCache.get(config)!
pureCssChunks.forEach((fileName) => {
removedPureCssFiles.set(fileName, bundle[fileName] as RenderedChunk)
delete bundle[fileName]
})
}

24
packages/vite/src/node/plugins/importAnalysisBuild.ts
View File

@ -4,7 +4,7 @@ import { Plugin } from '../plugin'
import MagicString from 'magic-string'
import { ImportSpecifier, init, parse as parseImports } from 'es-module-lexer'
import { OutputChunk } from 'rollup'
import { chunkToEmittedCssFileMap } from './css'
import { chunkToEmittedCssFileMap, removedPureCssFilesCache } from './css'
import { transformImportGlob } from '../importGlob'
/**
@ -232,10 +232,11 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
if (imports.length) {
const s = new MagicString(code)
for (let index = 0; index < imports.length; index++) {
const { s: start, e: end } = imports[index]
const { s: start, e: end, d: dynamicIndex } = imports[index]
// check the chunk being imported
const url = code.slice(start, end)
const deps: Set<string> = new Set()
let hasRemovedPureCssChunk = false
if (url[0] === `"` && url[url.length - 1] === `"`) {
const ownerFilename = chunk.fileName
@ -255,6 +256,21 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
})
}
chunk.imports.forEach(addDeps)
} else {
const removedPureCssFiles =
removedPureCssFilesCache.get(config)!
const chunk = removedPureCssFiles.get(filename)
if (chunk) {
const cssFiles = chunkToEmittedCssFileMap.get(chunk)
if (cssFiles && cssFiles.size > 0) {
cssFiles.forEach((file) => {
deps.add(config.base + file)
})
hasRemovedPureCssChunk = true
}
s.overwrite(dynamicIndex, end + 1, 'Promise.resolve({})')
}
}
}
const normalizedFile = path.posix.join(
@ -276,7 +292,9 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
markPos + preloadMarker.length + 1,
// the dep list includes the main chunk, so only need to
// preload when there are actual other deps.
deps.size > 1
deps.size > 1 ||
// main chunk is removed
(hasRemovedPureCssChunk && deps.size > 0)
? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
: `[]`
)