From 894d540deb412bae073f9545b14be96f13c0a0ec Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Thu, 4 Jul 2024 20:24:16 -0400
Subject: [PATCH] Add stub test for registering plugins in CSS

---
 packages/tailwindcss/src/plugins.test.ts   | 25 +++++++++++++++++++++-
 packages/tailwindcss/src/test-utils/run.ts | 17 +++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/tailwindcss/src/plugins.test.ts b/packages/tailwindcss/src/plugins.test.ts
index 6d1075a93..b8662db8c 100644
--- a/packages/tailwindcss/src/plugins.test.ts
+++ b/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;
+    }"
+  `)
+})
diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts
index 899fd34e9..af0cfea05 100644
--- a/packages/tailwindcss/src/test-utils/run.ts
+++ b/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 } = {},