From 52f94c74bb491e9c3641ce322a0ef90fb3c45de6 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 30 Apr 2026 23:32:37 +0200 Subject: [PATCH] Improve codebase quality (#19999) Small PR that improves the overall quality of the codebase. It's a bit of everything: 1. Using correct variants for the variants we are testing 2. Use `@reference` instead of `@import` in a test, testing the `@reference` according to the test name 3. Use `using` for Vitest related mocks. They have a `Symbol.dispose` implemented, so we can don't have to restore mocks ourselves (right now, some of them are not cleaned up at all). 4. Updated deprecated `.toThrowError` with `.toThrow` APIs ## Test plan Everything still passes. [ci-all] --- .../postcss/core-as-postcss-plugin.test.ts | 2 +- integrations/vite/index.test.ts | 2 +- .../@tailwindcss-postcss/src/index.test.ts | 4 ++-- packages/tailwindcss/src/at-import.test.ts | 4 ++-- .../tailwindcss/src/compat/config.test.ts | 2 +- .../tailwindcss/src/compat/plugin-api.test.ts | 22 +++++++++---------- packages/tailwindcss/src/index.test.ts | 6 ++--- packages/tailwindcss/src/utilities.test.ts | 8 +++---- packages/tailwindcss/src/variants.test.ts | 2 +- 9 files changed, 26 insertions(+), 26 deletions(-) diff --git a/integrations/postcss/core-as-postcss-plugin.test.ts b/integrations/postcss/core-as-postcss-plugin.test.ts index 0856210fe..839c80e7b 100644 --- a/integrations/postcss/core-as-postcss-plugin.test.ts +++ b/integrations/postcss/core-as-postcss-plugin.test.ts @@ -50,7 +50,7 @@ describe.each(Object.keys(variantConfig))('%s', (variant) => { async ({ exec, expect }) => { await expect( exec('pnpm postcss src/index.css --output dist/out.css', undefined, { ignoreStdErr: true }), - ).rejects.toThrowError( + ).rejects.toThrow( `It looks like you're trying to use \`tailwindcss\` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install \`@tailwindcss/postcss\` and update your PostCSS configuration.`, ) }, diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts index 28c218b81..4c936a2a2 100644 --- a/integrations/vite/index.test.ts +++ b/integrations/vite/index.test.ts @@ -836,7 +836,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => { async ({ root, fs, exec, expect }) => { await expect(() => exec('pnpm vite build', { cwd: path.join(root, 'project-a') }, { ignoreStdErr: true }), - ).rejects.toThrowError('The `source(../i-do-not-exist)` does not exist') + ).rejects.toThrow('The `source(../i-do-not-exist)` does not exist') let files = await fs.glob('project-a/dist/**/*.css') expect(files).toHaveLength(0) diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 9d23d0a8d..a12454c1f 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -120,7 +120,7 @@ describe('processing without specifying a base path', () => { afterEach(() => unlink(filepath)) test('the current working directory is used by default', async () => { - const spy = vi.spyOn(process, 'cwd') + using spy = vi.spyOn(process, 'cwd') spy.mockReturnValue(dir) let processor = postcss([tailwindcss({ optimize: { minify: false } })]) @@ -389,7 +389,7 @@ describe('concurrent builds', () => { afterEach(() => rm(dir, { recursive: true, force: true })) test('does experience a race-condition when calling the plugin two times for the same change', async () => { - const spy = vi.spyOn(process, 'cwd') + using spy = vi.spyOn(process, 'cwd') spy.mockReturnValue(dir) let from = path.join(dir, 'index.css') diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts index 49fbbc043..41c545e28 100644 --- a/packages/tailwindcss/src/at-import.test.ts +++ b/packages/tailwindcss/src/at-import.test.ts @@ -445,7 +445,7 @@ test('updates the base when loading modules inside nested files', async () => { base: '/root/foo', path: '', }) - let loadModule = vi.fn().mockResolvedValue({ base: '', path: '', module: () => {} }) + using loadModule = vi.fn().mockResolvedValue({ base: '', path: '', module: () => {} }) expect( ( @@ -500,7 +500,7 @@ test('emits the right base for @source found inside JS configs and plugins from base: '/root/foo', path: '', }) - let loadModule = vi.fn().mockImplementation((id: string) => { + using loadModule = vi.fn().mockImplementation((id: string) => { let base = id.includes('nested') ? '/root/foo' : '/root' if (id.includes('config')) { let glob = id.includes('nested') ? './nested-config/*.html' : './root-config/*.html' diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts index 25bd893d1..a3800aa47 100644 --- a/packages/tailwindcss/src/compat/config.test.ts +++ b/packages/tailwindcss/src/compat/config.test.ts @@ -1513,7 +1513,7 @@ test('blocklisted candidates cannot be used with `@apply`', async () => { }) test('old theme values are merged with their renamed counterparts in the CSS theme', async () => { - let didCallPluginFn = vi.fn() + using didCallPluginFn = vi.fn() await compile( css` diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index cc410995b..ae2f17639 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -667,7 +667,7 @@ describe('theme', async () => { } ` - let fn = vi.fn() + using fn = vi.fn() await compile(input, { loadModule: async (id, base) => { @@ -951,7 +951,7 @@ describe('theme', async () => { } ` - let fn = vi.fn() + using fn = vi.fn() await compile(input, { loadModule: async (id, base) => { @@ -994,7 +994,7 @@ describe('theme', async () => { } ` - let fn = vi.fn() + using fn = vi.fn() await compile(input, { loadModule: async (id, base) => { @@ -1026,7 +1026,7 @@ describe('theme', async () => { } ` - let fn = vi.fn() + using fn = vi.fn() await compile(input, { loadModule: async (id, base) => { @@ -1055,7 +1055,7 @@ describe('theme', async () => { @plugin "my-plugin"; ` - let fn = vi.fn() + using fn = vi.fn() await compile(input, { loadModule: async (id, base) => { @@ -3133,7 +3133,7 @@ describe('addUtilities()', () => { }, }, ) - }).rejects.toThrowError(/invalid utility selector/) + }).rejects.toThrow(/invalid utility selector/) }) test('supports multiple selector names', async () => { @@ -4305,7 +4305,7 @@ describe('matchUtilities()', () => { }, }, ) - }).rejects.toThrowError(/invalid utility name/) + }).rejects.toThrow(/invalid utility name/) }) test('replaces the class name with variants in nested selectors', async () => { @@ -4494,7 +4494,7 @@ describe('matchComponents()', () => { describe('prefix()', () => { test('is an identity function', async () => { - let fn = vi.fn() + using fn = vi.fn() await compile( css` @plugin "my-plugin"; @@ -4518,7 +4518,7 @@ describe('prefix()', () => { describe('config()', () => { test('can return the resolved config when passed no arguments', async () => { - let fn = vi.fn() + using fn = vi.fn() await compile( css` @plugin "my-plugin"; @@ -4546,7 +4546,7 @@ describe('config()', () => { }) test('can return part of the config', async () => { - let fn = vi.fn() + using fn = vi.fn() await compile( css` @plugin "my-plugin"; @@ -4572,7 +4572,7 @@ describe('config()', () => { }) test('falls back to default value if requested path does not exist', async () => { - let fn = vi.fn() + using fn = vi.fn() await compile( css` @plugin "my-plugin"; diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index b99476558..e761d763e 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -3888,10 +3888,10 @@ describe('@custom-variant', () => { [`@custom-variant foo_ (&);`], [`@custom-variant foo__ (&);`], ])('@custom-variant must have a valid name', (input) => { - return expect(compileCss(input)).rejects.toThrowError() + return expect(compileCss(input)).rejects.toThrow() }) - test('@custom-variant must not container special characters', () => { + test('@custom-variant must not contain special characters', () => { return expect( compileCss(css` .foo { @@ -6612,7 +6612,7 @@ describe('feature detection', () => { test('using `@reference`', async () => { let compiler = await compile( css` - @import 'tailwindcss/preflight'; + @reference 'tailwindcss/preflight'; `, { loadStylesheet: async (_, base) => ({ base, path: '', content: '' }) }, ) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index e57fe9cd6..5ce6ad284 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -28693,7 +28693,7 @@ describe('custom utilities', () => { right: 100%; } `), - ).rejects.toThrowError(/should be alphanumeric/) + ).rejects.toThrow(/should be alphanumeric/) await expect(() => compile(css` @@ -28701,7 +28701,7 @@ describe('custom utilities', () => { right: 100%; } `), - ).rejects.toThrowError(/should be alphanumeric/) + ).rejects.toThrow(/should be alphanumeric/) await expect(() => compile(css` @@ -28709,7 +28709,7 @@ describe('custom utilities', () => { right: 100%; } `), - ).rejects.toThrowError(/should be alphanumeric/) + ).rejects.toThrow(/should be alphanumeric/) }) test('custom utilities work with `@apply`', async () => { @@ -29043,7 +29043,7 @@ describe('custom utilities', () => { }) test('bare values with unsupported data types should result in a warning', async () => { - let spy = vi.spyOn(console, 'warn').mockImplementation(() => {}) + using spy = vi.spyOn(console, 'warn').mockImplementation(() => {}) let input = css` @utility paint-* { paint: --value([color], color); diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index d69847bb2..d9584ea34 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -388,7 +388,7 @@ test('user-invalid', async () => { display: flex; }" `) - expect(await run(['invalid/foo:flex'])).toEqual('') + expect(await run(['user-invalid/foo:flex'])).toEqual('') }) test('in-range', async () => {