From 026eb181df6371f178f9e7efc533931b003967dd Mon Sep 17 00:00:00 2001 From: Stefan van Herwijnen <5968971+stefanvanherwijnen@users.noreply.github.com> Date: Thu, 30 Jun 2022 09:19:20 +0200 Subject: [PATCH 1/9] test: use ES syntax in vite.config.noexternal.js (#8857) --- playground/ssr-vue/vite.config.noexternal.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/playground/ssr-vue/vite.config.noexternal.js b/playground/ssr-vue/vite.config.noexternal.js index ce9a389defc68b..48a740c16cb1bf 100644 --- a/playground/ssr-vue/vite.config.noexternal.js +++ b/playground/ssr-vue/vite.config.noexternal.js @@ -1,8 +1,8 @@ -const config = require('./vite.config.js') +import config from './vite.config.js' /** * @type {import('vite').UserConfig} */ -module.exports = Object.assign(config, { +export default Object.assign(config, { ssr: { noExternal: /./ }, From 4eb23486a4dbfb7bb64d143e16a9f6ecf1e76152 Mon Sep 17 00:00:00 2001 From: Rom Date: Thu, 30 Jun 2022 11:09:29 +0200 Subject: [PATCH 2/9] chore: update deprecation warnings for improved migration DX (#8866) --- packages/vite/src/node/config.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 67391c6e1e5830..b7c85723d5e71b 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -636,14 +636,16 @@ export async function resolveConfig( if (middlewareMode === 'ssr') { logger.warn( colors.yellow( - `server.middlewareMode 'ssr' is now deprecated, use server.middlewareMode true and appType 'custom'` + `Setting server.middlewareMode to 'ssr' is deprecated, set server.middlewareMode to \`true\`${ + config.appType === 'custom' ? '' : ` and appType to 'custom'` + } instead` ) ) } if (middlewareMode === 'html') { logger.warn( colors.yellow( - `server.middlewareMode 'html' is now deprecated, use server.middlewareMode true` + `Setting server.middlewareMode to 'html' is deprecated, set server.middlewareMode to \`true\` instead` ) ) } From 3af6a1b401a574c78695dbf7fe39152bca1e304b Mon Sep 17 00:00:00 2001 From: Harry Porter-Mills Date: Thu, 30 Jun 2022 17:45:17 -0400 Subject: [PATCH 3/9] fix: prevent crash when the pad amount is negative (#8747) --- packages/vite/src/node/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts index 345ce0a8627365..6f7bef05752003 100644 --- a/packages/vite/src/node/utils.ts +++ b/packages/vite/src/node/utils.ts @@ -480,7 +480,7 @@ export function generateCodeFrame( const lineLength = lines[j].length if (j === i) { // push underline - const pad = start - (count - lineLength) + 1 + const pad = Math.max(start - (count - lineLength) + 1, 0) const length = Math.max( 1, end > count ? lineLength - pad : end - start From 314c09c16bc0747babfd5eef01801928104951d5 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 30 Jun 2022 15:26:01 -0700 Subject: [PATCH 4/9] fix: ignore Playwright test results directory (#8778) --- packages/vite/src/node/server/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts index 24a277fa136c08..055e49d89a19e3 100644 --- a/packages/vite/src/node/server/index.ts +++ b/packages/vite/src/node/server/index.ts @@ -291,8 +291,9 @@ export async function createServer( const { ignored = [], ...watchOptions } = serverConfig.watch || {} const watcher = chokidar.watch(path.resolve(root), { ignored: [ - '**/node_modules/**', '**/.git/**', + '**/node_modules/**', + '**/test-results/**', // Playwright ...(Array.isArray(ignored) ? ignored : [ignored]) ], ignoreInitial: true, From 09742e21dc8d59c57d82e384fd58f7da3c08cd74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fatih=20Ayg=C3=BCn?= Date: Fri, 1 Jul 2022 01:56:11 +0300 Subject: [PATCH 5/9] fix(plugin-react): pass correct context to runPluginOverrides (#8809) --- packages/plugin-react/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts index 9aa3f94dc5b2f7..160e9ca1d2f883 100644 --- a/packages/plugin-react/src/index.ts +++ b/packages/plugin-react/src/index.ts @@ -165,10 +165,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] { .filter(Boolean) as ReactBabelHook[] if (hooks.length > 0) { - return (runPluginOverrides = (babelOptions) => { + return (runPluginOverrides = (babelOptions, context) => { hooks.forEach((hook) => hook(babelOptions, context, config)) return true - })(babelOptions) + })(babelOptions, context) } runPluginOverrides = () => false return false From 4816527b4655156d66cae411ada8f3c26945d8a7 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Fri, 1 Jul 2022 12:08:47 +0900 Subject: [PATCH 6/9] test: add #8245 test case --- playground/css/__tests__/css.spec.ts | 6 ++++++ playground/css/aliased/bar.module.css | 3 +++ playground/css/aliased/foo.css | 3 +++ playground/css/index.html | 5 +++++ playground/css/main.js | 7 +++++++ playground/css/vite.config.js | 4 +++- 6 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 playground/css/aliased/bar.module.css create mode 100644 playground/css/aliased/foo.css diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index c51e821ec3d93c..2cd70ea0ddba1b 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -426,3 +426,9 @@ test('PostCSS source.input.from includes query', async () => { // should resolve assets expect(code).toContain('/postcss-source-input.css?query=foo') }) + +test('aliased css has content', async () => { + expect(await getColor('.aliased')).toBe('blue') + expect(await page.textContent('.aliased-content')).toMatch('.aliased') + expect(await getColor('.aliased-module')).toBe('blue') +}) diff --git a/playground/css/aliased/bar.module.css b/playground/css/aliased/bar.module.css new file mode 100644 index 00000000000000..e4e46f3306a02e --- /dev/null +++ b/playground/css/aliased/bar.module.css @@ -0,0 +1,3 @@ +.aliasedModule { + color: blue; +} diff --git a/playground/css/aliased/foo.css b/playground/css/aliased/foo.css new file mode 100644 index 00000000000000..7e32cb71a8f375 --- /dev/null +++ b/playground/css/aliased/foo.css @@ -0,0 +1,3 @@ +.aliased { + color: blue; +} diff --git a/playground/css/index.html b/playground/css/index.html index 4310967b6ca65b..a2ff46a70f78a9 100644 --- a/playground/css/index.html +++ b/playground/css/index.html @@ -141,6 +141,11 @@

CSS

PostCSS source.input.from. Should include query


+
+  
Aliased

+  
import '#alias': this should be blue

+  

+  
import '#alias-module': this should be blue

 
 
 
diff --git a/playground/css/main.js b/playground/css/main.js
index 90f74c96793c55..c39feaa64af167 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -92,3 +92,10 @@ text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
 
 import postcssSourceInput from './postcss-source-input.css?query=foo'
 text('.postcss-source-input', postcssSourceInput)
+
+import aliasContent from '#alias'
+text('.aliased-content', aliasContent)
+import aliasModule from '#alias-module'
+document
+  .querySelector('.aliased-module')
+  .classList.add(aliasModule.aliasedModule)
diff --git a/playground/css/vite.config.js b/playground/css/vite.config.js
index 639a1302debb88..c501213b47cded 100644
--- a/playground/css/vite.config.js
+++ b/playground/css/vite.config.js
@@ -10,7 +10,9 @@ module.exports = {
   resolve: {
     alias: {
       '@': __dirname,
-      spacefolder: __dirname + '/folder with space'
+      spacefolder: __dirname + '/folder with space',
+      '#alias': __dirname + '/aliased/foo.css',
+      '#alias-module': __dirname + '/aliased/bar.module.css'
     }
   },
   css: {

From 24a9469cc290b691b0f0057cd713fdb637b4dbd5 Mon Sep 17 00:00:00 2001
From: sapphi-red 
Date: Fri, 1 Jul 2022 12:17:19 +0900
Subject: [PATCH 7/9] test: add #8461 test case

---
 playground/css/__tests__/css.spec.ts     |  5 +++++
 playground/css/css-js-dep/bar.module.css |  3 +++
 playground/css/css-js-dep/foo.css        |  3 +++
 playground/css/css-js-dep/index.js       |  4 ++++
 playground/css/css-js-dep/package.json   |  7 +++++++
 playground/css/index.html                |  7 +++++++
 playground/css/main.js                   |  5 +++++
 playground/css/package.json              |  1 +
 pnpm-lock.yaml                           | 16 +++++++++++++++-
 9 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 playground/css/css-js-dep/bar.module.css
 create mode 100644 playground/css/css-js-dep/foo.css
 create mode 100644 playground/css/css-js-dep/index.js
 create mode 100644 playground/css/css-js-dep/package.json

diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 2cd70ea0ddba1b..3c9f5fc4ea9b0a 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -349,6 +349,11 @@ test('PostCSS dir-dependency', async () => {
   }
 })
 
+test('import dependency includes css import', async () => {
+  expect(await getColor('.css-js-dep')).toBe('green')
+  expect(await getColor('.css-js-dep-module')).toBe('green')
+})
+
 test('URL separation', async () => {
   const urlSeparated = await page.$('.url-separated')
   const baseUrl = 'url(images/dog.webp)'
diff --git a/playground/css/css-js-dep/bar.module.css b/playground/css/css-js-dep/bar.module.css
new file mode 100644
index 00000000000000..9d62f66761fa3d
--- /dev/null
+++ b/playground/css/css-js-dep/bar.module.css
@@ -0,0 +1,3 @@
+.cssJsDepModule {
+  color: green;
+}
diff --git a/playground/css/css-js-dep/foo.css b/playground/css/css-js-dep/foo.css
new file mode 100644
index 00000000000000..515ee7693bff3f
--- /dev/null
+++ b/playground/css/css-js-dep/foo.css
@@ -0,0 +1,3 @@
+.css-js-dep {
+  color: green;
+}
diff --git a/playground/css/css-js-dep/index.js b/playground/css/css-js-dep/index.js
new file mode 100644
index 00000000000000..853094b806fa97
--- /dev/null
+++ b/playground/css/css-js-dep/index.js
@@ -0,0 +1,4 @@
+import './foo.css'
+import barModuleClasses from './bar.module.css'
+
+export { barModuleClasses }
diff --git a/playground/css/css-js-dep/package.json b/playground/css/css-js-dep/package.json
new file mode 100644
index 00000000000000..d762f6566fdbdc
--- /dev/null
+++ b/playground/css/css-js-dep/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "css-js-dep",
+  "private": true,
+  "type": "module",
+  "version": "1.0.0",
+  "main": "index.js"
+}
diff --git a/playground/css/index.html b/playground/css/index.html
index a2ff46a70f78a9..7e591ee25f0a5b 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -117,6 +117,13 @@ 
CSS

     PostCSS dir-dependency (file 3): this should be grey too
   

 
+  

+    import dependency includes 'import "./foo.css"': this should be green
+  

+  

+    import dependency includes 'import "./bar.module.css"': this should be green
+  

+
   

     URL separation preservation: should have valid background-image
   

diff --git a/playground/css/main.js b/playground/css/main.js
index c39feaa64af167..c9384b6a79013c 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -47,6 +47,11 @@ text('.charset-css', charset)
 import './dep.css'
 import './glob-dep.css'
 
+import { barModuleClasses } from 'css-js-dep'
+document
+  .querySelector('.css-js-dep-module')
+  .classList.add(barModuleClasses.cssJsDepModule)
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }
diff --git a/playground/css/package.json b/playground/css/package.json
index 03c4964f0284ea..11dc33c48f7aa2 100644
--- a/playground/css/package.json
+++ b/playground/css/package.json
@@ -13,6 +13,7 @@
   },
   "devDependencies": {
     "css-dep": "link:./css-dep",
+    "css-js-dep": "file:./css-js-dep",
     "fast-glob": "^3.2.11",
     "less": "^4.1.3",
     "postcss-nested": "^5.0.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 67f75f4da8630d..790ac42ccd2b7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -377,6 +377,7 @@ importers:
   playground/css:
     specifiers:
       css-dep: link:./css-dep
+      css-js-dep: file:./css-js-dep
       fast-glob: ^3.2.11
       less: ^4.1.3
       postcss-nested: ^5.0.6
@@ -384,6 +385,7 @@ importers:
       stylus: ^0.58.1
     devDependencies:
       css-dep: link:css-dep
+      css-js-dep: file:playground/css/css-js-dep
       fast-glob: 3.2.11
       less: 4.1.3
       postcss-nested: 5.0.6
@@ -411,6 +413,9 @@ importers:
   playground/css/css-dep:
     specifiers: {}
 
+  playground/css/css-js-dep:
+    specifiers: {}
+
   playground/css/pkg-dep:
     specifiers: {}
 
@@ -708,6 +713,9 @@ importers:
   playground/optimize-deps/nested-include:
     specifiers: {}
 
+  playground/optimize-deps/non-optimizable-include:
+    specifiers: {}
+
   playground/optimize-missing-deps:
     specifiers:
       express: ^4.18.1
@@ -8709,6 +8717,12 @@ packages:
     version: 0.0.0
     dev: false
 
+  file:playground/css/css-js-dep:
+    resolution: {directory: playground/css/css-js-dep, type: directory}
+    name: css-js-dep
+    version: 1.0.0
+    dev: true
+
   file:playground/define/commonjs-dep:
     resolution: {directory: playground/define/commonjs-dep, type: directory}
     name: commonjs-dep
@@ -8877,7 +8891,7 @@ packages:
 
   file:playground/ssr-deps/no-external-css:
     resolution: {directory: playground/ssr-deps/no-external-css, type: directory}
-    name: primitive-export-css
+    name: no-external-css
     version: 0.0.0
     dev: false
 

From 1748fe9a3b79c16f6320471a2b04c8806f302f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= 
Date: Fri, 1 Jul 2022 15:35:55 +0900
Subject: [PATCH 8/9] test: fix flaky glob test (#8875)

---
 playground/glob-import/__tests__/glob-import.spec.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/playground/glob-import/__tests__/glob-import.spec.ts b/playground/glob-import/__tests__/glob-import.spec.ts
index 70f7ec252280a9..a7297511ea4649 100644
--- a/playground/glob-import/__tests__/glob-import.spec.ts
+++ b/playground/glob-import/__tests__/glob-import.spec.ts
@@ -81,11 +81,15 @@ const relativeRawResult = {
 }
 
 test('should work', async () => {
-  expect(await page.textContent('.result')).toBe(
-    JSON.stringify(allResult, null, 2)
+  await untilUpdated(
+    () => page.textContent('.result'),
+    JSON.stringify(allResult, null, 2),
+    true
   )
-  expect(await page.textContent('.result-node_modules')).toBe(
-    JSON.stringify(nodeModulesResult, null, 2)
+  await untilUpdated(
+    () => page.textContent('.result-node_modules'),
+    JSON.stringify(nodeModulesResult, null, 2),
+    true
   )
 })
 

From cad27ee8c00bbd5aeeb2be9bfb3eb164c1b77885 Mon Sep 17 00:00:00 2001
From: patak 
Date: Fri, 1 Jul 2022 09:23:08 +0200
Subject: [PATCH 9/9] docs: simplify Snowpack comparison (#8871)

---
 docs/guide/comparisons.md | 42 +++++++--------------------------------
 1 file changed, 7 insertions(+), 35 deletions(-)

diff --git a/docs/guide/comparisons.md b/docs/guide/comparisons.md
index 1e849f88a71a68..e582a8d389d0fb 100644
--- a/docs/guide/comparisons.md
+++ b/docs/guide/comparisons.md
@@ -1,38 +1,4 @@
-# Comparisons with Other No-Bundler Solutions
-
-## Snowpack
-
-[Snowpack](https://www.snowpack.dev/) is also a no-bundle native ESM dev server that is very similar in scope to Vite. Aside from different implementation details, the two projects share a lot in terms of technical advantages over traditional tooling. Vite's dependency pre-bundling is also inspired by Snowpack v1 (now [`esinstall`](https://github.com/snowpackjs/snowpack/tree/main/esinstall)). Some of the main differences between the two projects are:
-
-**Production Build**
-
-Snowpack's default build output is unbundled: it transforms each file into separate built modules, which can then be fed into different "optimizers" that perform the actual bundling. The benefit of this is that you can choose between different end-bundlers to fit specific needs (e.g. webpack, Rollup, or even esbuild), the downside is that it's a bit of a fragmented experience - for example, the esbuild optimizer is still unstable, the Rollup optimizer is not officially maintained, and different optimizers have different output and configurations.
-
-Vite opts to have a deeper integration with one single bundler (Rollup) in order to provide a more streamlined experience. It also allows Vite to support a [Universal Plugin API](./api-plugin) that works for both dev and build.
-
-Due to a more integrated build process, Vite supports a wide range of features that are currently not available in Snowpack build optimizers:
-
-- [Multi-Page Support](./build#multi-page-app)
-- [Library Mode](./build#library-mode)
-- [Automatic CSS code-splitting](./features#css-code-splitting)
-- [Optimized async chunk loading](./features#async-chunk-loading-optimization)
-- Official [legacy mode plugin](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) that generates dual modern/legacy bundles and auto delivers the right bundle based on browser support.
-
-**Faster Dependency Pre-Bundling**
-
-Vite uses [esbuild](https://esbuild.github.io/) instead of Rollup for dependency pre-bundling. This results in significant performance improvements in terms of cold server start and re-bundling on dependency invalidations.
-
-**Monorepo Support**
-
-Vite is designed to handle monorepo setups and we have users successfully using it with Yarn, Yarn 2, and PNPM based monorepos.
-
-**CSS Pre-Processor Support**
-
-Vite provides more refined support for Sass and Less, including improved `@import` resolution (aliases and npm dependencies) and [automatic `url()` rebasing for inlined files](./features#import-inlining-and-rebasing).
-
-**First Class Vue Support**
-
-Vite was initially created to serve as the future foundation of [Vue.js](https://vuejs.org/) tooling. Although as of 2.0 Vite is now fully framework-agnostic, the official Vue plugin still provides first-class support for Vue's Single File Component format, covering all advanced features such as template asset reference resolving, `