From e531c4170da11ba6446e256b3af04a288841491a Mon Sep 17 00:00:00 2001 From: Remus Mate <3297808+mrm007@users.noreply.github.com> Date: Mon, 29 Jan 2024 10:22:39 +1100 Subject: [PATCH] Use the new compiler in Vite plugin (#1264) --- .changeset/integration-deps.md | 5 + .changeset/integration-normalizePath.md | 14 + .changeset/vite-plugin-compiler.md | 9 + .changeset/vite-plugin-emitCssInSsr.md | 7 + .changeset/vite-plugin-esbuildOptions.md | 5 + .changeset/vite-plugin-supported.md | 5 + package.json | 1 + packages/integration/package.json | 6 +- packages/integration/src/addFileScope.test.ts | 141 +++-- packages/integration/src/addFileScope.ts | 78 ++- packages/integration/src/compiler.ts | 123 +++-- packages/integration/src/index.ts | 2 +- packages/vite-plugin/package.json | 9 +- packages/vite-plugin/src/index.ts | 305 +++++------ packages/vite-plugin/src/postcss.ts | 43 -- pnpm-lock.yaml | 505 ++++++++---------- site/docs/integrations/vite.md | 28 - test-helpers/package.json | 5 +- test-helpers/src/startFixture/types.ts | 18 +- test-helpers/src/startFixture/vite.ts | 5 +- 20 files changed, 596 insertions(+), 718 deletions(-) create mode 100644 .changeset/integration-deps.md create mode 100644 .changeset/integration-normalizePath.md create mode 100644 .changeset/vite-plugin-compiler.md create mode 100644 .changeset/vite-plugin-emitCssInSsr.md create mode 100644 .changeset/vite-plugin-esbuildOptions.md create mode 100644 .changeset/vite-plugin-supported.md delete mode 100644 packages/vite-plugin/src/postcss.ts diff --git a/.changeset/integration-deps.md b/.changeset/integration-deps.md new file mode 100644 index 000000000..8869f1de2 --- /dev/null +++ b/.changeset/integration-deps.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/integration': patch +--- + +Update dependencies diff --git a/.changeset/integration-normalizePath.md b/.changeset/integration-normalizePath.md new file mode 100644 index 000000000..6c4fb3c1f --- /dev/null +++ b/.changeset/integration-normalizePath.md @@ -0,0 +1,14 @@ +--- +'@vanilla-extract/integration': minor +--- + +Export a `normalizePath` function that converts path separators to forward slashes + +**Example usage** + +```ts +import { normalizePath } from '@vanilla-extract/integration'; + +normalizePath('foo\\bar'); // 'foo/bar' +normalizePath('foo/bar'); // 'foo/bar' +``` diff --git a/.changeset/vite-plugin-compiler.md b/.changeset/vite-plugin-compiler.md new file mode 100644 index 000000000..76949948a --- /dev/null +++ b/.changeset/vite-plugin-compiler.md @@ -0,0 +1,9 @@ +--- +'@vanilla-extract/vite-plugin': major +--- + +The Vite plugin now uses a newer, faster, Vite-based compiler by default. + +The new compiler uses [`vite-node`](https://github.com/vitest-dev/vitest/tree/main/packages/vite-node) to parse and extract CSS from `.css.ts` files. This comes with all the benefits of using Vite, faster builds and the ability to use Vite plugins. + +The new compiler has been used in Remix ever since support for Vanilla Extract was introduced. diff --git a/.changeset/vite-plugin-emitCssInSsr.md b/.changeset/vite-plugin-emitCssInSsr.md new file mode 100644 index 000000000..890c47aa8 --- /dev/null +++ b/.changeset/vite-plugin-emitCssInSsr.md @@ -0,0 +1,7 @@ +--- +'@vanilla-extract/vite-plugin': major +--- + +The behaviour previously known as `emitCssInSsr` has been turned on by default. The `emitCssInSsr` option has been removed. + +This means that the CSS emitted by the plugin is now processed by Vite, so the plugin no longer needs to resolve PostCSS plugins and process the CSS output itself. diff --git a/.changeset/vite-plugin-esbuildOptions.md b/.changeset/vite-plugin-esbuildOptions.md new file mode 100644 index 000000000..b5064fb26 --- /dev/null +++ b/.changeset/vite-plugin-esbuildOptions.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/vite-plugin': major +--- + +The `esbuildOptions` option has been removed as we are no longer using esbuild internally diff --git a/.changeset/vite-plugin-supported.md b/.changeset/vite-plugin-supported.md new file mode 100644 index 000000000..cfd0a0ca9 --- /dev/null +++ b/.changeset/vite-plugin-supported.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/vite-plugin': major +--- + +Drop support for Vite < 4 diff --git a/package.json b/package.json index 515433e90..e91b822ad 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@swc/core": "^1.2.112", "@testing-library/jest-dom": "^5.11.9", "@types/jest": "^29.2.5", + "@types/node": "^20.9.5", "@types/testing-library__jest-dom": "^5.14.5", "@vanilla-extract/jest-transform": "*", "babel-jest": "^27.3.1", diff --git a/packages/integration/package.json b/packages/integration/package.json index 70b684ec7..9c5261bb8 100644 --- a/packages/integration/package.json +++ b/packages/integration/package.json @@ -23,10 +23,10 @@ "find-up": "^5.0.0", "javascript-stringify": "^2.0.1", "lodash": "^4.17.21", - "mlly": "^1.1.0", + "mlly": "^1.4.2", "outdent": "^0.8.0", - "vite": "^5.0.10", - "vite-node": "^1.1.0" + "vite": "^5.0.11", + "vite-node": "^1.2.0" }, "devDependencies": { "@types/babel__core": "^7.1.20", diff --git a/packages/integration/src/addFileScope.test.ts b/packages/integration/src/addFileScope.test.ts index 3dc96be9a..f9e5b7796 100644 --- a/packages/integration/src/addFileScope.test.ts +++ b/packages/integration/src/addFileScope.test.ts @@ -1,5 +1,15 @@ import { outdent } from 'outdent'; -import { addFileScope } from './addFileScope'; +import { sep, posix, win32 } from 'path'; + +import { addFileScope, normalizePath } from './addFileScope'; + +const raw = String.raw; + +// remove quotes around the snapshot +expect.addSnapshotSerializer({ + test: (val) => typeof val === 'string', + print: (val) => (val as string).trim(), +}); describe('ESM', () => { test('should add missing fileScope', () => { @@ -17,16 +27,12 @@ describe('ESM', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - " - - import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; - setFileScope("app/app.css.ts", "my-package"); - import {style} from '@vanilla-extract/css'; + import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; + setFileScope("app/app.css.ts", "my-package"); + import {style} from '@vanilla-extract/css'; export const myStyle = style({}); - endFileScope(); - - " + endFileScope(); `); }); @@ -46,19 +52,15 @@ describe('ESM', () => { globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER', }), ).toMatchInlineSnapshot(` - " - - import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter"; - __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER); - - import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; - setFileScope("app/app.css.ts", "my-package"); - import {style} from '@vanilla-extract/css'; + import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter"; + __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER); + import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; + setFileScope("app/app.css.ts", "my-package"); + import {style} from '@vanilla-extract/css'; export const myStyle = style({}); - endFileScope(); - __vanilla_css_adapter__.removeAdapter(); - " + endFileScope(); + __vanilla_css_adapter__.removeAdapter(); `); }); @@ -80,12 +82,12 @@ describe('ESM', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - "import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; + import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; setFileScope("app/app.css.ts", "my-package"); import {style} from '@vanilla-extract/css'; export const myStyle = style({}); - endFileScope();" + endFileScope(); `); }); @@ -110,12 +112,12 @@ describe('ESM', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - "import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; + import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; setFileScope("app/app.css.ts", "my-package"); import {style} from '@vanilla-extract/css'; export const myStyle = style({}); - endFileScope();" + endFileScope(); `); }); @@ -137,13 +139,13 @@ describe('ESM', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - "import * as vanillaFileScope from "@vanilla-extract/css/fileScope"; - vanillaFileScope.setFileScope("app/app.css.ts", "my-package"); - import {style} from '@vanilla-extract/css'; + import * as vanillaFileScope from "@vanilla-extract/css/fileScope"; + vanillaFileScope.setFileScope("app/app.css.ts", "my-package"); + import {style} from '@vanilla-extract/css'; - export const myStyle = style({}); - vanillaFileScope.endFileScope();" - `); + export const myStyle = style({}); + vanillaFileScope.endFileScope(); + `); }); }); @@ -164,17 +166,13 @@ describe('CJS', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - " - - const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); - __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package"); - const _css = require('@vanilla-extract/css'); + const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); + __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package"); + const _css = require('@vanilla-extract/css'); var myStyle = _css.style({}); exports.myStyle = myStyle; - __vanilla_filescope__.endFileScope(); - ; - " + __vanilla_filescope__.endFileScope(); `); }); @@ -195,20 +193,16 @@ describe('CJS', () => { globalAdapterIdentifier: 'MY_GLOBAL_ADAPTER', }), ).toMatchInlineSnapshot(` - " - - const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter"); - __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER); - - const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); - __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package"); - const _css = require('@vanilla-extract/css'); + const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter"); + __vanilla_css_adapter__.setAdapter(MY_GLOBAL_ADAPTER); + const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); + __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package"); + const _css = require('@vanilla-extract/css'); var myStyle = _css.style({}); exports.myStyle = myStyle; - __vanilla_filescope__.endFileScope(); - __vanilla_css_adapter__.removeAdapter();; - " + __vanilla_filescope__.endFileScope(); + __vanilla_css_adapter__.removeAdapter(); `); }); @@ -231,13 +225,13 @@ describe('CJS', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - "const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); + const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package"); const _css = require('@vanilla-extract/css'); var myStyle = _css.style({}); exports.myStyle = myStyle; - __vanilla_filescope__.endFileScope();" + __vanilla_filescope__.endFileScope(); `); }); @@ -263,13 +257,54 @@ describe('CJS', () => { packageName: 'my-package', }), ).toMatchInlineSnapshot(` - "const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); + const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); __vanilla_filescope__.setFileScope("app/app.css.ts", "my-package"); const _css = require('@vanilla-extract/css'); const myStyle = _css.style({}); exports.myStyle = myStyle; - __vanilla_filescope__.endFileScope();" + __vanilla_filescope__.endFileScope(); `); }); }); + +test('platform-specific relative path', () => { + const { rootPath, filePath } = { + [posix.sep]: { + rootPath: '/the-root', + filePath: '/the-root/app/app.css.ts', + }, + [win32.sep]: { + rootPath: raw`D:\the-root`, + filePath: raw`D:\the-root\app\app.css.ts`, + }, + }[sep]; + + const source = outdent` + import { style } from '@vanilla-extract/css'; + + export const myStyle = style({}); + `; + + // The snapshot should be the same for either platform + expect( + addFileScope({ + source, + rootPath, + filePath, + packageName: 'my-package', + }), + ).toMatchInlineSnapshot(` + import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; + setFileScope("app/app.css.ts", "my-package"); + import { style } from '@vanilla-extract/css'; + + export const myStyle = style({}); + endFileScope(); + `); +}); + +test('normalizePath()', () => { + expect(normalizePath(raw`foo\bar`)).toMatchInlineSnapshot(`foo/bar`); + expect(normalizePath(raw`foo/bar`)).toMatchInlineSnapshot(`foo/bar`); +}); diff --git a/packages/integration/src/addFileScope.ts b/packages/integration/src/addFileScope.ts index 8e06d303d..c57d9fe6f 100644 --- a/packages/integration/src/addFileScope.ts +++ b/packages/integration/src/addFileScope.ts @@ -1,5 +1,11 @@ -import { posix, relative, sep } from 'path'; +import { posix, relative, win32 } from 'path'; import { detectSyntax } from 'mlly'; +import outdent from 'outdent'; + +// Inlined from @rollup/pluginutils +// https://github.com/rollup/plugins/blob/33174f956304ab4aad4bbaba656f627c31679dc5/packages/pluginutils/src/normalizePath.ts#L5-L7 +export const normalizePath = (filename: string) => + filename.split(win32.sep).join(posix.sep); interface AddFileScopeParams { source: string; @@ -16,54 +22,46 @@ export function addFileScope({ globalAdapterIdentifier, }: AddFileScopeParams) { // Encode windows file paths as posix - const normalizedPath = posix.join(...relative(rootPath, filePath).split(sep)); + const normalizedPath = normalizePath(relative(rootPath, filePath)); + + const { hasESM, isMixed } = detectSyntax(source); - if (source.indexOf('@vanilla-extract/css/fileScope') > -1) { - return source.replace( + if (source.includes('@vanilla-extract/css/fileScope')) { + source = source.replace( /setFileScope\(((\n|.)*?)\)/, `setFileScope("${normalizedPath}", "${packageName}")`, ); + } else { + if (hasESM && !isMixed) { + source = outdent` + import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; + setFileScope("${normalizedPath}", "${packageName}"); + ${source} + endFileScope(); + `; + } else { + source = outdent` + const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); + __vanilla_filescope__.setFileScope("${normalizedPath}", "${packageName}"); + ${source} + __vanilla_filescope__.endFileScope(); + `; + } } - const { hasESM, isMixed } = detectSyntax(source); - - if (hasESM && !isMixed) { - const setAdapterSnippet = globalAdapterIdentifier - ? ` - import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter"; - __vanilla_css_adapter__.setAdapter(${globalAdapterIdentifier}); - ` - : ''; - const removeAdapterSnippet = setAdapterSnippet - ? '__vanilla_css_adapter__.removeAdapter();' - : ''; + if (globalAdapterIdentifier) { + const adapterImport = + hasESM && !isMixed + ? 'import * as __vanilla_css_adapter__ from "@vanilla-extract/css/adapter";' + : 'const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter");'; - return ` - ${setAdapterSnippet} - import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope"; - setFileScope("${normalizedPath}", "${packageName}"); + source = outdent` + ${adapterImport} + __vanilla_css_adapter__.setAdapter(${globalAdapterIdentifier}); ${source} - endFileScope(); - ${removeAdapterSnippet} + __vanilla_css_adapter__.removeAdapter(); `; } - const setAdapterSnippet = globalAdapterIdentifier - ? ` - const __vanilla_css_adapter__ = require("@vanilla-extract/css/adapter"); - __vanilla_css_adapter__.setAdapter(${globalAdapterIdentifier}); - ` - : ''; - const removeAdapterSnippet = setAdapterSnippet - ? '__vanilla_css_adapter__.removeAdapter();' - : ''; - - return ` - ${setAdapterSnippet} - const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope"); - __vanilla_filescope__.setFileScope("${normalizedPath}", "${packageName}"); - ${source} - __vanilla_filescope__.endFileScope(); - ${removeAdapterSnippet}; - `; + return source; } diff --git a/packages/integration/src/compiler.ts b/packages/integration/src/compiler.ts index 79cf5d597..8dffc5d17 100644 --- a/packages/integration/src/compiler.ts +++ b/packages/integration/src/compiler.ts @@ -1,13 +1,13 @@ import { join, relative, isAbsolute } from 'path'; import type { Adapter } from '@vanilla-extract/css'; import { transformCss } from '@vanilla-extract/css/transformCss'; -import type { ModuleNode, Plugin as VitePlugin } from 'vite'; -import type { ViteNodeRunner } from 'vite-node/client'; +import type { ModuleNode, InlineConfig as ViteConfig } from 'vite'; import type { IdentifierOption } from './types'; import { cssFileFilter } from './filters'; import { getPackageInfo } from './packageInfo'; import { transform } from './transform'; +import { normalizePath } from './addFileScope'; import { lock } from './lock'; import { serializeVanillaModule } from './processVanillaFile'; @@ -17,22 +17,27 @@ type Composition = Parameters[0]; const globalAdapterIdentifier = '__vanilla_globalCssAdapter__'; const scanModule = (entryModule: ModuleNode, root: string) => { - const queue = [entryModule]; + const queue = new Set([entryModule]); const cssDeps = new Set(); const watchFiles = new Set(); for (const moduleNode of queue) { + if (moduleNode.id?.includes('@vanilla-extract/')) { + continue; + } + const relativePath = moduleNode.id && relative(root, moduleNode.id); - if (relativePath) { + if (relativePath && cssFileFilter.test(relativePath)) { cssDeps.add(relativePath); } - if (moduleNode.file) { watchFiles.add(moduleNode.file); } - queue.push(...moduleNode.importedModules); + for (const dep of moduleNode.importedModules) { + queue.add(dep); + } } // This ensures the root module's styles are last in terms of CSS ordering @@ -41,23 +46,14 @@ const scanModule = (entryModule: ModuleNode, root: string) => { return { cssDeps: [...tail, head], watchFiles }; }; -// We lazily load this utility from Vite -let normalizeModuleId: (fsPath: string) => string; - const createViteServer = async ({ root, identifiers, - vitePlugins = [], -}: { - root: string; - identifiers: IdentifierOption; - vitePlugins?: Array; -}) => { + vitePlugins, +}: Required>) => { const pkg = getPackageInfo(root); const vite = await import('vite'); - normalizeModuleId = vite.normalizePath; - const server = await vite.createServer({ configFile: false, root, @@ -114,7 +110,18 @@ const createViteServer = async ({ const node = new ViteNodeServer(server); - const runner = new ViteNodeRunner({ + class ViteNodeRunnerWithContext extends ViteNodeRunner { + cssAdapter: Adapter | undefined; + + prepareContext(context: Record): Record { + return { + ...super.prepareContext(context), + [globalAdapterIdentifier]: this.cssAdapter, + }; + } + } + + const runner = new ViteNodeRunnerWithContext({ root, base: server.config.base, fetchModule(id) { @@ -135,6 +142,28 @@ const createViteServer = async ({ }; }; +class NormalizedMap extends Map { + constructor(readonly root: string) { + super(); + } + + #normalizePath(filePath: string) { + return normalizePath( + isAbsolute(filePath) ? relative(this.root, filePath) : filePath, + ); + } + + get(filePath: string) { + filePath = this.#normalizePath(filePath); + return super.get(filePath); + } + + set(filePath: string, value: V) { + filePath = this.#normalizePath(filePath); + return super.set(filePath, value); + } +} + export interface Compiler { processVanillaFile( filePath: string, @@ -155,28 +184,20 @@ export interface CreateCompilerOptions { root: string; cssImportSpecifier?: (filePath: string) => string; identifiers?: IdentifierOption; - vitePlugins?: Array; + vitePlugins?: ViteConfig['plugins']; } export const createCompiler = ({ root, identifiers = 'debug', cssImportSpecifier = (filePath) => filePath + '.vanilla.css', - vitePlugins, + vitePlugins = [], }: CreateCompilerOptions): Compiler => { - let originalPrepareContext: ViteNodeRunner['prepareContext']; - const vitePromise = createViteServer({ root, identifiers, vitePlugins, - }).then(({ server, runner }) => { - // Store the original method so we can monkey patch it on demand - originalPrepareContext = runner.prepareContext; - return { server, runner }; }); - const cssCache = new Map(); - const processVanillaFileCache = new Map< string, { @@ -185,13 +206,11 @@ export const createCompiler = ({ } >(); - const classRegistrationsByModuleId = new Map< - string, - { - localClassNames: Set; - composedClassLists: Array; - } - >(); + const cssCache = new NormalizedMap<{ css: string }>(root); + const classRegistrationsByModuleId = new NormalizedMap<{ + localClassNames: Set; + composedClassLists: Array; + }>(root); return { async processVanillaFile( @@ -217,7 +236,7 @@ export const createCompiler = ({ } } - const cssByModuleId = new Map>(); + const cssByModuleId = new NormalizedMap>(root); const localClassNames = new Set(); const composedClassLists: Array = []; @@ -225,18 +244,18 @@ export const createCompiler = ({ getIdentOption: () => identifiers, onBeginFileScope: (fileScope) => { // Before evaluating a file, reset the cache for it - const moduleId = normalizeModuleId(fileScope.filePath); + const moduleId = normalizePath(fileScope.filePath); cssByModuleId.set(moduleId, []); classRegistrationsByModuleId.set(moduleId, { localClassNames: new Set(), composedClassLists: [], }); }, - onEndFileScope: ({ filePath }) => { + onEndFileScope: (fileScope) => { // For backwards compatibility, ensure the cache is populated even if // a file didn't contain any CSS. This is to ensure that the only // error messages shown in older versions are the ones below. - const moduleId = normalizeModuleId(filePath); + const moduleId = normalizePath(fileScope.filePath); const cssObjs = cssByModuleId.get(moduleId) ?? []; cssByModuleId.set(moduleId, cssObjs); }, @@ -249,7 +268,7 @@ export const createCompiler = ({ localClassNames.add(className); - const moduleId = normalizeModuleId(fileScope.filePath); + const moduleId = normalizePath(fileScope.filePath); classRegistrationsByModuleId .get(moduleId)! .localClassNames.add(className); @@ -263,7 +282,7 @@ export const createCompiler = ({ composedClassLists.push(composedClassList); - const moduleId = normalizeModuleId(fileScope.filePath); + const moduleId = normalizePath(fileScope.filePath); classRegistrationsByModuleId .get(moduleId)! .composedClassLists.push(composedClassList); @@ -272,7 +291,7 @@ export const createCompiler = ({ // This compiler currently retains all composition classes }, appendCss: (css, fileScope) => { - const moduleId = normalizeModuleId(fileScope.filePath); + const moduleId = normalizePath(fileScope.filePath); const cssObjs = cssByModuleId.get(moduleId) ?? []; cssObjs.push(css); @@ -282,17 +301,11 @@ export const createCompiler = ({ const { fileExports, cssImports, watchFiles, lastInvalidationTimestamp } = await lock(async () => { - // Monkey patch the prepareContext method to inject the adapter - runner.prepareContext = function (...args) { - return { - ...originalPrepareContext.apply(this, args), - [globalAdapterIdentifier]: cssAdapter, - }; - }; + runner.cssAdapter = cssAdapter; const fileExports = await runner.executeFile(filePath); - const moduleId = normalizeModuleId(filePath); + const moduleId = normalizePath(filePath); const moduleNode = server.moduleGraph.getModuleById(moduleId); if (!moduleNode) { @@ -304,7 +317,7 @@ export const createCompiler = ({ const { cssDeps, watchFiles } = scanModule(moduleNode, root); for (const cssDep of cssDeps) { - const cssDepModuleId = normalizeModuleId(cssDep); + const cssDepModuleId = normalizePath(cssDep); const cssObjs = cssByModuleId.get(cssDepModuleId); const cachedCss = cssCache.get(cssDepModuleId); const cachedClassRegistrations = @@ -369,16 +382,10 @@ export const createCompiler = ({ return result; }, getCssForFile(filePath: string) { - if (!normalizeModuleId) { - throw new Error( - `Compiler is still loading. No CSS for file: ${filePath}`, - ); - } - filePath = isAbsolute(filePath) ? filePath : join(root, filePath); const rootRelativePath = relative(root, filePath); - const moduleId = normalizeModuleId(rootRelativePath); + const moduleId = normalizePath(rootRelativePath); const result = cssCache.get(moduleId); if (!result) { diff --git a/packages/integration/src/index.ts b/packages/integration/src/index.ts index f6152d296..b9a3fe8b8 100644 --- a/packages/integration/src/index.ts +++ b/packages/integration/src/index.ts @@ -8,7 +8,7 @@ export { getPackageInfo } from './packageInfo'; export { compile, vanillaExtractTransformPlugin } from './compile'; export { createCompiler } from './compiler'; export { hash } from './hash'; -export { addFileScope } from './addFileScope'; +export { addFileScope, normalizePath } from './addFileScope'; export { serializeCss, deserializeCss } from './serialize'; export { transformSync, transform } from './transform'; diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json index 75c8e8c32..12acff78e 100644 --- a/packages/vite-plugin/package.json +++ b/packages/vite-plugin/package.json @@ -15,15 +15,12 @@ "author": "SEEK", "license": "MIT", "dependencies": { - "@vanilla-extract/integration": "^6.3.0", - "outdent": "^0.8.0", - "postcss": "^8.3.6", - "postcss-load-config": "^4.0.1" + "@vanilla-extract/integration": "^6.3.0" }, "devDependencies": { - "vite": "npm:vite@^2.7.0" + "vite": "npm:vite@^5.0.11" }, "peerDependencies": { - "vite": "^2.2.3 || ^3.0.0 || ^4.0.3 || ^5.0.0" + "vite": "^4.0.3 || ^5.0.0" } } diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 21d3c39e6..8059858cf 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -1,62 +1,97 @@ import path from 'path'; -import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite'; -import outdent from 'outdent'; +import type { Plugin, ResolvedConfig, ViteDevServer, Rollup } from 'vite'; import { cssFileFilter, - processVanillaFile, - compile, IdentifierOption, getPackageInfo, - CompileOptions, transform, + type Compiler, + createCompiler, + normalizePath, } from '@vanilla-extract/integration'; -import { type PostCSSConfigResult, resolvePostcssConfig } from './postcss'; - -const styleUpdateEvent = (fileId: string) => - `vanilla-extract-style-update:${fileId}`; const virtualExtCss = '.vanilla.css'; -const virtualExtJs = '.vanilla.js'; + +const isVirtualId = (id: string) => id.endsWith(virtualExtCss); +const fileIdToVirtualId = (id: string) => `${id}${virtualExtCss}`; +const virtualIdToFileId = (virtualId: string) => + virtualId.slice(0, -virtualExtCss.length); interface Options { identifiers?: IdentifierOption; - emitCssInSsr?: boolean; - esbuildOptions?: CompileOptions['esbuildOptions']; + unstable_mode?: 'transform' | 'emitCss'; } export function vanillaExtractPlugin({ identifiers, - emitCssInSsr, - esbuildOptions, + unstable_mode: mode = 'emitCss', }: Options = {}): Plugin { let config: ResolvedConfig; let server: ViteDevServer; - let postCssConfig: PostCSSConfigResult | null; - // We lazily load this utility from Vite - let normalizePath: (fsPath: string) => string; - const cssMap = new Map(); - - const hasEmitCssOverride = typeof emitCssInSsr === 'boolean'; - let resolvedEmitCssInSsr: boolean = hasEmitCssOverride - ? emitCssInSsr - : !!process.env.VITE_RSC_BUILD; let packageName: string; + let compiler: Compiler | undefined; + + const getIdentOption = () => + identifiers ?? (config.mode === 'production' ? 'short' : 'debug'); + const getAbsoluteId = (filePath: string) => { + let resolvedId = filePath; + + if ( + filePath.startsWith(config.root) || + // In monorepos the absolute path will be outside of config.root, so we check that they have the same root on the file system + (path.isAbsolute(filePath) && + filePath.split(path.sep)[1] === config.root.split(path.sep)[1]) + ) { + resolvedId = filePath; + } else { + // In SSR mode we can have paths like /app/styles.css.ts + resolvedId = path.join(config.root, filePath); + } + + return normalizePath(resolvedId); + }; - const getAbsoluteVirtualFileId = (source: string) => - normalizePath(path.join(config.root, source)); + function invalidateModule(absoluteId: string) { + if (!server) return; + + const { moduleGraph } = server; + const modules = moduleGraph.getModulesByFile(absoluteId); + + if (modules) { + for (const module of modules) { + moduleGraph.invalidateModule(module); + + // Vite uses this timestamp to add `?t=` query string automatically for HMR. + module.lastHMRTimestamp = + module.lastInvalidationTimestamp || Date.now(); + } + } + } + + function addWatchFiles( + this: Rollup.PluginContext, + fromId: string, + files: Set, + ) { + // We don't need to watch files in build mode + if (config.command === 'build' && !config.build.watch) { + return; + } + + for (const file of files) { + if (!file.includes('node_modules') && normalizePath(file) !== fromId) { + this.addWatchFile(file); + } + } + } return { name: 'vanilla-extract', - enforce: 'pre', configureServer(_server) { server = _server; }, - config(_userConfig, env) { - const include = - env.command === 'serve' ? ['@vanilla-extract/css/injectStyles'] : []; - + config() { return { - optimizeDeps: { include }, ssr: { external: [ '@vanilla-extract/css', @@ -69,100 +104,38 @@ export function vanillaExtractPlugin({ async configResolved(resolvedConfig) { config = resolvedConfig; packageName = getPackageInfo(config.root).name; - normalizePath = (await import('vite')).normalizePath; - - if (config.command === 'serve') { - postCssConfig = await resolvePostcssConfig(config); - } - if ( - !hasEmitCssOverride && - config.plugins.some((plugin) => - [ - 'astro:build', - 'remix', - 'solid-start-server', - 'vite-plugin-qwik', - 'vite-plugin-svelte', - ].includes(plugin.name), - ) - ) { - resolvedEmitCssInSsr = true; - } - }, - resolveId(source) { - const [validId, query] = source.split('?'); - if (!validId.endsWith(virtualExtCss) && !validId.endsWith(virtualExtJs)) { - return; - } - - // Absolute paths seem to occur often in monorepos, where files are - // imported from outside the config root. - const absoluteId = source.startsWith(config.root) - ? source - : getAbsoluteVirtualFileId(validId); - - // There should always be an entry in the `cssMap` here. - // The only valid scenario for a missing one is if someone had written - // a file in their app using the .vanilla.js/.vanilla.css extension - if (cssMap.has(absoluteId)) { - // Keep the original query string for HMR. - return absoluteId + (query ? `?${query}` : ''); + if (mode !== 'transform') { + compiler = createCompiler({ + root: config.root, + identifiers: getIdentOption(), + cssImportSpecifier: fileIdToVirtualId, + vitePlugins: config.inlineConfig.plugins + ?.flat() + // Prevent an infinite loop where the compiler creates a new instance of the plugin, which creates a new compiler etc. + .filter( + (plugin) => + typeof plugin === 'object' && + plugin !== null && + 'name' in plugin && + plugin.name !== 'vanilla-extract', + ), + }); } }, - load(id) { - const [validId] = id.split('?'); - - if (!cssMap.has(validId)) { - return; - } - - const css = cssMap.get(validId); - - if (typeof css !== 'string') { - return; - } - - if (validId.endsWith(virtualExtCss)) { - return css; - } - - return outdent` - import { injectStyles } from '@vanilla-extract/css/injectStyles'; - - const inject = (css) => injectStyles({ - fileScope: ${JSON.stringify({ filePath: validId })}, - css - }); - - inject(${JSON.stringify(css)}); - - if (import.meta.hot) { - import.meta.hot.on('${styleUpdateEvent(validId)}', (css) => { - inject(css); - }); - } - `; + buildEnd() { + compiler?.close(); }, - async transform(code, id, ssrParam) { + async transform(code, id) { const [validId] = id.split('?'); if (!cssFileFilter.test(validId)) { return null; } - const identOption = - identifiers ?? (config.mode === 'production' ? 'short' : 'debug'); - - let ssr: boolean | undefined; - - if (typeof ssrParam === 'boolean') { - ssr = ssrParam; - } else { - ssr = ssrParam?.ssr; - } + const identOption = getIdentOption(); - if (ssr && !resolvedEmitCssInSsr) { + if (mode === 'transform') { return transform({ source: code, filePath: normalizePath(validId), @@ -172,86 +145,52 @@ export function vanillaExtractPlugin({ }); } - const { source, watchFiles } = await compile({ - filePath: validId, - cwd: config.root, - esbuildOptions, - identOption, - }); + if (compiler) { + const absoluteId = getAbsoluteId(validId); - for (const file of watchFiles) { - // In start mode, we need to prevent the file from rewatching itself. - // If it's a `build --watch`, it needs to watch everything. - if (config.command === 'build' || normalizePath(file) !== validId) { - this.addWatchFile(file); - } - } - - const output = await processVanillaFile({ - source, - filePath: validId, - identOption, - serializeVirtualCssPath: async ({ fileScope, source }) => { - const rootRelativeId = `${fileScope.filePath}${ - config.command === 'build' || (ssr && resolvedEmitCssInSsr) - ? virtualExtCss - : virtualExtJs - }`; - const absoluteId = getAbsoluteVirtualFileId(rootRelativeId); + const { source, watchFiles } = await compiler.processVanillaFile( + absoluteId, + { outputCss: true }, + ); - let cssSource = source; + addWatchFiles.call(this, absoluteId, watchFiles); - if (postCssConfig) { - const postCssResult = await (await import('postcss')) - .default(postCssConfig.plugins) - .process(source, { - ...postCssConfig.options, - from: undefined, - map: false, - }); + // We have to invalidate the virtual module, not the real one we just transformed + invalidateModule(fileIdToVirtualId(absoluteId)); - cssSource = postCssResult.css; - } + return { + code: source, + map: { mappings: '' }, + }; + } + }, + resolveId(source) { + const [validId, query] = source.split('?'); - if ( - server && - cssMap.has(absoluteId) && - cssMap.get(absoluteId) !== cssSource - ) { - const { moduleGraph } = server; - const modules = Array.from( - moduleGraph.getModulesByFile(absoluteId) || [], - ); + if (!isVirtualId(validId)) return; - for (const module of modules) { - if (module) { - moduleGraph.invalidateModule(module); + const absoluteId = getAbsoluteId(validId); - // Vite uses this timestamp to add `?t=` query string automatically for HMR. - module.lastHMRTimestamp = - (module as any).lastInvalidationTimestamp || Date.now(); - } - } + if ( + // We should always have CSS for a file here. + // The only valid scenario for a missing one is if someone had written + // a file in their app using the .vanilla.js/.vanilla.css extension + compiler?.getCssForFile(virtualIdToFileId(absoluteId)) + ) { + // Keep the original query string for HMR. + return absoluteId + (query ? `?${query}` : ''); + } + }, + load(id) { + const [validId] = id.split('?'); - server.ws.send({ - type: 'custom', - event: styleUpdateEvent(absoluteId), - data: cssSource, - }); - } + if (!isVirtualId(validId) || !compiler) return; - cssMap.set(absoluteId, cssSource); + const absoluteId = getAbsoluteId(validId); - // We use the root relative id here to ensure file contents (content-hashes) - // are consistent across build machines - return `import "${rootRelativeId}";`; - }, - }); + const { css } = compiler.getCssForFile(virtualIdToFileId(absoluteId)); - return { - code: output, - map: { mappings: '' }, - }; + return css; }, }; } diff --git a/packages/vite-plugin/src/postcss.ts b/packages/vite-plugin/src/postcss.ts deleted file mode 100644 index 9fa1beace..000000000 --- a/packages/vite-plugin/src/postcss.ts +++ /dev/null @@ -1,43 +0,0 @@ -import type postcssrc from 'postcss-load-config'; -import type { ResolvedConfig } from 'vite'; - -export type PostCSSConfigResult = Pick; - -// Mostly copied from vite's implementation -// https://github.com/vitejs/vite/blob/efec70f816b80e55b64255b32a5f120e1cf4e4be/packages/vite/src/node/plugins/css.ts -export const resolvePostcssConfig = async ( - config: ResolvedConfig, -): Promise => { - // inline postcss config via vite config - const inlineOptions = config.css?.postcss; - const inlineOptionsIsString = typeof inlineOptions === 'string'; - - if (inlineOptions && !inlineOptionsIsString) { - const options = { ...inlineOptions }; - - delete options.plugins; - return { - options, - plugins: inlineOptions.plugins || [], - }; - } else { - try { - const searchPath = - typeof inlineOptions === 'string' ? inlineOptions : config.root; - - const postCssConfig = await ( - await import('postcss-load-config') - ).default({}, searchPath); - - return { - options: postCssConfig.options, - plugins: postCssConfig.plugins, - }; - } catch (e: any) { - if (!/No PostCSS Config found/.test(e.message)) { - throw e; - } - return null; - } - } -}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b68aef83..b6645a91e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,6 +49,9 @@ importers: '@types/jest': specifier: ^29.2.5 version: 29.2.5 + '@types/node': + specifier: ^20.9.5 + version: 20.9.5 '@types/testing-library__jest-dom': specifier: ^5.14.5 version: 5.14.5 @@ -366,17 +369,17 @@ importers: specifier: ^4.17.21 version: 4.17.21 mlly: - specifier: ^1.1.0 + specifier: ^1.4.2 version: 1.4.2 outdent: specifier: ^0.8.0 version: 0.8.0 vite: - specifier: ^5.0.10 - version: 5.0.10(@types/node@20.9.5) + specifier: ^5.0.11 + version: 5.0.11(@types/node@20.9.5) vite-node: - specifier: ^1.1.0 - version: 1.1.0(@types/node@20.9.5) + specifier: ^1.2.0 + version: 1.2.0(@types/node@20.9.5) devDependencies: '@types/babel__core': specifier: ^7.1.20 @@ -466,19 +469,10 @@ importers: '@vanilla-extract/integration': specifier: ^6.3.0 version: link:../integration - outdent: - specifier: ^0.8.0 - version: 0.8.0 - postcss: - specifier: ^8.3.6 - version: 8.4.32 - postcss-load-config: - specifier: ^4.0.1 - version: 4.0.2(postcss@8.4.32)(ts-node@10.9.1) devDependencies: vite: - specifier: npm:vite@^2.7.0 - version: 2.9.16 + specifier: npm:vite@^5.0.11 + version: 5.0.11(@types/node@20.9.5) packages/webpack-plugin: dependencies: @@ -758,7 +752,7 @@ importers: specifier: ^1.0.28 version: 1.0.28(supports-color@6.1.0) postcss: - specifier: ^8.3.6 + specifier: ^8.4.32 version: 8.4.32 prettier: specifier: ^2.8.8 @@ -770,8 +764,11 @@ importers: specifier: ^2.0.0 version: 2.0.0(webpack@5.64.2) vite: - specifier: npm:vite@^2.7.0 - version: 2.9.16 + specifier: npm:vite@^5.0.11 + version: 5.0.11(@types/node@20.9.5) + vite-plugin-inspect: + specifier: ^0.8.1 + version: 0.8.1(rollup@2.79.1)(vite@5.0.11) webpack: specifier: ^5.36.1 version: 5.64.2(@swc/core@1.2.112)(esbuild@0.19.12) @@ -942,6 +939,10 @@ packages: '@jridgewell/gen-mapping': 0.1.1 '@jridgewell/trace-mapping': 0.3.15 + /@antfu/utils@0.7.7: + resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==} + dev: false + /@babel/code-frame@7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} engines: {node: '>=6.9.0'} @@ -2607,14 +2608,6 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-loong64@0.14.54: - resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==} - engines: {node: '>=12'} - cpu: [loong64] - os: [linux] - requiresBuild: true - optional: true - /@esbuild/linux-loong64@0.19.12: resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==} engines: {node: '>=12'} @@ -4736,8 +4729,8 @@ packages: playwright: 1.40.1 dev: false - /@polka/url@1.0.0-next.21: - resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} + /@polka/url@1.0.0-next.24: + resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==} /@preconstruct/cli@2.8.2: resolution: {integrity: sha512-/nra7Arq622kVCfvQi4nhrZN+0m1OVq0PAuUcMLKNUR8O/JHOmesultWpeTGB17HzYEx8qYWO11QaTF7oz1yAQ==} @@ -4874,12 +4867,26 @@ packages: picomatch: 2.3.1 dev: true + /@rollup/pluginutils@5.1.0(rollup@2.79.1): + resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.5 + estree-walker: 2.0.2 + picomatch: 2.3.1 + rollup: 2.79.1 + dev: false + /@rollup/rollup-android-arm-eabi@4.9.1: resolution: {integrity: sha512-6vMdBZqtq1dVQ4CWdhFwhKZL6E4L1dV6jUjuBvsavvNJSppzi6dLBbuV+3+IyUREaj9ZFvQefnQm28v4OCXlig==} cpu: [arm] os: [android] requiresBuild: true - dev: false optional: true /@rollup/rollup-android-arm64@4.9.1: @@ -4887,7 +4894,6 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: false optional: true /@rollup/rollup-darwin-arm64@4.9.1: @@ -4895,7 +4901,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: false optional: true /@rollup/rollup-darwin-x64@4.9.1: @@ -4903,7 +4908,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: false optional: true /@rollup/rollup-linux-arm-gnueabihf@4.9.1: @@ -4911,7 +4915,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: false optional: true /@rollup/rollup-linux-arm64-gnu@4.9.1: @@ -4919,7 +4922,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /@rollup/rollup-linux-arm64-musl@4.9.1: @@ -4927,7 +4929,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: false optional: true /@rollup/rollup-linux-riscv64-gnu@4.9.1: @@ -4935,7 +4936,6 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true - dev: false optional: true /@rollup/rollup-linux-x64-gnu@4.9.1: @@ -4943,7 +4943,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /@rollup/rollup-linux-x64-musl@4.9.1: @@ -4951,7 +4950,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: false optional: true /@rollup/rollup-win32-arm64-msvc@4.9.1: @@ -4959,7 +4957,6 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: false optional: true /@rollup/rollup-win32-ia32-msvc@4.9.1: @@ -4967,7 +4964,6 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true - dev: false optional: true /@rollup/rollup-win32-x64-msvc@4.9.1: @@ -4975,7 +4971,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: false optional: true /@samverschueren/stream-to-observable@0.3.1(rxjs@6.6.7): @@ -6694,6 +6689,11 @@ packages: is-windows: 1.0.2 dev: false + /big-integer@1.6.52: + resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==} + engines: {node: '>=0.6'} + dev: false + /big.js@5.2.2: resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==} @@ -6792,6 +6792,13 @@ packages: wrap-ansi: 7.0.0 dev: true + /bplist-parser@0.2.0: + resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==} + engines: {node: '>= 5.10.0'} + dependencies: + big-integer: 1.6.52 + dev: false + /brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -6915,6 +6922,13 @@ packages: semver: 7.5.4 dev: true + /bundle-name@3.0.0: + resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==} + engines: {node: '>=12'} + dependencies: + run-applescript: 5.0.0 + dev: false + /byline@5.0.0: resolution: {integrity: sha512-s6webAy+R4SR8XVuJWt2V2rGvhnrhxN+9S15GNuTK3wKPOXFF6RNc+8ug2XhH+2s4f+uudG4kUVYmYOQWL2g0Q==} engines: {node: '>=0.10.0'} @@ -8194,6 +8208,24 @@ packages: resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==} engines: {node: '>=0.10.0'} + /default-browser-id@3.0.0: + resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==} + engines: {node: '>=12'} + dependencies: + bplist-parser: 0.2.0 + untildify: 4.0.0 + dev: false + + /default-browser@4.0.0: + resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==} + engines: {node: '>=14.16'} + dependencies: + bundle-name: 3.0.0 + default-browser-id: 3.0.0 + execa: 7.2.0 + titleize: 3.0.0 + dev: false + /default-gateway@4.2.0: resolution: {integrity: sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==} engines: {node: '>=6'} @@ -8226,6 +8258,11 @@ packages: engines: {node: '>=8'} dev: true + /define-lazy-prop@3.0.0: + resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==} + engines: {node: '>=12'} + dev: false + /define-properties@1.2.1: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} engines: {node: '>= 0.4'} @@ -8691,6 +8728,10 @@ packages: dependencies: is-arrayish: 0.2.1 + /error-stack-parser-es@0.1.1: + resolution: {integrity: sha512-g/9rfnvnagiNf+DRMHEVGuGuIBlCIMDFoTA616HaP2l9PlCjGjVhD98PNbVSJvmK4TttqT5mV5tInMhoFgi+aA==} + dev: false + /error-stack-parser@2.1.4: resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==} dependencies: @@ -8777,194 +8818,6 @@ packages: resolution: {integrity: sha512-HBL8I3mIki5C1Cc9QjKUenHtnG0A5/xA8Q/AllRcfiwl2CZFXGK7ddBiCoRwAix4i2KxcQfjtIVcrVbB3vbmwg==} dev: true - /esbuild-android-64@0.14.54: - resolution: {integrity: sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==} - engines: {node: '>=12'} - cpu: [x64] - os: [android] - requiresBuild: true - optional: true - - /esbuild-android-arm64@0.14.54: - resolution: {integrity: sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==} - engines: {node: '>=12'} - cpu: [arm64] - os: [android] - requiresBuild: true - optional: true - - /esbuild-darwin-64@0.14.54: - resolution: {integrity: sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==} - engines: {node: '>=12'} - cpu: [x64] - os: [darwin] - requiresBuild: true - optional: true - - /esbuild-darwin-arm64@0.14.54: - resolution: {integrity: sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==} - engines: {node: '>=12'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - optional: true - - /esbuild-freebsd-64@0.14.54: - resolution: {integrity: sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==} - engines: {node: '>=12'} - cpu: [x64] - os: [freebsd] - requiresBuild: true - optional: true - - /esbuild-freebsd-arm64@0.14.54: - resolution: {integrity: sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==} - engines: {node: '>=12'} - cpu: [arm64] - os: [freebsd] - requiresBuild: true - optional: true - - /esbuild-linux-32@0.14.54: - resolution: {integrity: sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==} - engines: {node: '>=12'} - cpu: [ia32] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-64@0.14.54: - resolution: {integrity: sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==} - engines: {node: '>=12'} - cpu: [x64] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-arm64@0.14.54: - resolution: {integrity: sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==} - engines: {node: '>=12'} - cpu: [arm64] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-arm@0.14.54: - resolution: {integrity: sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==} - engines: {node: '>=12'} - cpu: [arm] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-mips64le@0.14.54: - resolution: {integrity: sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==} - engines: {node: '>=12'} - cpu: [mips64el] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-ppc64le@0.14.54: - resolution: {integrity: sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==} - engines: {node: '>=12'} - cpu: [ppc64] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-riscv64@0.14.54: - resolution: {integrity: sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==} - engines: {node: '>=12'} - cpu: [riscv64] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-linux-s390x@0.14.54: - resolution: {integrity: sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==} - engines: {node: '>=12'} - cpu: [s390x] - os: [linux] - requiresBuild: true - optional: true - - /esbuild-netbsd-64@0.14.54: - resolution: {integrity: sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==} - engines: {node: '>=12'} - cpu: [x64] - os: [netbsd] - requiresBuild: true - optional: true - - /esbuild-openbsd-64@0.14.54: - resolution: {integrity: sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==} - engines: {node: '>=12'} - cpu: [x64] - os: [openbsd] - requiresBuild: true - optional: true - - /esbuild-sunos-64@0.14.54: - resolution: {integrity: sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==} - engines: {node: '>=12'} - cpu: [x64] - os: [sunos] - requiresBuild: true - optional: true - - /esbuild-windows-32@0.14.54: - resolution: {integrity: sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==} - engines: {node: '>=12'} - cpu: [ia32] - os: [win32] - requiresBuild: true - optional: true - - /esbuild-windows-64@0.14.54: - resolution: {integrity: sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==} - engines: {node: '>=12'} - cpu: [x64] - os: [win32] - requiresBuild: true - optional: true - - /esbuild-windows-arm64@0.14.54: - resolution: {integrity: sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==} - engines: {node: '>=12'} - cpu: [arm64] - os: [win32] - requiresBuild: true - optional: true - - /esbuild@0.14.54: - resolution: {integrity: sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==} - engines: {node: '>=12'} - hasBin: true - requiresBuild: true - optionalDependencies: - '@esbuild/linux-loong64': 0.14.54 - esbuild-android-64: 0.14.54 - esbuild-android-arm64: 0.14.54 - esbuild-darwin-64: 0.14.54 - esbuild-darwin-arm64: 0.14.54 - esbuild-freebsd-64: 0.14.54 - esbuild-freebsd-arm64: 0.14.54 - esbuild-linux-32: 0.14.54 - esbuild-linux-64: 0.14.54 - esbuild-linux-arm: 0.14.54 - esbuild-linux-arm64: 0.14.54 - esbuild-linux-mips64le: 0.14.54 - esbuild-linux-ppc64le: 0.14.54 - esbuild-linux-riscv64: 0.14.54 - esbuild-linux-s390x: 0.14.54 - esbuild-netbsd-64: 0.14.54 - esbuild-openbsd-64: 0.14.54 - esbuild-sunos-64: 0.14.54 - esbuild-windows-32: 0.14.54 - esbuild-windows-64: 0.14.54 - esbuild-windows-arm64: 0.14.54 - /esbuild@0.19.12: resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} engines: {node: '>=12'} @@ -9154,6 +9007,21 @@ packages: strip-final-newline: 3.0.0 dev: true + /execa@7.2.0: + resolution: {integrity: sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==} + engines: {node: ^14.18.0 || ^16.14.0 || >=18.0.0} + dependencies: + cross-spawn: 7.0.3 + get-stream: 6.0.1 + human-signals: 4.3.1 + is-stream: 3.0.0 + merge-stream: 2.0.0 + npm-run-path: 5.1.0 + onetime: 6.0.0 + signal-exit: 3.0.7 + strip-final-newline: 3.0.0 + dev: false + /execa@8.0.1: resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==} engines: {node: '>=16.17'} @@ -9773,6 +9641,15 @@ packages: jsonfile: 6.1.0 universalify: 2.0.0 + /fs-extra@11.2.0: + resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==} + engines: {node: '>=14.14'} + dependencies: + graceful-fs: 4.2.10 + jsonfile: 6.1.0 + universalify: 2.0.0 + dev: false + /fs-extra@7.0.1: resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==} engines: {node: '>=6 <7 || >=8'} @@ -10787,6 +10664,11 @@ packages: engines: {node: '>=12.20.0'} dev: true + /human-signals@4.3.1: + resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==} + engines: {node: '>=14.18.0'} + dev: false + /human-signals@5.0.0: resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==} engines: {node: '>=16.17.0'} @@ -11151,7 +11033,12 @@ packages: resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==} engines: {node: '>=8'} hasBin: true - dev: true + + /is-docker@3.0.0: + resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + hasBin: true + dev: false /is-dotfile@1.0.3: resolution: {integrity: sha512-9YclgOGtN/f8zx0Pr4FQYMdibBiTaH3sn52vjYip4ZSf6C4/6RfTEZ+MR4GvKhCxdPh21Bg42/WL55f6KSnKpg==} @@ -11224,6 +11111,14 @@ packages: /is-hexadecimal@1.0.4: resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==} + /is-inside-container@1.0.0: + resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==} + engines: {node: '>=14.16'} + hasBin: true + dependencies: + is-docker: 3.0.0 + dev: false + /is-installed-globally@0.4.0: resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==} engines: {node: '>=10'} @@ -11475,7 +11370,6 @@ packages: engines: {node: '>=8'} dependencies: is-docker: 2.2.1 - dev: true /is-yarn-global@0.3.0: resolution: {integrity: sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==} @@ -12448,11 +12342,6 @@ packages: resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==} engines: {node: '>=10'} - /lilconfig@3.0.0: - resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==} - engines: {node: '>=14'} - dev: false - /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} @@ -13340,6 +13229,11 @@ packages: path-exists: 5.0.0 dev: true + /mrmime@2.0.0: + resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==} + engines: {node: '>=10'} + dev: false + /ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} @@ -14035,6 +13929,16 @@ packages: is-wsl: 2.2.0 dev: true + /open@9.1.0: + resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==} + engines: {node: '>=14.16'} + dependencies: + default-browser: 4.0.0 + define-lazy-prop: 3.0.0 + is-inside-container: 1.0.0 + is-wsl: 2.2.0 + dev: false + /opener@1.5.2: resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==} hasBin: true @@ -14705,24 +14609,6 @@ packages: ts-node: 10.9.1(@swc/core@1.2.112)(@types/node@20.9.5)(typescript@4.9.4) yaml: 1.10.2 - /postcss-load-config@4.0.2(postcss@8.4.32)(ts-node@10.9.1): - resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} - engines: {node: '>= 14'} - peerDependencies: - postcss: '>=8.0.9' - ts-node: '>=9.0.0' - peerDependenciesMeta: - postcss: - optional: true - ts-node: - optional: true - dependencies: - lilconfig: 3.0.0 - postcss: 8.4.32 - ts-node: 10.9.1(@swc/core@1.2.112)(@types/node@20.9.5)(typescript@4.9.4) - yaml: 2.3.4 - dev: false - /postcss-merge-longhand@5.1.7(postcss@8.4.32): resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==} engines: {node: ^10 || ^12 || >=14.0} @@ -15998,13 +15884,6 @@ packages: estree-walker: 0.6.1 dev: true - /rollup@2.77.3: - resolution: {integrity: sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==} - engines: {node: '>=10.0.0'} - hasBin: true - optionalDependencies: - fsevents: 2.3.3 - /rollup@2.79.1: resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==} engines: {node: '>=10.0.0'} @@ -16031,6 +15910,12 @@ packages: '@rollup/rollup-win32-ia32-msvc': 4.9.1 '@rollup/rollup-win32-x64-msvc': 4.9.1 fsevents: 2.3.3 + + /run-applescript@5.0.0: + resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==} + engines: {node: '>=12'} + dependencies: + execa: 5.1.1 dev: false /run-async@2.4.1: @@ -16386,10 +16271,19 @@ packages: resolution: {integrity: sha512-f2AOPogZmXgJ9Ma2M22ZEhc1dNtRIzcEkiflMFeVTRq+OViOZMvH1IPMVOwrKaxpSaHioBJiDR0SluRqGa7atA==} engines: {node: '>= 10'} dependencies: - '@polka/url': 1.0.0-next.21 + '@polka/url': 1.0.0-next.24 mime: 2.6.0 totalist: 1.1.0 + /sirv@2.0.4: + resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==} + engines: {node: '>= 10'} + dependencies: + '@polka/url': 1.0.0-next.24 + mrmime: 2.0.0 + totalist: 3.0.1 + dev: false + /sisteransi@1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} dev: false @@ -17327,6 +17221,11 @@ packages: upper-case: 1.1.3 dev: true + /titleize@3.0.0: + resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==} + engines: {node: '>=12'} + dev: false + /tmp-promise@3.0.3: resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==} dependencies: @@ -17418,6 +17317,11 @@ packages: resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==} engines: {node: '>=6'} + /totalist@3.0.1: + resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} + engines: {node: '>=6'} + dev: false + /tough-cookie@4.1.2: resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==} engines: {node: '>=6'} @@ -17926,6 +17830,11 @@ packages: engines: {node: '>=4'} dev: true + /untildify@4.0.0: + resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==} + engines: {node: '>=8'} + dev: false + /upath@1.2.0: resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==} engines: {node: '>=4'} @@ -18150,7 +18059,7 @@ packages: debug: 4.3.4(supports-color@9.2.3) pathe: 1.1.1 picocolors: 1.0.0 - vite: 5.0.10(@types/node@20.9.5) + vite: 5.0.11(@types/node@20.9.5) transitivePeerDependencies: - '@types/node' - less @@ -18162,31 +18071,53 @@ packages: - terser dev: false - /vite@2.9.16: - resolution: {integrity: sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==} - engines: {node: '>=12.2.0'} + /vite-node@1.2.0(@types/node@20.9.5): + resolution: {integrity: sha512-ETnQTHeAbbOxl7/pyBck9oAPZZZo+kYnFt1uQDD+hPReOc+wCjXw4r4jHriBRuVDB5isHmPXxrfc1yJnfBERqg==} + engines: {node: ^18.0.0 || >=20.0.0} hasBin: true + dependencies: + cac: 6.7.14 + debug: 4.3.4(supports-color@9.2.3) + pathe: 1.1.1 + picocolors: 1.0.0 + vite: 5.0.11(@types/node@20.9.5) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: false + + /vite-plugin-inspect@0.8.1(rollup@2.79.1)(vite@5.0.11): + resolution: {integrity: sha512-oPBPVGp6tBd5KdY/qY6lrbLXqrbHRG0hZLvEaJfiZ/GQfDB+szRuLHblQh1oi1Hhh8GeLit/50l4xfs2SA+TCA==} + engines: {node: '>=14'} peerDependencies: - less: '*' - sass: '*' - stylus: '*' + '@nuxt/kit': '*' + vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0 peerDependenciesMeta: - less: - optional: true - sass: - optional: true - stylus: + '@nuxt/kit': optional: true dependencies: - esbuild: 0.14.54 - postcss: 8.4.32 - resolve: 1.22.1 - rollup: 2.77.3 - optionalDependencies: - fsevents: 2.3.3 + '@antfu/utils': 0.7.7 + '@rollup/pluginutils': 5.1.0(rollup@2.79.1) + debug: 4.3.4(supports-color@9.2.3) + error-stack-parser-es: 0.1.1 + fs-extra: 11.2.0 + open: 9.1.0 + picocolors: 1.0.0 + sirv: 2.0.4 + vite: 5.0.11(@types/node@20.9.5) + transitivePeerDependencies: + - rollup + - supports-color + dev: false - /vite@5.0.10(@types/node@20.9.5): - resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} + /vite@5.0.11(@types/node@20.9.5): + resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -18219,7 +18150,6 @@ packages: rollup: 4.9.1 optionalDependencies: fsevents: 2.3.3 - dev: false /vitest@1.1.0(@types/node@20.9.5): resolution: {integrity: sha512-oDFiCrw7dd3Jf06HoMtSRARivvyjHJaTxikFxuqJjO76U436PqlVw1uLn7a8OSPrhSfMGVaRakKpA2lePdw79A==} @@ -18265,7 +18195,7 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.1 tinypool: 0.8.1 - vite: 5.0.10(@types/node@20.9.5) + vite: 5.0.11(@types/node@20.9.5) vite-node: 1.1.0(@types/node@20.9.5) why-is-node-running: 2.2.2 transitivePeerDependencies: @@ -18910,11 +18840,6 @@ packages: resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} engines: {node: '>= 6'} - /yaml@2.3.4: - resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==} - engines: {node: '>= 14'} - dev: false - /yargs-parser@13.1.2: resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==} dependencies: diff --git a/site/docs/integrations/vite.md b/site/docs/integrations/vite.md index 970dcb478..f0cc2dfdc 100644 --- a/site/docs/integrations/vite.md +++ b/site/docs/integrations/vite.md @@ -60,31 +60,3 @@ vanillaExtractPlugin({ ``` Each integration will set a default value based on the configuration options passed to the bundler. - -### emitCssInSsr - -Historically, extracting CSS was a side effect of building the browser bundle, with the server or static build process only needing the JavaScript references. However, many frameworks are now moving the evaluation of CSS to be a server-side or compile-time responsibility. - -For the most common frameworks, Vanilla Extract will set this flag internally based on the plugins it discovers in the consumers Vite configuration. -This makes the plugin essentially zero config for the majority of cases. - -For other cases, such as newer frameworks, it may be necessary to manually opt in to emitting CSS during server side rendering: - -```js -// vite.config.js - -import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; - -export default { - plugins: [ - vanillaExtractPlugin({ - emitCssInSsr: true - }) - ] -}; -``` - -### esbuildOptions - -esbuild is used internally to compile `.css.ts` files before evaluating them to extract styles. You can pass additional options here to customize that process. -Accepts a subset of esbuild build options (`plugins`, `external`, `define`, `loader`, `tsconfig` and `conditions`). See the [build API](https://esbuild.github.io/api/#build-api) documentation. diff --git a/test-helpers/package.json b/test-helpers/package.json index b5545abfb..f10f51e71 100644 --- a/test-helpers/package.json +++ b/test-helpers/package.json @@ -35,11 +35,12 @@ "minimist": "^1.2.5", "path-browserify": "^1.0.1", "portfinder": "^1.0.28", - "postcss": "^8.3.6", + "postcss": "^8.4.32", "prettier": "^2.8.8", "serve-handler": "^6.1.3", "style-loader": "^2.0.0", - "vite": "npm:vite@^2.7.0", + "vite": "npm:vite@^5.0.11", + "vite-plugin-inspect": "^0.8.1", "webpack": "^5.36.1", "webpack-dev-server": "^3.11.2", "webpack-merge": "^5.7.3" diff --git a/test-helpers/src/startFixture/types.ts b/test-helpers/src/startFixture/types.ts index 8756cbce1..86a0b6916 100644 --- a/test-helpers/src/startFixture/types.ts +++ b/test-helpers/src/startFixture/types.ts @@ -1,13 +1,13 @@ +import { EsbuildFixtureOptions } from './esbuild'; +import { ParcelFixtureOptions } from './parcel'; +import { ViteFixtureOptions } from './vite'; +import { WebpackFixtureOptions } from './webpack'; + type BuildType = - | 'browser' - | 'mini-css-extract' - | 'style-loader' - | 'esbuild' - | 'esbuild-next' - | 'esbuild-runtime' - | 'esbuild-next-runtime' - | 'vite' - | 'parcel'; + | WebpackFixtureOptions['type'] + | EsbuildFixtureOptions['type'] + | ViteFixtureOptions['type'] + | ParcelFixtureOptions['type']; export interface TestServer { type: BuildType; diff --git a/test-helpers/src/startFixture/vite.ts b/test-helpers/src/startFixture/vite.ts index 7e0c82468..5f1d0b063 100644 --- a/test-helpers/src/startFixture/vite.ts +++ b/test-helpers/src/startFixture/vite.ts @@ -4,6 +4,7 @@ import http from 'http'; import { createServer, build, InlineConfig } from 'vite'; import handler from 'serve-handler'; import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; +import inspect from 'vite-plugin-inspect'; import { TestServer } from './types'; @@ -42,10 +43,10 @@ export const startViteFixture = async ( configFile: false, root, logLevel: 'error', - plugins: [vanillaExtractPlugin()], + plugins: [vanillaExtractPlugin(), mode === 'development' && inspect()], server: { port, - force: true, + strictPort: true, }, build: { cssCodeSplit: false,