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]

Author: RobinMalfait

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.`,
       )
     },

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)

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')

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'

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`

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";

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: '' }) },
     )

packages/tailwindcss/src/utilities.test.ts

@@ -28693,23 +28693,23 @@ describe('custom utilities', () => {
           right: 100%;
         }
       `),
-    ).rejects.toThrowError(/should be alphanumeric/)
+    ).rejects.toThrow(/should be alphanumeric/)
 
     await expect(() =>
       compile(css`
         @utility ~push {
           right: 100%;
         }
       `),
-    ).rejects.toThrowError(/should be alphanumeric/)
+    ).rejects.toThrow(/should be alphanumeric/)
 
     await expect(() =>
       compile(css`
         @utility @push {
           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);

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 () => {