Support for StyleX 0.9.3 (#90)

* Support for StyleX 0.9.3

Co-authored-by: Niklas Mollenhauer <nikeee@outlook.com>

* demo apps changes

---------

Co-authored-by: Niklas Mollenhauer <nikeee@outlook.com>

.changeset/short-poets-pets.md

@@ -0,0 +1,5 @@
+---
+"vite-plugin-stylex": minor
+---
+
+Support for StyleX 0.9.3

README.md

@@ -127,7 +127,7 @@ Vue doesn't require any extra setup steps, but here's an example of how you can
 </script>
 
 <template>
-  <div :class="stylex(styles.root)">
+  <div v-bind="stylex.attrs(styles.root)">
     <slot />
   </div>
 </template>

apps/qwik-demo/package.json

@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@internal/test-utils": "workspace:^",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "tsx": "^4.6.2",
     "vite-plugin-stylex": "workspace:^"
   }

apps/qwik-demo/src/Card.tsx

@@ -4,7 +4,7 @@ import { Slot, component$ } from "@builder.io/qwik";
 
 const Card = component$(() => {
   return (
-    <div class={stylex(styles.root)} data-testid="card">
+    <div {...stylex.attrs(styles.root)} data-testid="card">
       <Slot />
     </div>
   );

apps/react-strict-dom-demo/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@stylexjs/open-props": "^0.3.0",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-strict-dom": "^0.0.3"

apps/remix-css-url-demo/package.json

@@ -16,7 +16,7 @@
     "@remix-run/react": "^2.8.1",
     "@remix-run/serve": "^2.8.1",
     "@stylexjs/open-props": "^0.3.0",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

apps/remix-demo/package.json

@@ -16,7 +16,7 @@
     "@remix-run/react": "^2.8.1",
     "@remix-run/serve": "^2.8.1",
     "@stylexjs/open-props": "^0.3.0",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

apps/storybook-demo/package.json

@@ -12,7 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

apps/sveltekit-demo/package.json

@@ -24,7 +24,7 @@
   "type": "module",
   "dependencies": {
     "@internal/test-utils": "workspace:*",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "tsx": "^4.6.2",
     "vite-plugin-stylex": "workspace:*"
   }

apps/sveltekit-demo/src/Card.svelte

@@ -13,6 +13,6 @@
   });
 </script>
 
-<div class={stylex(styles.root)} data-testid="card">
+<div {...stylex.attrs(styles.root)} data-testid="card">
   <slot />
 </div>

apps/vite-demo/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@stylexjs/open-props": "^0.3.0",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

apps/vue-demo/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@internal/test-utils": "workspace:*",
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "tsx": "^4.6.2",
     "vite-plugin-stylex": "workspace:*",
     "vue": "^3.3.11"

apps/vue-demo/src/Card.vue

@@ -17,7 +17,7 @@ const styles = stylex.create({
 </script>
 
 <template>
-  <div :class="stylex(styles.root)" data-testid="card">
+  <div v-bind="stylex.attrs(styles.root)"  data-testid="card">
     <slot />
   </div>
 </template>

packages/vite-plugin-stylex/package.json

@@ -40,11 +40,11 @@
     "@babel/plugin-syntax-flow": "^7.24.7",
     "@babel/plugin-syntax-jsx": "^7.24.7",
     "@babel/plugin-syntax-typescript": "^7.24.7",
-    "@stylexjs/babel-plugin": "^0.8.0",
+    "@stylexjs/babel-plugin": "^0.9.3",
     "compare-versions": "^6.1.0"
   },
   "peerDependencies": {
-    "@stylexjs/stylex": "^0.8.0",
+    "@stylexjs/stylex": "^0.9.3",
     "vite": "^5.2.7"
   },
   "peerDependenciesMeta": {