SVG Fragments via JS Import
Unknown extension assets import
+?raw import
style in svg
text('.svg-frag-import-path', svgFrag) document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view' + import unknownExtUrl from './nested/foo.unknown' + text('.unknown-ext', unknownExtUrl) + import rawSvg from './nested/fragment.svg?raw' text('.raw', rawSvg) diff --git a/playground/assets/nested/foo.unknown b/playground/assets/nested/foo.unknown new file mode 100644 index 00000000000000..e24f83b664c55c --- /dev/null +++ b/playground/assets/nested/foo.unknown @@ -0,0 +1 @@ +custom file diff --git a/playground/assets/vite.config-relative-base.js b/playground/assets/vite.config-relative-base.js index ba624964d3e0e3..ae09766c0768ac 100644 --- a/playground/assets/vite.config-relative-base.js +++ b/playground/assets/vite.config-relative-base.js @@ -8,7 +8,7 @@ module.exports = { base: './', // relative base to make dist portable build: { ...baseConfig.build, - outDir: 'dist', + outDir: 'dist/relative-base', watch: false, minify: false, assetsInlineLimit: 0, @@ -19,5 +19,8 @@ module.exports = { assetFileNames: 'other-assets/[name].[hash][extname]' } } + }, + testConfig: { + baseRoute: '/relative-base/' } } diff --git a/playground/assets/vite.config.js b/playground/assets/vite.config.js index e44ddda7995185..c9d821ae3d73ee 100644 --- a/playground/assets/vite.config.js +++ b/playground/assets/vite.config.js @@ -11,6 +11,7 @@ module.exports = { '@': path.resolve(__dirname, 'nested') } }, + assetsInclude: ['**/*.unknown'], build: { outDir: 'dist/foo', assetsInlineLimit: 8192, // 8kb diff --git a/playground/backend-integration/package.json b/playground/backend-integration/package.json index c1419548cb3bd3..a9c2b4f2bca63d 100644 --- a/playground/backend-integration/package.json +++ b/playground/backend-integration/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "tailwindcss": "^2.2.19" + "tailwindcss": "^3.1.2" }, "devDependencies": { "fast-glob": "^3.2.11" diff --git a/playground/backend-integration/tailwind.config.js b/playground/backend-integration/tailwind.config.js index 6e72a7e5d9d87b..0c3ae11de7565e 100644 --- a/playground/backend-integration/tailwind.config.js +++ b/playground/backend-integration/tailwind.config.js @@ -1,7 +1,5 @@ module.exports = { - mode: 'jit', - purge: [__dirname + '/frontend/**/*.{css,html,ts,js}'], - darkMode: false, // or 'media' or 'class' + content: [__dirname + '/frontend/**/*.{css,html,ts,js}'], theme: { extend: {} }, diff --git a/playground/cli-module/__tests__/serve.ts b/playground/cli-module/__tests__/serve.ts index 5d40149300f6a5..698cbd048851d1 100644 --- a/playground/cli-module/__tests__/serve.ts +++ b/playground/cli-module/__tests__/serve.ts @@ -1,7 +1,7 @@ // this is automatically detected by playground/vitestSetup.ts and will replace // the default e2e test serve behavior -import execa from 'execa' +import { execaCommand } from 'execa' import kill from 'kill-port' import { isBuild, @@ -45,7 +45,7 @@ export async function serve() { if (isBuild) { const buildCommand = `${viteBinPath} build` try { - const buildProcess = execa.command(buildCommand, { + const buildProcess = execaCommand(buildCommand, { cwd: rootDir, stdio: 'pipe' }) @@ -67,7 +67,7 @@ export async function serve() { viteServerArgs.unshift('preview') } const serverCommand = `${viteBinPath} ${viteServerArgs.join(' ')}` - const serverProcess = execa.command(serverCommand, { + const serverProcess = execaCommand(serverCommand, { cwd: rootDir, stdio: 'pipe' }) diff --git a/playground/cli/__tests__/serve.ts b/playground/cli/__tests__/serve.ts index 6dbc05708d9cec..66f00677169f2a 100644 --- a/playground/cli/__tests__/serve.ts +++ b/playground/cli/__tests__/serve.ts @@ -1,7 +1,7 @@ // this is automatically detected by playground/vitestSetup.ts and will replace // the default e2e test serve behavior -import execa from 'execa' +import { execaCommand } from 'execa' import kill from 'kill-port' import { isBuild, @@ -45,7 +45,7 @@ export async function serve() { if (isBuild) { const buildCommand = `${viteBinPath} build` try { - const buildProcess = execa.command(buildCommand, { + const buildProcess = execaCommand(buildCommand, { cwd: rootDir, stdio: 'pipe' }) @@ -67,7 +67,7 @@ export async function serve() { viteServerArgs.unshift('preview') } const serverCommand = `${viteBinPath} ${viteServerArgs.join(' ')}` - const serverProcess = execa.command(serverCommand, { + const serverProcess = execaCommand(serverCommand, { cwd: rootDir, stdio: 'pipe' }) diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index e9d1fccac61d6e..564f0665bf0cea 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -317,9 +317,11 @@ test('treeshaken async chunk', async () => { test('PostCSS dir-dependency', async () => { const el1 = await page.$('.dir-dep') const el2 = await page.$('.dir-dep-2') + const el3 = await page.$('.dir-dep-3') expect(await getColor(el1)).toBe('grey') expect(await getColor(el2)).toBe('grey') + expect(await getColor(el3)).toBe('grey') if (!isBuild) { editFile('glob-dep/foo.css', (code) => @@ -334,6 +336,13 @@ test('PostCSS dir-dependency', async () => { await untilUpdated(() => getColor(el2), 'red') expect(await getColor(el1)).toBe('blue') + editFile('glob-dep/nested (dir)/baz.css', (code) => + code.replace('color: grey', 'color: green') + ) + await untilUpdated(() => getColor(el3), 'green') + expect(await getColor(el1)).toBe('blue') + expect(await getColor(el2)).toBe('red') + // test add/remove removeFile('glob-dep/bar.css') await untilUpdated(() => getColor(el2), 'black') diff --git a/playground/css/glob-dep/nested (dir)/baz.css b/playground/css/glob-dep/nested (dir)/baz.css new file mode 100644 index 00000000000000..9a8b0f0ba47dc5 --- /dev/null +++ b/playground/css/glob-dep/nested (dir)/baz.css @@ -0,0 +1,3 @@ +.dir-dep-3 { + color: grey; +} diff --git a/playground/css/index.html b/playground/css/index.html index 15e81192cec7f1..4310967b6ca65b 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -113,6 +113,9 @@CSS
PostCSS dir-dependency (file 2): this should be grey too
++ PostCSS dir-dependency (file 3): this should be grey too +
URL separation preservation: should have valid background-image diff --git a/playground/css/postcss-caching/css.spec.ts b/playground/css/postcss-caching/css.spec.ts index bbffdb618280e4..45e8aadaa5489c 100644 --- a/playground/css/postcss-caching/css.spec.ts +++ b/playground/css/postcss-caching/css.spec.ts @@ -36,7 +36,7 @@ test('postcss config', async () => { blueApp = null greenApp = await startServer(greenAppDir) - await page.goto(`http://localhost:${port}`) + await page.reload() // hmr reloads it automatically but reload here for consistency const greenA = await page.$('.postcss-a') expect(await getColor(greenA)).toBe('black') const greenB = await page.$('.postcss-b') diff --git a/playground/css/postcss.config.js b/playground/css/postcss.config.js index 33058023541515..b30209bff42097 100644 --- a/playground/css/postcss.config.js +++ b/playground/css/postcss.config.js @@ -16,7 +16,7 @@ function testDirDep() { AtRule(atRule, { result, Comment }) { if (atRule.name === 'test') { const pattern = normalizePath( - path.resolve(path.dirname(result.opts.from), './glob-dep/*.css') + path.resolve(path.dirname(result.opts.from), './glob-dep/**/*.css') ) const files = glob.sync(pattern) const text = files.map((f) => fs.readFileSync(f, 'utf-8')).join('\n') @@ -30,6 +30,14 @@ function testDirDep() { glob: '*.css', parent: result.opts.from }) + + result.messages.push({ + type: 'dir-dependency', + plugin: 'dir-dep', + dir: './glob-dep/nested (dir)', // includes special characters in glob + glob: '*.css', + parent: result.opts.from + }) } } } diff --git a/playground/define/__tests__/define.spec.ts b/playground/define/__tests__/define.spec.ts index 695d210a822ed6..76b1dfef5feb39 100644 --- a/playground/define/__tests__/define.spec.ts +++ b/playground/define/__tests__/define.spec.ts @@ -40,4 +40,7 @@ test('string', async () => { // html would't need to define replacement expect(await page.textContent('.exp-define')).toBe('__EXP__') expect(await page.textContent('.import-json')).toBe('__EXP__') + expect(await page.textContent('.define-in-dep')).toBe( + defines.__STRINGIFIED_OBJ__ + ) }) diff --git a/playground/define/commonjs-dep/index.js b/playground/define/commonjs-dep/index.js new file mode 100644 index 00000000000000..23e0bf1b32e32f --- /dev/null +++ b/playground/define/commonjs-dep/index.js @@ -0,0 +1 @@ +module.exports = { defined: __STRINGIFIED_OBJ__ } diff --git a/playground/define/commonjs-dep/package.json b/playground/define/commonjs-dep/package.json new file mode 100644 index 00000000000000..3047ae68c9f75a --- /dev/null +++ b/playground/define/commonjs-dep/package.json @@ -0,0 +1,6 @@ +{ + "name": "commonjs-dep", + "private": true, + "version": "1.0.0", + "type": "commonjs" +} diff --git a/playground/define/index.html b/playground/define/index.html index 1260b119149d28..c4f4c598aba563 100644 --- a/playground/define/index.html +++ b/playground/define/index.html @@ -16,6 +16,7 @@
Define
no identifier substring:
define variable in html: __EXP__
import json:
define in dep: