feat: add @stylexjs/stylex example

examples/12_css/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@hono/node-server": "1.3.3",
+    "@stylexjs/stylex": "^0.3.0",
     "hono": "3.11.7",
     "react": "18.3.0-canary-0cdfef19b-20231211",
     "react-dom": "18.3.0-canary-0cdfef19b-20231211",
@@ -24,6 +25,7 @@
     "@vanilla-extract/vite-plugin": "3.9.3",
     "@vitejs/plugin-react": "4.2.1",
     "typescript": "5.3.3",
-    "vite": "5.0.9"
+    "vite": "5.0.9",
+    "vite-plugin-stylex": "^0.4.0"
   }
 }

examples/12_css/src/components/App.css

@@ -1,3 +1,5 @@
+@stylex stylesheet;
+
 h1 {
   color: red;
 }

examples/12_css/src/components/App.tsx

@@ -3,6 +3,7 @@ import styles from './App.module.css';
 import './App.css';
 import { container } from './styles.css.js';
 import { Counter } from './Counter.js';
+import { Banner } from './Banner.js';
 
 const App = ({ name }: { name: string }) => {
   return (
@@ -11,6 +12,7 @@ const App = ({ name }: { name: string }) => {
       <h1 className={styles.title}>Hello {name}!!</h1>
       <h3 className={container}>This is a server component.</h3>
       <Counter />
+      <Banner />
     </div>
   );
 };

examples/12_css/src/components/Banner.tsx

@@ -0,0 +1,14 @@
+import { create, props } from '@stylexjs/stylex';
+
+const styles = create({
+  root: {
+    backgroundColor: '#000',
+    color: '#fff',
+    padding: '10px',
+    textAlign: 'center',
+  },
+});
+
+export const Banner = () => {
+  return <div {...props(styles.root)}>This is a banner by StyleX CSS</div>;
+};

examples/12_css/vite.config.ts

@@ -1,6 +1,10 @@
 import { defineConfig } from 'vite';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import styleX from 'vite-plugin-stylex';
 
 export default defineConfig({
-  plugins: [vanillaExtractPlugin({ emitCssInSsr: true })],
+  ssr: {
+    external: ['@stylexjs/stylex'],
+  },
+  plugins: [vanillaExtractPlugin({ emitCssInSsr: true }), styleX()],
 });