vite 2.9.0-beta.9 → 2.9.0

package/dist/node/chunks/{dep-5633cdf8.js → dep-bcc0af00.js}

@@ -39,6 +39,14 @@ var joinMedia$1 = function (parentMedia, childMedia) {
   return media
 };
 
+var joinLayer$1 = function (parentLayer, childLayer) {
+  if (!parentLayer.length && childLayer.length) return childLayer
+  if (parentLayer.length && !childLayer.length) return parentLayer
+  if (!parentLayer.length && !childLayer.length) return []
+
+  return parentLayer.concat(childLayer)
+};
+
 // external tooling
 const resolve$1 = resolve__default;
 
@@ -330,6 +338,7 @@ var parseStatements$1 = function (result, styles) {
           type: "nodes",
           nodes,
           media: [],
+          layer: [],
         });
         nodes = [];
       }
@@ -342,6 +351,7 @@ var parseStatements$1 = function (result, styles) {
       type: "nodes",
       nodes,
       media: [],
+      layer: [],
     });
   }
 
@@ -354,6 +364,7 @@ function parseMedia(result, atRule) {
     type: "media",
     node: atRule,
     media: split(params, 0),
+    layer: [],
   }
 }
 
@@ -367,6 +378,7 @@ function parseCharset(result, atRule) {
     type: "charset",
     node: atRule,
     media: [],
+    layer: [],
   }
 }
 
@@ -377,10 +389,12 @@ function parseImport(result, atRule) {
       if (
         prev.type !== "comment" &&
         (prev.type !== "atrule" ||
-          (prev.name !== "import" && prev.name !== "charset"))
+          (prev.name !== "import" &&
+            prev.name !== "charset" &&
+            !(prev.name === "layer" && !prev.nodes)))
       ) {
         return result.warn(
-          "@import must precede all other statements (besides @charset)",
+          "@import must precede all other statements (besides @charset or empty @layer)",
           { node: atRule }
         )
       }
@@ -401,6 +415,7 @@ function parseImport(result, atRule) {
     type: "import",
     node: atRule,
     media: [],
+    layer: [],
   };
 
   // prettier-ignore
