-
-
-
+
+ Beyond Fast
+ViteConf 2023
+Watch the replay!
+ +direct
+inline
+from-js
+dynamic
+js: error
+dynamic-js: error
+inline-js: error
+double-nonce-js: error
+ + diff --git a/playground/csp/index.js b/playground/csp/index.js new file mode 100644 index 00000000000000..465359baca8297 --- /dev/null +++ b/playground/csp/index.js @@ -0,0 +1,5 @@ +import './from-js.css' + +document.querySelector('.js').textContent = 'js: ok' + +import('./dynamic.js') diff --git a/playground/csp/linked.css b/playground/csp/linked.css new file mode 100644 index 00000000000000..51636e6cfad81f --- /dev/null +++ b/playground/csp/linked.css @@ -0,0 +1,3 @@ +.linked { + color: blue; +} diff --git a/playground/csp/package.json b/playground/csp/package.json new file mode 100644 index 00000000000000..e8a834d93abd25 --- /dev/null +++ b/playground/csp/package.json @@ -0,0 +1,12 @@ +{ + "name": "@vitejs/test-csp", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "debug": "node --inspect-brk ../../packages/vite/bin/vite", + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + } +} diff --git a/playground/csp/vite.config.js b/playground/csp/vite.config.js new file mode 100644 index 00000000000000..84d6d92ba0d0bb --- /dev/null +++ b/playground/csp/vite.config.js @@ -0,0 +1,67 @@ +import fs from 'node:fs/promises' +import url from 'node:url' +import path from 'node:path' +import crypto from 'node:crypto' +import { defineConfig } from 'vite' + +const __dirname = path.dirname(url.fileURLToPath(import.meta.url)) + +const noncePlaceholder = '#$NONCE$#' +const createNonce = () => crypto.randomBytes(16).toString('base64') + +/** + * @param {import('node:http').ServerResponse} res + * @param {string} nonce + */ +const setNonceHeader = (res, nonce) => { + res.setHeader( + 'Content-Security-Policy', + `default-src 'nonce-${nonce}'; connect-src 'self'`, + ) +} + +/** + * @param {string} file + * @param {(input: string, originalUrl: string) => PromiseThis should be green
+This should be blue
This should not be yellow
This should be yellow
diff --git a/playground/css-codesplit/main.js b/playground/css-codesplit/main.js index e548142add8786..ec266fa003156d 100644 --- a/playground/css-codesplit/main.js +++ b/playground/css-codesplit/main.js @@ -9,6 +9,7 @@ import chunkCssUrl from './chunk.css?url' globalThis.__test_chunkCssUrl = chunkCssUrl import('./async.css') +import('./async-js') import('./inline.css?inline').then((css) => { document.querySelector('.dynamic-inline').textContent = css.default diff --git a/playground/css-lightningcss-proxy/package.json b/playground/css-lightningcss-proxy/package.json index 571c2596490cfa..ad6b503221a9f6 100644 --- a/playground/css-lightningcss-proxy/package.json +++ b/playground/css-lightningcss-proxy/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "devDependencies": { - "lightningcss": "^1.22.0", - "express": "^4.18.2" + "lightningcss": "^1.25.1", + "express": "^4.19.2" } } diff --git a/playground/css-lightningcss/__tests__/lightningcss.spec.ts b/playground/css-lightningcss/__tests__/css-lightningcss.spec.ts similarity index 100% rename from playground/css-lightningcss/__tests__/lightningcss.spec.ts rename to playground/css-lightningcss/__tests__/css-lightningcss.spec.ts diff --git a/playground/css-lightningcss/package.json b/playground/css-lightningcss/package.json index 99c99b415e2db4..6844ef9ffb0959 100644 --- a/playground/css-lightningcss/package.json +++ b/playground/css-lightningcss/package.json @@ -9,6 +9,6 @@ "preview": "vite preview" }, "devDependencies": { - "lightningcss": "^1.22.0" + "lightningcss": "^1.25.1" } } diff --git a/playground/css-no-codesplit/__tests__/css-no-codesplit.spec.ts b/playground/css-no-codesplit/__tests__/css-no-codesplit.spec.ts new file mode 100644 index 00000000000000..5110ef3a77ff7b --- /dev/null +++ b/playground/css-no-codesplit/__tests__/css-no-codesplit.spec.ts @@ -0,0 +1,17 @@ +import { describe, expect, test } from 'vitest' +import { expectWithRetry, getColor, isBuild, listAssets } from '~utils' + +test('should load all stylesheets', async () => { + expect(await getColor('.shared-linked')).toBe('blue') + await expectWithRetry(() => getColor('.async-js')).toBe('blue') +}) + +describe.runIf(isBuild)('build', () => { + test('should remove empty chunk', async () => { + const assets = listAssets() + expect(assets).not.toContainEqual( + expect.stringMatching(/shared-linked-.*\.js$/), + ) + expect(assets).not.toContainEqual(expect.stringMatching(/async-js-.*\.js$/)) + }) +}) diff --git a/playground/css-no-codesplit/async-js.css b/playground/css-no-codesplit/async-js.css new file mode 100644 index 00000000000000..ed61a7f513c277 --- /dev/null +++ b/playground/css-no-codesplit/async-js.css @@ -0,0 +1,3 @@ +.async-js { + color: blue; +} diff --git a/playground/css-no-codesplit/async-js.js b/playground/css-no-codesplit/async-js.js new file mode 100644 index 00000000000000..2ce31a1e741d2d --- /dev/null +++ b/playground/css-no-codesplit/async-js.js @@ -0,0 +1,2 @@ +// a JS file that becomes an empty file but imports CSS files +import './async-js.css' diff --git a/playground/css-no-codesplit/index.html b/playground/css-no-codesplit/index.html new file mode 100644 index 00000000000000..e7673c84e45933 --- /dev/null +++ b/playground/css-no-codesplit/index.html @@ -0,0 +1,5 @@ + + + + +async JS importing CSS: this should be blue
diff --git a/playground/css-no-codesplit/index.js b/playground/css-no-codesplit/index.js new file mode 100644 index 00000000000000..44b33fda36a9cd --- /dev/null +++ b/playground/css-no-codesplit/index.js @@ -0,0 +1 @@ +import('./async-js') diff --git a/playground/css-no-codesplit/package.json b/playground/css-no-codesplit/package.json new file mode 100644 index 00000000000000..61d806d3d264fa --- /dev/null +++ b/playground/css-no-codesplit/package.json @@ -0,0 +1,12 @@ +{ + "name": "@vitejs/test-css-no-codesplit", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "debug": "node --inspect-brk ../../packages/vite/bin/vite", + "preview": "vite preview" + } +} diff --git a/playground/css-no-codesplit/shared-linked.css b/playground/css-no-codesplit/shared-linked.css new file mode 100644 index 00000000000000..51857a50efca1f --- /dev/null +++ b/playground/css-no-codesplit/shared-linked.css @@ -0,0 +1,3 @@ +.shared-linked { + color: blue; +} diff --git a/playground/css-no-codesplit/sub.html b/playground/css-no-codesplit/sub.html new file mode 100644 index 00000000000000..f535a771d06482 --- /dev/null +++ b/playground/css-no-codesplit/sub.html @@ -0,0 +1 @@ + diff --git a/playground/css-no-codesplit/vite.config.js b/playground/css-no-codesplit/vite.config.js new file mode 100644 index 00000000000000..f48d875832b928 --- /dev/null +++ b/playground/css-no-codesplit/vite.config.js @@ -0,0 +1,14 @@ +import { resolve } from 'node:path' +import { defineConfig } from 'vite' + +export default defineConfig({ + build: { + cssCodeSplit: false, + rollupOptions: { + input: { + index: resolve(__dirname, './index.html'), + sub: resolve(__dirname, './sub.html'), + }, + }, + }, +}) diff --git a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts index 6706b5dcaae510..6c6472c848823d 100644 --- a/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts +++ b/playground/css-sourcemap/__tests__/css-sourcemap.spec.ts @@ -138,6 +138,7 @@ describe.runIf(isServe)('serve', () => { const map = extractSourcemap(css) expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` { + "ignoreList": [], "mappings": "AACE;EACE", "sources": [ "/root/imported.sass", @@ -158,6 +159,7 @@ describe.runIf(isServe)('serve', () => { const map = extractSourcemap(css) expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` { + "ignoreList": [], "mappings": "AACE;EACE", "sources": [ "/root/imported.module.sass", @@ -178,6 +180,7 @@ describe.runIf(isServe)('serve', () => { const map = extractSourcemap(css) expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` { + "ignoreList": [], "mappings": "AACE;EACE", "sources": [ "/root/imported.less", @@ -200,6 +203,7 @@ describe.runIf(isServe)('serve', () => { const map = extractSourcemap(css) expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(` { + "ignoreList": [], "mappings": "AACE;EACE,cAAM", "sources": [ "/root/imported.styl", diff --git a/playground/css-sourcemap/__tests__/lib-entry/lib-entry.spec.ts b/playground/css-sourcemap/__tests__/lib-entry/css-sourcemap-lib-entry.spec.ts similarity index 100% rename from playground/css-sourcemap/__tests__/lib-entry/lib-entry.spec.ts rename to playground/css-sourcemap/__tests__/lib-entry/css-sourcemap-lib-entry.spec.ts diff --git a/playground/css-sourcemap/package.json b/playground/css-sourcemap/package.json index 5fe1540ce52f68..9762af32c1e214 100644 --- a/playground/css-sourcemap/package.json +++ b/playground/css-sourcemap/package.json @@ -11,9 +11,9 @@ }, "devDependencies": { "less": "^4.2.0", - "magic-string": "^0.30.5", - "sass": "^1.69.5", - "stylus": "^0.60.0", + "magic-string": "^0.30.10", + "sass": "^1.77.6", + "stylus": "^0.63.0", "sugarss": "^4.0.1" } } diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index b424faace62b81..cb7af939bbd152 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -74,6 +74,9 @@ test('sass', async () => { const atImport = await page.$('.sass-at-import') const atImportAlias = await page.$('.sass-at-import-alias') const urlStartsWithVariable = await page.$('.sass-url-starts-with-variable') + const urlStartsWithFunctionCall = await page.$( + '.sass-url-starts-with-function-call', + ) const partialImport = await page.$('.sass-partial') expect(await getColor(imported)).toBe('orange') @@ -86,6 +89,9 @@ test('sass', async () => { expect(await getBg(urlStartsWithVariable)).toMatch( isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, ) + expect(await getBg(urlStartsWithFunctionCall)).toMatch( + isBuild ? /ok-[-\w]+\.png/ : `${viteTestUrl}/ok.png`, + ) expect(await getColor(partialImport)).toBe('orchid') editFile('sass.scss', (code) => @@ -292,6 +298,10 @@ test('@import dependency that @import another dependency', async () => { expect(await getColor('.css-proxy-dep')).toBe('purple') }) +test('@import scss dependency that has @import with a css extension pointing to another dependency', async () => { + expect(await getColor('.scss-proxy-dep')).toBe('purple') +}) + test('@import dependency w/out package scss', async () => { expect(await getColor('.sass-dep')).toBe('lavender') }) @@ -428,12 +438,26 @@ test('minify css', async () => { expect(cssFile).not.toMatch('#ffff00b3') }) +test('?url', async () => { + expect(await getColor('.url-imported-css')).toBe('yellow') +}) + test('?raw', async () => { const rawImportCss = await page.$('.raw-imported-css') expect(await rawImportCss.textContent()).toBe( readFileSync(require.resolve('../raw-imported.css'), 'utf-8'), ) + + if (!isBuild) { + editFile('raw-imported.css', (code) => + code.replace('color: yellow', 'color: blue'), + ) + await untilUpdated( + () => page.textContent('.raw-imported-css'), + 'color: blue', + ) + } }) test('import css in less', async () => { @@ -462,6 +486,10 @@ test('aliased css has content', async () => { expect(await getColor('.aliased-module')).toBe('blue') }) +test('resolve imports field in CSS', async () => { + expect(await getColor('.imports-field')).toBe('red') +}) + test.runIf(isBuild)('warning can be suppressed by esbuild.logOverride', () => { serverLogs.forEach((log) => { // no warning from esbuild css minifier @@ -508,3 +536,15 @@ test('async css order with css modules', async () => { test('@import scss', async () => { expect(await getColor('.at-import-scss')).toBe('red') }) + +test.runIf(isBuild)('manual chunk path', async () => { + // assert that the manual-chunk css is output in the directory specified in manualChunk (#12072) + expect( + findAssetFile(/dir\/dir2\/manual-chunk-[-\w]{8}\.css$/), + ).not.toBeUndefined() +}) + +test.runIf(isBuild)('CSS modules should be treeshaken if not used', () => { + const css = findAssetFile(/\.css$/, undefined, undefined, true) + expect(css).not.toContain('treeshake-module-b') +}) diff --git a/playground/css/__tests__/no-css-minify/no-css-minify.spec.ts b/playground/css/__tests__/no-css-minify/css-no-css-minify.spec.ts similarity index 100% rename from playground/css/__tests__/no-css-minify/no-css-minify.spec.ts rename to playground/css/__tests__/no-css-minify/css-no-css-minify.spec.ts diff --git a/playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts b/playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts similarity index 100% rename from playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts rename to playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts diff --git a/playground/css/__tests__/same-file-name/same-file-name.spec.ts b/playground/css/__tests__/same-file-name/css-same-file-name.spec.ts similarity index 100% rename from playground/css/__tests__/same-file-name/same-file-name.spec.ts rename to playground/css/__tests__/same-file-name/css-same-file-name.spec.ts diff --git a/playground/css/imports-field.css b/playground/css/imports-field.css new file mode 100644 index 00000000000000..9120b6c04f9150 --- /dev/null +++ b/playground/css/imports-field.css @@ -0,0 +1,3 @@ +.imports-field { + color: red; +} diff --git a/playground/css/imports-imports-field.css b/playground/css/imports-imports-field.css new file mode 100644 index 00000000000000..2f4167c3033ec4 --- /dev/null +++ b/playground/css/imports-imports-field.css @@ -0,0 +1 @@ +@import '#imports'; diff --git a/playground/css/index.html b/playground/css/index.html index 2016c1b3c72ca8..a0e92b205e79f6 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -33,6 +33,9 @@@import from SASS _partial: This should be orchid
url starts with variable
++ url starts with function call +
Imported SASS string:
@@ -102,6 +105,8 @@
Imported SASS module:
+CSS modules should treeshake in build
+Imported compose/from CSS/SASS module:
CSS modules composes path resolving: this should be turquoise @@ -143,6 +148,10 @@
@import dependency that @import another dependency: this should be purple
++ @import dependency that has @import with a css extension pointing to another + dependency: this should be purple +
PostCSS dir-dependency: this should be grey
@@ -178,6 +187,8 @@
URL Support
+Raw Support
@@ -191,6 +202,9 @@import '#alias': this should be blue
import '#alias-module': this should be blue
+ +Imports field
+import '#imports': this should be red