wip: collect css information in worker

packages/unplugin/.gitignore

@@ -87,3 +87,5 @@ styled-system-studio
 src/panda.css
 playground/panda.css
 panda.css
+
+many-files

packages/unplugin/e2e/scenarios/outfile/outfile.test.ts

@@ -1,22 +1,17 @@
 import { expect } from '@playwright/test'
 import { describe, test } from 'vitest'
-import { getClassName, getElementStyle } from '../../test-elements'
+import { getClassName } from '../../test-elements'
 import { page } from '../../test-setup'
-import { editFile, withRetry } from '../../test-utils'
+import { editFile } from '../../test-utils'
 
+// TODO: add a test with worker and many files
 describe('unplugin with outfile', () => {
   test('HMR on file change', async () => {
     expect(await getClassName(page, "[data-testid='hello']")).toBe('fs_12px')
-    expect(await getElementStyle(page, "[data-testid='hello']")).toMatchObject({
-      fontSize: '12px',
-    })
+    await expect(page.getByTestId('hello')).toHaveCSS('font-size', '12px', { timeout: 1000 })
 
     editFile('hello.tsx', (content) => content.replace('12px', '14px'))
-    await withRetry(async () => {
-      expect(await getClassName(page, "[data-testid='hello']")).toBe('fs_14px')
-      expect(await getElementStyle(page, "[data-testid='hello']")).toMatchObject({
-        fontSize: '14px',
-      })
-    })
+    await expect(page.getByTestId('hello')).toHaveClass('fs_14px', { timeout: 1000 })
+    await expect(page.getByTestId('hello')).toHaveCSS('font-size', '14px', { timeout: 1000 })
   })
 })

packages/unplugin/e2e/scenarios/virtual-file/virtual-file.test.ts

@@ -1,22 +1,16 @@
 import { expect } from '@playwright/test'
 import { describe, test } from 'vitest'
-import { getClassName, getElementStyle } from '../../test-elements'
+import { getClassName } from '../../test-elements'
 import { page } from '../../test-setup'
-import { editFile, withRetry } from '../../test-utils'
+import { editFile } from '../../test-utils'
 
 describe('unplugin with virtual-file', () => {
   test('HMR on file change', async () => {
+    await expect(page.getByTestId('hello')).toHaveClass('fs_12px', { timeout: 1000 })
     expect(await getClassName(page, "[data-testid='hello']")).toBe('fs_12px')
-    expect(await getElementStyle(page, "[data-testid='hello']")).toMatchObject({
-      fontSize: '12px',
-    })
+    await expect(page.getByTestId('hello')).toHaveCSS('font-size', '12px', { timeout: 1000 })
 
     editFile('hello.tsx', (content) => content.replace('12px', '14px'))
-    await withRetry(async () => {
-      expect(await getClassName(page, "[data-testid='hello']")).toBe('fs_14px')
-      expect(await getElementStyle(page, "[data-testid='hello']")).toMatchObject({
-        fontSize: '14px',
-      })
-    })
+    await expect(page.getByTestId('hello')).toHaveCSS('font-size', '14px', { timeout: 3000 })
   })
 })

packages/unplugin/package.json

@@ -10,6 +10,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./worker": {
+      "types": "./dist/worker.d.ts",
+      "import": "./dist/worker.js",
+      "require": "./dist/worker.cjs"
+    },
     "./astro": {
       "types": "./dist/astro.d.ts",
       "import": "./dist/astro.js",

packages/unplugin/playground/App.tsx

@@ -2,8 +2,9 @@ import { css, cva } from './styled-system/css'
 import { center } from './styled-system/patterns'
 import { button } from './styled-system/recipes'
 import { Stack, styled } from './styled-system/jsx'
-// import 'virtual:panda.css'
-import './panda.css'
+import './many-files/many-files_1/import-all';
+// import './many-files/many-files_2/import-all';
+// import './many-files/many-files_3/import-all';
 
 const overrides = css.raw({
   bg: 'purple.500',

packages/unplugin/playground/main.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './App.tsx'
+import 'virtual:panda.css'
+
+// import './panda.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

packages/unplugin/playground/scripts/make-files.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+
+# This script generates a bunch of files to show the performance difference when using the Worker setting.
+if [ -d "./many-files" ]; then
+    echo "many-files folder already exists. Skipping the rest of the script."
+    exit 0
+fi
+
+echo "generating a bunch of files to show the performance difference..."
+mkdir ./many-files
+
+# Create 10 copies
+for i in {1..3}
+do
+    folder_name="many-files_$i"
+    mkdir "./many-files/$folder_name"
+    for j in {1..1000}
+    do
+
+    destination_file="./many-files/$folder_name/file_$j.tsx"
+    cp "./scripts/template/many-files-template.tsx" "$destination_file"
+    echo "// $destination_file" >> "$destination_file"
+    done
+done