Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(dev): added assets to manifest #6649

Merged
merged 13 commits into from
Jun 19, 2022
Merged

feat(dev): added assets to manifest #6649

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
b3a7842
feat(dev): added assets to manifest
lubomirblazekcz Jan 26, 2022
2da3765
Merge branch 'main' of https://github.com/vitejs/vite into manifest-a…
lubomirblazekcz Mar 15, 2022
80e7139
feat: added backend-integration assets manifest tests
lubomirblazekcz Mar 15, 2022
a89dd76
Merge branch 'main' of github.com:vitejs/vite into manifest-assets
lubomirblazekcz May 28, 2022
7fd58ea
fix: merge file remnant
lubomirblazekcz May 28, 2022
5e5e970
fix: lint error
lubomirblazekcz May 28, 2022
af2ec79
feat: added src to assets manifest
lubomirblazekcz May 28, 2022
22d33c8
fix: css asset path
lubomirblazekcz Jun 9, 2022
1919d04
fix(tests): css entry
lubomirblazekcz Jun 9, 2022
fabc52b
fix: css extension
jessarcher Jun 10, 2022
3147b88
fix: css build path
jessarcher Jun 10, 2022
1fc45de
chore: merge main
patak-dev Jun 19, 2022
9773d4e
fix: abstract resolveAssetFileNames, support legacy plugin with custo…
patak-dev Jun 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion packages/vite/src/node/plugins/css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ import {
import type { Logger } from '../logger'
import { addToHTMLProxyTransformResult } from './html'
import {
assetFileNamesToFileName,
assetUrlRE,
checkPublicFile,
fileToUrl,
Expand Down Expand Up @@ -488,6 +489,10 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
return chunkCSS
}

function ensureFileExt(name: string, ext: string) {
return path.format({ ...path.parse(name), base: undefined, ext })
}

if (config.build.cssCodeSplit) {
if (isPureCssChunk) {
// this is a shared CSS-only chunk that is empty.
Expand All @@ -498,14 +503,34 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
opts.format === 'cjs' ||
opts.format === 'system'
) {
const cssAssetName = chunk.name + '.css'
const cssAssetName = ensureFileExt(
chunk.facadeModuleId
? normalizePath(path.relative(config.root, chunk.facadeModuleId))
: chunk.name,
'.css'
)

chunkCSS = resolveAssetUrlsInCss(chunkCSS, cssAssetName)
chunkCSS = await finalizeCss(chunkCSS, true, config)

const output = config.build?.rollupOptions?.output
const assetFileNames =
(output && !Array.isArray(output)
? output.assetFileNames
: undefined) ??
// defaults to '<assetsDir>/[name].[hash][extname]'
// slightly different from rollup's one ('assets/[name]-[hash][extname]')
path.posix.join(config.build.assetsDir, '[name].[hash][extname]')

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is copied verbatim from asset.ts so we could potentially extract it to function if we wanted to keep that logic and naming pattern centralised.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, there was also a fix for plugin legacy with custom asset file names. So this abstraction was needed for it

// emit corresponding css file
const fileHandle = this.emitFile({
name: cssAssetName,
fileName: assetFileNamesToFileName(
assetFileNames,
cssAssetName,
getHash(chunkCSS),
chunkCSS
),
type: 'asset',
source: chunkCSS
})
Expand Down
11 changes: 10 additions & 1 deletion packages/vite/src/node/plugins/manifest.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import path from 'path'
import type { OutputChunk } from 'rollup'
import type { OutputAsset, OutputChunk } from 'rollup'
import type { ResolvedConfig } from '..'
import type { Plugin } from '../plugin'
import { normalizePath } from '../utils'
Expand Down Expand Up @@ -99,10 +99,19 @@ export function manifestPlugin(config: ResolvedConfig): Plugin {
return manifestChunk
}

function createAsset(chunk: OutputAsset): ManifestChunk {
return {
file: chunk.fileName,
src: chunk.name
}
}

for (const file in bundle) {
const chunk = bundle[file]
if (chunk.type === 'chunk') {
manifest[getChunkName(chunk)] = createChunk(chunk)
} else if (chunk.type === 'asset' && typeof chunk.name === 'string') {
manifest[chunk.name] = createAsset(chunk)
}
}

Expand Down
4 changes: 4 additions & 0 deletions playground/backend-integration/__tests__/backend-integration.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,12 @@ describe.runIf(isBuild)('build', () => {
test('manifest', async () => {
const manifest = readManifest('dev')
const htmlEntry = manifest['index.html']
const cssAssetEntry = manifest['global.css']
const imgAssetEntry = manifest['../images/logo.png']
expect(htmlEntry.css.length).toEqual(1)
expect(htmlEntry.assets.length).toEqual(1)
expect(cssAssetEntry?.file).not.toBeUndefined()
expect(imgAssetEntry?.file).not.toBeUndefined()
})
})

Expand Down