chore(examples/37_css-stylex): use @stylexjs/unplugin (#1983)

Vite 8 use lightningcss instead of postcss, so original approach will
break. This PR is the preparation.

This approach is also used by StyleX upstream:
https://github.com/facebook/stylex/tree/main/examples/example-waku

Split from #1982

Author: Master-Hash

examples/37_css-stylex/package.json

@@ -16,12 +16,9 @@
     "waku": "1.0.0-alpha.5"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.28.6",
-    "@babel/preset-typescript": "^7.28.5",
-    "@stylexjs/postcss-plugin": "^0.17.5",
+    "@stylexjs/unplugin": "^0.18.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.0",
-    "vite-plugin-babel": "^1.5.1"
+    "@vitejs/plugin-react": "^5.1.0"
   }
 }

examples/37_css-stylex/src/components/stylex-dev-injection.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect } from 'react';
+
+function DevStyleXInjectImpl() {
+  useEffect(() => {
+    // @ts-expect-error virtual module
+    // eslint-disable-next-line import/no-unresolved
+    void import('virtual:stylex:css-only');
+  }, []);
+  return <link rel="stylesheet" href="/virtual:stylex.css" />;
+}
+
+export const DevStyleXInject = import.meta.env.DEV
+  ? DevStyleXInjectImpl
+  : () => null;

examples/37_css-stylex/src/index.css

@@ -1 +0,0 @@
-@stylex;

examples/37_css-stylex/src/pages/index.tsx

@@ -1,6 +1,7 @@
 import '../index.css';
 import * as stylex from '@stylexjs/stylex';
 import { Counter } from '../components/counter';
+import { DevStyleXInject } from '../components/stylex-dev-injection';
 
 const styles = stylex.create({
   server: {
@@ -15,6 +16,7 @@ const styles = stylex.create({
 export default async function HomePage() {
   return (
     <div>
+      <DevStyleXInject />
       <title>Waku</title>
       <div {...stylex.props(styles.server)}>Server Style (green)</div>
       <div>

examples/37_css-stylex/waku.config.ts

@@ -1,25 +1,21 @@
 // based on
 // https://github.com/pawelblaszczyk5/vite-rsc-experiments/blob/4bc05095d9ec5dcb584af43a5704c4dceffd38b8/apps/stylex/vite.config.ts
 
+import stylex from '@stylexjs/unplugin/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'waku/config';
 
-const babelConfig = {
-  plugins: [
-    ['@babel/plugin-syntax-jsx', {}],
-    [
-      '@stylexjs/babel-plugin',
-      {
-        treeshakeCompensation: true,
-        unstable_moduleResolution: { type: 'commonJS' },
-      },
-    ],
-  ],
-  presets: ['@babel/preset-typescript'],
-};
-
 export default defineConfig({
   vite: {
-    plugins: [react({ babel: babelConfig })],
+    plugins: [
+      stylex({
+        debug: process.env.NODE_ENV === 'development',
+        treeshakeCompensation: true,
+        useCSSLayers: true,
+        devMode: 'css-only',
+        runtimeInjection: false,
+      }),
+      react(),
+    ],
   },
 });