From 1f70b7bd7f09fc99f156da3910d0bb42a67129f6 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Sun, 30 Jun 2024 14:02:11 -0700 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20invalidate=20all=20de?= =?UTF-8?q?ps=20of=20.css.ts=20being=20transformed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit since any of the deps of a .css.ts file changing can trigger a file transformation, all of them must be invalidated to correctly propagate style changes during development ✅ Closes: #1427 --- packages/vite-plugin/src/index.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index c1f75f33..94d38f32 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -213,8 +213,14 @@ export function vanillaExtractPlugin({ addWatchFiles.call(this, absoluteId, watchFiles); - // We have to invalidate the virtual module, not the real one we just transformed - invalidateModule(fileIdToVirtualId(absoluteId)); + // We have to invalidate the virtual module & deps, not the real one we just transformed + // The deps have to be invalidate in case one of them changing was the trigger causing + // the current transformation + Array.from(watchFiles).forEach((file) => { + if (file.endsWith('.css.ts')) { + invalidateModule(fileIdToVirtualId(file)); + } + }); return { code: source, From 580d2b358bc361633e7b0de04b8c5e8e9a9ad3b3 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Sun, 30 Jun 2024 14:04:16 -0700 Subject: [PATCH 2/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20changeset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/chilled-paws-shop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilled-paws-shop.md diff --git a/.changeset/chilled-paws-shop.md b/.changeset/chilled-paws-shop.md new file mode 100644 index 00000000..c9510870 --- /dev/null +++ b/.changeset/chilled-paws-shop.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/vite-plugin': patch +--- + +Correctly update rendered styles when changes are made to .css.ts files imported by .css.ts files From ae2aca9a59b7ded2049321a250f759ffeed20f8a Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Tue, 2 Jul 2024 06:52:19 -0700 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20inline=20watcher?= =?UTF-8?q?s=20function=20to=20cut=20down=20on=20iteration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/vite-plugin/src/index.ts | 47 +++++++++++++------------------ 1 file changed, 19 insertions(+), 28 deletions(-) diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 94d38f32..63b23a53 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -5,8 +5,8 @@ import type { ResolvedConfig, ConfigEnv, ViteDevServer, - Rollup, PluginOption, + TransformResult, UserConfig, } from 'vite'; import { @@ -96,23 +96,6 @@ export function vanillaExtractPlugin({ } } - 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', configureServer(_server) { @@ -210,22 +193,30 @@ export function vanillaExtractPlugin({ absoluteId, { outputCss: true }, ); + const result: TransformResult = { + code: source, + map: { mappings: '' }, + } - addWatchFiles.call(this, absoluteId, watchFiles); + // We don't need to watch files in build mode + if (config.command === 'build' && !config.build.watch) { + return result; + } + + for (const file of watchFiles) { + if (!file.includes('node_modules') && normalizePath(file) !== absoluteId) { + this.addWatchFile(file); + } - // We have to invalidate the virtual module & deps, not the real one we just transformed - // The deps have to be invalidate in case one of them changing was the trigger causing - // the current transformation - Array.from(watchFiles).forEach((file) => { + // We have to invalidate the virtual module & deps, not the real one we just transformed + // The deps have to be invalidated in case one of them changing was the trigger causing + // the current transformation if (file.endsWith('.css.ts')) { invalidateModule(fileIdToVirtualId(file)); } - }); + } - return { - code: source, - map: { mappings: '' }, - }; + return result; } }, resolveId(source) { From 272bd7f9e7593492e4dd92321ca1be76f860b4c0 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 7 Nov 2024 10:29:38 -0800 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20expose=20esbuild=20l?= =?UTF-8?q?oglevel=20option=20within=20compile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/integration/src/compile.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/integration/src/compile.ts b/packages/integration/src/compile.ts index 1b9a3644..375d8b46 100644 --- a/packages/integration/src/compile.ts +++ b/packages/integration/src/compile.ts @@ -49,7 +49,7 @@ export interface CompileOptions { cwd?: string; esbuildOptions?: Pick< EsbuildOptions, - 'plugins' | 'external' | 'define' | 'loader' | 'tsconfig' | 'conditions' + 'plugins' | 'external' | 'define' | 'loader' | 'tsconfig' | 'conditions' | 'logLevel' >; } export async function compile({ @@ -74,6 +74,7 @@ export async function compile({ define: esbuildOptions?.define, tsconfig: esbuildOptions?.tsconfig, conditions: esbuildOptions?.conditions, + logLevel: esbuildOptions?.logLevel, }); const { outputFiles, metafile } = result; From 41a3ededc01cf8a97f2998bd9f397c32c359fff5 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 7 Nov 2024 10:30:59 -0800 Subject: [PATCH 5/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20changeset?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/curly-parents-vanish.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curly-parents-vanish.md diff --git a/.changeset/curly-parents-vanish.md b/.changeset/curly-parents-vanish.md new file mode 100644 index 00000000..a54450de --- /dev/null +++ b/.changeset/curly-parents-vanish.md @@ -0,0 +1,5 @@ +--- +'@vanilla-extract/integration': minor +--- + +Exposed esbuild's logLevel option From 52b60290cd0ec72cad2a941f8407af377dbb5cdd Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 7 Nov 2024 10:35:44 -0800 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20expose=20esbuild=20l?= =?UTF-8?q?ogoverride=20option=20within=20compile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/curly-parents-vanish.md | 2 +- packages/integration/src/compile.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.changeset/curly-parents-vanish.md b/.changeset/curly-parents-vanish.md index a54450de..e7d2e6b0 100644 --- a/.changeset/curly-parents-vanish.md +++ b/.changeset/curly-parents-vanish.md @@ -2,4 +2,4 @@ '@vanilla-extract/integration': minor --- -Exposed esbuild's logLevel option +Exposed esbuild's logLevel & logOverride options diff --git a/packages/integration/src/compile.ts b/packages/integration/src/compile.ts index 375d8b46..5c5f8756 100644 --- a/packages/integration/src/compile.ts +++ b/packages/integration/src/compile.ts @@ -49,7 +49,7 @@ export interface CompileOptions { cwd?: string; esbuildOptions?: Pick< EsbuildOptions, - 'plugins' | 'external' | 'define' | 'loader' | 'tsconfig' | 'conditions' | 'logLevel' + 'plugins' | 'external' | 'define' | 'loader' | 'tsconfig' | 'conditions' | 'logLevel' | 'logOverride' >; } export async function compile({ @@ -75,6 +75,7 @@ export async function compile({ tsconfig: esbuildOptions?.tsconfig, conditions: esbuildOptions?.conditions, logLevel: esbuildOptions?.logLevel, + logOverride: esbuildOptions?.logOverride, }); const { outputFiles, metafile } = result; From b2ce64326708d0cdb64d7b1e0f76fb922b34ae52 Mon Sep 17 00:00:00 2001 From: Ray Knight Date: Thu, 7 Nov 2024 10:38:24 -0800 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=F0=9F=A4=96=20cleanup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/chilled-paws-shop.md | 5 ----- packages/vite-plugin/src/index.ts | 15 ++++++++++----- 2 files changed, 10 insertions(+), 10 deletions(-) delete mode 100644 .changeset/chilled-paws-shop.md diff --git a/.changeset/chilled-paws-shop.md b/.changeset/chilled-paws-shop.md deleted file mode 100644 index c9510870..00000000 --- a/.changeset/chilled-paws-shop.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@vanilla-extract/vite-plugin': patch ---- - -Correctly update rendered styles when changes are made to .css.ts files imported by .css.ts files diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts index 63b23a53..a92e3dd0 100644 --- a/packages/vite-plugin/src/index.ts +++ b/packages/vite-plugin/src/index.ts @@ -40,7 +40,9 @@ const removeIncompatiblePlugins = (plugin: PluginOption) => // Additionally, some internal Remix plugins rely on a `ctx` object to be initialized by // the main Remix plugin, and may not function correctly without it. To address this, we // filter out all Remix-related plugins. - !plugin.name.startsWith('remix'); + !plugin.name.startsWith('remix') && + // As React-Router plugin works the same as Remix plugin, also ignore it. + !plugin.name.startsWith('react-router'); interface Options { identifiers?: IdentifierOption; @@ -196,7 +198,7 @@ export function vanillaExtractPlugin({ const result: TransformResult = { code: source, map: { mappings: '' }, - } + }; // We don't need to watch files in build mode if (config.command === 'build' && !config.build.watch) { @@ -204,14 +206,17 @@ export function vanillaExtractPlugin({ } for (const file of watchFiles) { - if (!file.includes('node_modules') && normalizePath(file) !== absoluteId) { + if ( + !file.includes('node_modules') && + normalizePath(file) !== absoluteId + ) { this.addWatchFile(file); } // We have to invalidate the virtual module & deps, not the real one we just transformed // The deps have to be invalidated in case one of them changing was the trigger causing // the current transformation - if (file.endsWith('.css.ts')) { + if (cssFileFilter.test(file)) { invalidateModule(fileIdToVirtualId(file)); } } @@ -248,4 +253,4 @@ export function vanillaExtractPlugin({ return css; }, }; -} +} \ No newline at end of file