@@ -426,11 +441,31 @@ function parseImport(result, atRule) {
   else stmt.uri = params[0].nodes[0].value;
   stmt.fullUri = stringify(params[0]);
 
-  if (params.length > 2) {
-    if (params[1].type !== "space") {
+  let remainder = params;
+  if (remainder.length > 2) {
+    if (
+      (remainder[2].type === "word" || remainder[2].type === "function") &&
+      remainder[2].value === "layer"
+    ) {
+      if (remainder[1].type !== "space") {
+        return result.warn("Invalid import layer statement", { node: atRule })
+      }
+
+      if (remainder[2].nodes) {
+        stmt.layer = [stringify(remainder[2].nodes)];
+      } else {
+        stmt.layer = [""];
+      }
+      remainder = remainder.slice(2);
+    }
+  }
+
+  if (remainder.length > 2) {
+    if (remainder[1].type !== "space") {
       return result.warn("Invalid import media statement", { node: atRule })
     }
-    stmt.media = split(params, 2);
+
+    stmt.media = split(remainder, 2);
   }
 
   return stmt
@@ -441,6 +476,7 @@ const path = path__default;
 
 // internal tooling
 const joinMedia = joinMedia$1;
+const joinLayer = joinLayer$1;
 const resolveId = resolveId$1;
 const loadContent = loadContent$1;
 const processContent = processContent$1;
@@ -483,11 +519,13 @@ function AtImport(options) {
         throw new Error("plugins option must be an array")
       }
 
-      return parseStyles(result, styles, options, state, []).then(bundle => {
-        applyRaws(bundle);
-        applyMedia(bundle);
-        applyStyles(bundle, styles);
-      })
+      return parseStyles(result, styles, options, state, [], []).then(
+        bundle => {
+          applyRaws(bundle);
+          applyMedia(bundle);
+          applyStyles(bundle, styles);
+        }
+      )
 
       function applyRaws(bundle) {
         bundle.forEach((stmt, index) => {
@@ -505,21 +543,60 @@ function AtImport(options) {
 
       function applyMedia(bundle) {
         bundle.forEach(stmt => {
-          if (!stmt.media.length || stmt.type === "charset") return
+          if (
+            (!stmt.media.length && !stmt.layer.length) ||
+            stmt.type === "charset"
+          ) {
+            return
+          }
+
           if (stmt.type === "import") {
             stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}`;
-          } else if (stmt.type === "media")
+          } else if (stmt.type === "media") {
             stmt.node.params = stmt.media.join(", ");
-          else {
+          } else {
             const { nodes } = stmt;
             const { parent } = nodes[0];
-            const mediaNode = atRule({
-              name: "media",
-              params: stmt.media.join(", "),
-              source: parent.source,
-            });
 
-            parent.insertBefore(nodes[0], mediaNode);
+            let outerAtRule;
+            let innerAtRule;
+            if (stmt.media.length && stmt.layer.length) {
+              const mediaNode = atRule({
+                name: "media",
+                params: stmt.media.join(", "),
+                source: parent.source,
+              });
+
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: parent.source,
+              });
+
+              mediaNode.append(layerNode);
+              innerAtRule = layerNode;
+              outerAtRule = mediaNode;
+            } else if (stmt.media.length) {
+              const mediaNode = atRule({
+                name: "media",
+                params: stmt.media.join(", "),
+                source: parent.source,
+              });
+
+              innerAtRule = mediaNode;
+              outerAtRule = mediaNode;
+            } else if (stmt.layer.length) {
+              const layerNode = atRule({
+                name: "layer",
+                params: stmt.layer.filter(layer => layer !== "").join("."),
+                source: parent.source,
+              });
+
+              innerAtRule = layerNode;
+              outerAtRule = layerNode;
+            }
+
+            parent.insertBefore(nodes[0], outerAtRule);
 
             // remove nodes
             nodes.forEach(node => {
@@ -529,11 +606,11 @@ function AtImport(options) {
             // better output
             nodes[0].raws.before = nodes[0].raws.before || "\n";
 
-            // wrap new rules with media query
-            mediaNode.append(nodes);
+            // wrap new rules with media query and/or layer at rule
+            innerAtRule.append(nodes);
 
             stmt.type = "media";
-            stmt.node = mediaNode;
+            stmt.node = outerAtRule;
             delete stmt.nodes;
           }
         });
@@ -556,7 +633,7 @@ function AtImport(options) {
         });
       }
 
-      function parseStyles(result, styles, options, state, media) {
+      function parseStyles(result, styles, options, state, media, layer) {
         const statements = parseStatements(result, styles);
 
         return Promise.resolve(statements)
@@ -565,6 +642,7 @@ function AtImport(options) {
             return stmts.reduce((promise, stmt) => {
               return promise.then(() => {
                 stmt.media = joinMedia(media, stmt.media || []);
+                stmt.layer = joinLayer(layer, stmt.layer || []);
 
                 // skip protocol base uri (protocol://url) or protocol-relative
                 if (
@@ -676,7 +754,7 @@ function AtImport(options) {
 
       function loadImportContent(result, stmt, filename, options, state) {
         const atRule = stmt.node;
-        const { media } = stmt;
+        const { media, layer } = stmt;
         if (options.skipDuplicates) {
           // skip files already imported at the same scope
           if (
@@ -724,7 +802,7 @@ function AtImport(options) {
               }
 
               // recursion: import @import from imported file
-              return parseStyles(result, styles, options, state, media)
+              return parseStyles(result, styles, options, state, media, layer)
             })
           }
         )

package/dist/node/chunks/{dep-051d3e69.js → dep-e67ca846.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var require$$0 = require('postcss');
-var index$1 = require('./dep-f5b7cdd7.js');
+var index$1 = require('./dep-8db0e223.js');
 var path$2 = require('path');
 var require$$1 = require('crypto');
 var fs = require('fs');

package/dist/node/cli.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var require$$0 = require('events');
-var index = require('./chunks/dep-f5b7cdd7.js');
+var index = require('./chunks/dep-8db0e223.js');
 var perf_hooks = require('perf_hooks');
 require('fs');
 require('path');
@@ -683,7 +683,7 @@ cli
     .action(async (root, options) => {
     // output structure is preserved even after bundling so require()
     // is ok here
-    const { createServer } = await Promise.resolve().then(function () { return require('./chunks/dep-f5b7cdd7.js'); }).then(function (n) { return n.index$1; });
+    const { createServer } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.index$1; });
     try {
         const server = await createServer({
             root,
@@ -732,7 +732,7 @@ cli
     .option('--emptyOutDir', `[boolean] force empty outDir when it's outside of root`)
     .option('-w, --watch', `[boolean] rebuilds when modules have changed on disk`)
     .action(async (root, options) => {
-    const { build } = await Promise.resolve().then(function () { return require('./chunks/dep-f5b7cdd7.js'); }).then(function (n) { return n.build$1; });
+    const { build } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.build$1; });
     const buildOptions = cleanOptions(options);
     try {
         await build({
@@ -755,7 +755,7 @@ cli
     .command('optimize [root]', 'pre-bundle dependencies')
     .option('--force', `[boolean] force the optimizer to ignore the cache and re-bundle`)
     .action(async (root, options) => {
-    const { optimizeDeps } = await Promise.resolve().then(function () { return require('./chunks/dep-f5b7cdd7.js'); }).then(function (n) { return n.index; });
+    const { optimizeDeps } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.index; });
     try {
         const config = await index.resolveConfig({
             root,
@@ -778,7 +778,7 @@ cli
     .option('--https', `[boolean] use TLS + HTTP/2`)
     .option('--open [path]', `[boolean | string] open browser on startup`)
     .action(async (root, options) => {
-    const { preview } = await Promise.resolve().then(function () { return require('./chunks/dep-f5b7cdd7.js'); }).then(function (n) { return n.preview$1; });
+    const { preview } = await Promise.resolve().then(function () { return require('./chunks/dep-8db0e223.js'); }).then(function (n) { return n.preview$1; });
     try {
         const server = await preview({
             root,

package/dist/node/index.d.ts

@@ -495,6 +495,13 @@ export declare interface CSSOptions {
     devSourcemap?: boolean;
 }
 
+export declare interface CustomEventMap {
+    'vite:beforeUpdate': UpdatePayload
+    'vite:beforePrune': PrunePayload
+    'vite:beforeFullReload': FullReloadPayload
+    'vite:error': ErrorPayload
+}
+
 export declare interface CustomPayload {
     type: 'custom'
     event: string
@@ -755,7 +762,7 @@ export declare interface HmrContext {
 export declare interface HmrOptions {
     protocol?: string;
     host?: string;
-    port?: number | false;
+    port?: number;
     clientPort?: number;
     path?: string;
     timeout?: number;
@@ -1030,6 +1037,9 @@ export declare type IndexHtmlTransformResult = string | HtmlTagDescriptor[] | {
     tags: HtmlTagDescriptor[];
 };
 
+export declare type InferCustomEventPayload<T extends string> =
+T extends keyof CustomEventMap ? CustomEventMap[T] : any
+
 export declare interface InlineConfig extends UserConfig {
     configFile?: string | false;
     envFile?: false;
@@ -2870,7 +2880,7 @@ export declare interface WebSocketServer {
     /**
      * Send custom event
      */
-    send(event: string, payload?: CustomPayload['data']): void;
+    send<T extends string>(event: T, payload?: InferCustomEventPayload<T>): void;
     /**
      * Disconnect all clients and terminate the server.
      */
@@ -2879,13 +2889,13 @@ export declare interface WebSocketServer {
      * Handle custom event emitted by `import.meta.hot.send`
      */
     on: WebSocketServer_2['on'] & {
-        (event: string, listener: WebSocketCustomListener<any>): void;
+        <T extends string>(event: T, listener: WebSocketCustomListener<InferCustomEventPayload<T>>): void;
     };
     /**
      * Unregister event listener.
      */
     off: WebSocketServer_2['off'] & {
-        (event: string, listener: WebSocketCustomListener<any>): void;
+        (event: string, listener: Function): void;
     };
 }
 

package/dist/node/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./chunks/dep-f5b7cdd7.js');
+var index = require('./chunks/dep-8db0e223.js');
 require('fs');
 require('path');
 require('tty');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite",
-  "version": "2.9.0-beta.9",
+  "version": "2.9.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "Native-ESM powered web dev build tool",
@@ -57,7 +57,7 @@
     "@babel/types": "^7.17.0",
     "@jridgewell/trace-mapping": "^0.3.4",
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.0.2",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "13.1.3",
@@ -96,14 +96,14 @@
     "json5": "^2.2.1",
     "launch-editor-middleware": "^2.3.0",
     "magic-string": "^0.26.1",
-    "micromatch": "^4.0.4",
+    "micromatch": "^4.0.5",
     "mrmime": "^1.0.0",
     "node-forge": "^1.3.0",
     "okie": "^1.0.1",
     "open": "^8.4.0",
     "periscopic": "^2.0.3",
     "picocolors": "^1.0.0",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^14.1.0",
     "postcss-load-config": "^3.1.3",
     "postcss-modules": "^4.3.1",
     "resolve.exports": "^1.1.0",

package/src/client/client.ts

@@ -1,12 +1,6 @@
-import type {
-  ErrorPayload,
-  FullReloadPayload,
-  HMRPayload,
-  PrunePayload,
-  Update,
-  UpdatePayload
-} from 'types/hmrPayload'
-import type { CustomEventName } from 'types/customEvent'
+import type { ErrorPayload, HMRPayload, Update } from 'types/hmrPayload'
+import type { ViteHotContext } from 'types/hot'
+import type { InferCustomEventPayload } from 'types/customEvent'
 import { ErrorOverlay, overlayId } from './overlay'
 // eslint-disable-next-line node/no-missing-import
 import '@vite/env'
@@ -15,7 +9,7 @@ import '@vite/env'
 declare const __BASE__: string
 declare const __HMR_PROTOCOL__: string
 declare const __HMR_HOSTNAME__: string
-declare const __HMR_PORT__: string | false
+declare const __HMR_PORT__: string
 declare const __HMR_TIMEOUT__: number
 declare const __HMR_ENABLE_OVERLAY__: boolean
 
@@ -24,10 +18,7 @@ console.log('[vite] connecting...')
 // use server configuration, then fallback to inference
 const socketProtocol =
   __HMR_PROTOCOL__ || (location.protocol === 'https:' ? 'wss' : 'ws')
-const socketHost = __HMR_PORT__
-  ? `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
-  : `${__HMR_HOSTNAME__ || location.hostname}`
-
+const socketHost = `${__HMR_HOSTNAME__ || location.hostname}:${__HMR_PORT__}`
 const socket = new WebSocket(`${socketProtocol}://${socketHost}`, 'vite-hmr')
 const base = __BASE__ || '/'
 const messageBuffer: string[] = []
@@ -103,7 +94,7 @@ async function handleMessage(payload: HMRPayload) {
       })
       break
     case 'custom': {
-      notifyListeners(payload.event as CustomEventName<any>, payload.data)
+      notifyListeners(payload.event, payload.data)
       break
     }
     case 'full-reload':
@@ -156,19 +147,9 @@ async function handleMessage(payload: HMRPayload) {
   }
 }
 
-function notifyListeners(
-  event: 'vite:beforeUpdate',
-  payload: UpdatePayload
-): void
-function notifyListeners(event: 'vite:beforePrune', payload: PrunePayload): void
-function notifyListeners(
-  event: 'vite:beforeFullReload',
-  payload: FullReloadPayload
-): void
-function notifyListeners(event: 'vite:error', payload: ErrorPayload): void
 function notifyListeners<T extends string>(
-  event: CustomEventName<T>,
-  data: any
+  event: T,
+  data: InferCustomEventPayload<T>
 ): void
 function notifyListeners(event: string, data: any): void {
   const cbs = customListenersMap.get(event)
@@ -391,9 +372,7 @@ const ctxToListenersMap = new Map<
   Map<string, ((data: any) => void)[]>
 >()
 
-// Just infer the return type for now
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const createHotContext = (ownerPath: string) => {
+export function createHotContext(ownerPath: string): ViteHotContext {
   if (!dataMap.has(ownerPath)) {
     dataMap.set(ownerPath, {})
   }
@@ -434,12 +413,12 @@ export const createHotContext = (ownerPath: string) => {
     hotModulesMap.set(ownerPath, mod)
   }
 
-  const hot = {
+  const hot: ViteHotContext = {
     get data() {
       return dataMap.get(ownerPath)
     },
 
-    accept(deps: any, callback?: any) {
+    accept(deps?: any, callback?: any) {
       if (typeof deps === 'function' || !deps) {
         // self-accept: hot.accept(() => {})
         acceptDeps([ownerPath], ([mod]) => deps && deps(mod))
@@ -460,10 +439,11 @@ export const createHotContext = (ownerPath: string) => {
       )
     },
 
-    dispose(cb: (data: any) => void) {
+    dispose(cb) {
       disposeMap.set(ownerPath, cb)
     },
 
+    // @ts-expect-error untyped
     prune(cb: (data: any) => void) {
       pruneMap.set(ownerPath, cb)
     },
@@ -479,7 +459,7 @@ export const createHotContext = (ownerPath: string) => {
     },
 
     // custom events
-    on: (event: string, cb: (data: any) => void) => {
+    on(event, cb) {
       const addToMap = (map: Map<string, any[]>) => {
         const existing = map.get(event) || []
         existing.push(cb)
@@ -489,7 +469,7 @@ export const createHotContext = (ownerPath: string) => {
       addToMap(newListeners)
     },
 
-    send: (event: string, data?: any) => {
+    send(event, data) {
       messageBuffer.push(JSON.stringify({ type: 'custom', event, data }))
       sendMessageBuffer()
     }

package/types/customEvent.d.ts

@@ -1,5 +1,16 @@
-// See https://stackoverflow.com/a/63549561.
-export type CustomEventName<T extends string> = (T extends `vite:${T}`
-  ? never
-  : T) &
-  (`vite:${T}` extends T ? never : T)
+import type {
+  ErrorPayload,
+  FullReloadPayload,
+  PrunePayload,
+  UpdatePayload
+} from './hmrPayload'
+
+export interface CustomEventMap {
+  'vite:beforeUpdate': UpdatePayload
+  'vite:beforePrune': PrunePayload
+  'vite:beforeFullReload': FullReloadPayload
+  'vite:error': ErrorPayload
+}
+
+export type InferCustomEventPayload<T extends string> =
+  T extends keyof CustomEventMap ? CustomEventMap[T] : any

package/types/hot.d.ts

@@ -0,0 +1,25 @@
+import type { InferCustomEventPayload } from './customEvent'
+
+export interface ViteHotContext {
+  readonly data: any
+
+  accept(): void
+  accept(cb: (mod: any) => void): void
+  accept(dep: string, cb: (mod: any) => void): void
+  accept(deps: readonly string[], cb: (mods: any[]) => void): void
+
+  /**
+   * @deprecated
+   */
+  acceptDeps(): never
+
+  dispose(cb: (data: any) => void): void
+  decline(): void
+  invalidate(): void
+
+  on<T extends string>(
+    event: T,
+    cb: (payload: InferCustomEventPayload<T>) => void
+  ): void
+  send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
+}

package/types/importMeta.d.ts

@@ -20,48 +20,7 @@ interface GlobOptions {
 interface ImportMeta {
   url: string
 
-  readonly hot?: {
-    readonly data: any
-
-    accept(): void
-    accept(cb: (mod: any) => void): void
-    accept(dep: string, cb: (mod: any) => void): void
-    accept(deps: readonly string[], cb: (mods: any[]) => void): void
-
-    /**
-     * @deprecated
-     */
-    acceptDeps(): never
-
-    dispose(cb: (data: any) => void): void
-    decline(): void
-    invalidate(): void
-
-    on: {
-      (
-        event: 'vite:beforeUpdate',
-        cb: (payload: import('./hmrPayload').UpdatePayload) => void
-      ): void
-      (
-        event: 'vite:beforePrune',
-        cb: (payload: import('./hmrPayload').PrunePayload) => void
-      ): void
-      (
-        event: 'vite:beforeFullReload',
-        cb: (payload: import('./hmrPayload').FullReloadPayload) => void
-      ): void
-      (
-        event: 'vite:error',
-        cb: (payload: import('./hmrPayload').ErrorPayload) => void
-      ): void
-      <T extends string>(
-        event: import('./customEvent').CustomEventName<T>,
-        cb: (data: any) => void
-      ): void
-    }
-
-    send(event: string, data?: any): void
-  }
+  readonly hot?: import('./hot').ViteHotContext
 
   readonly env: ImportMetaEnv