Add stub test for registering plugins in CSS

packages/tailwindcss/src/plugins.test.ts

@@ -1,7 +1,8 @@
 import { test, vi } from 'vitest'
 import { compile } from '.'
 import type { UserConfig } from './config'
-import { run } from './test-utils/run'
+import type { Plugin } from './plugins'
+import { compileWithPlugins, run } from './test-utils/run'
 
 const css = String.raw
 
@@ -152,3 +153,25 @@ test('Plugins registered in CSS can be returned', ({ expect }) => {
 
   expect(builder.plugins).toEqual(['my-plugin', './my-plugin'])
 })
+
+test.only('Plugins registered in CSS can be used', async ({ expect }) => {
+  vi.doMock('my-plugin', () => {
+    let plugin: Plugin = ({ addVariant }) => {
+      addVariant('hocus', ['&:hover', '&:focus'])
+    }
+
+    return {
+      default: plugin,
+    }
+  })
+
+  let result = await compileWithPlugins('@plugin "my-plugin"; @tailwind utilities;', [
+    'hocus:underline',
+  ])
+
+  expect(result).toMatchInlineSnapshot(`
+    ".hocus\\:underline:hover, .hocus\\:underline:focus {
+      text-decoration-line: underline;
+    }"
+  `)
+})

packages/tailwindcss/src/test-utils/run.ts

@@ -1,6 +1,7 @@
 import { Features, transform } from 'lightningcss'
 import { compile } from '..'
 import { type UserConfig } from '../config'
+import type { Plugin } from '../plugins'
 
 export function compileCss(css: string, candidates: string[] = [], config: UserConfig = {}) {
   return optimizeCss(compile(css, config).build(candidates)).trim()
@@ -10,6 +11,22 @@ export function run(candidates: string[], config: UserConfig = {}) {
   return optimizeCss(compile('@tailwind utilities;', config).build(candidates)).trim()
 }
 
+export async function compileWithPlugins(
+  css: string,
+  candidates: string[],
+  config: UserConfig = {},
+) {
+  let builder = compile(css, config)
+
+  let plugins: Plugin[] = await Promise.all(
+    builder.plugins.map((pluginPath) => import(pluginPath).then((mod) => mod.default)),
+  )
+
+  config.plugins = [...(config.plugins ?? []), ...plugins]
+
+  return optimizeCss(builder.build(candidates)).trim()
+}
+
 export function optimizeCss(
   input: string,
   { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},