Skip to content

Commit

Permalink
fix(css): include .css?url in assets field of manifest (#17623)
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red authored Jul 15, 2024
1 parent c4a2227 commit 1465b20
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 1 deletion.
4 changes: 3 additions & 1 deletion packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -711,8 +711,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
.get(config)!
.set(referenceId, { originalName: originalFilename })

const filename = this.getFileName(referenceId)
chunk.viteMetadata!.importedAssets.add(cleanUrl(filename))
const replacement = toOutputFilePathInJS(
this.getFileName(referenceId),
filename,
'asset',
chunk.fileName,
'js',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ describe.runIf(isBuild)('build', () => {
test('manifest', async () => {
const manifest = readManifest('dev')
const htmlEntry = manifest['index.html']
const mainTsEntry = manifest['main.ts']
const cssAssetEntry = manifest['global.css']
const pcssAssetEntry = manifest['foo.pcss']
const scssAssetEntry = manifest['nested/blue.scss']
Expand All @@ -44,6 +45,10 @@ describe.runIf(isBuild)('build', () => {
const iconEntrypointEntry = manifest['icon.png']
expect(htmlEntry.css.length).toEqual(1)
expect(htmlEntry.assets.length).toEqual(1)
expect(mainTsEntry.assets?.length ?? 0).toBeGreaterThanOrEqual(1)
expect(mainTsEntry.assets).toContainEqual(
expect.stringMatching(/assets\/url-[-\w]{8}\.css/),
)
expect(cssAssetEntry?.file).not.toBeUndefined()
expect(cssAssetEntry?.isEntry).toEqual(true)
expect(pcssAssetEntry?.file).not.toBeUndefined()
Expand Down
6 changes: 6 additions & 0 deletions playground/backend-integration/frontend/entrypoints/main.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import 'vite/modulepreload-polyfill'
import cssUrl from '../styles/url.css?url'

const cssLink = document.createElement('link')
cssLink.rel = 'stylesheet'
cssLink.href = cssUrl
document.querySelector('head').prepend(cssLink)

export const colorClass = 'text-black'

Expand Down
3 changes: 3 additions & 0 deletions playground/backend-integration/frontend/styles/url.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.url {
color: red;
}

0 comments on commit 1465b20

Please sign in to comment.