fix(babel-plugin): dynamic generate

package.json

@@ -7,6 +7,7 @@
   "keywords": [],
   "author": "kanno",
   "license": "MIT",
+  "packageManager": "[email protected]",
   "devDependencies": {
     "@stylex-extend/babel-plugin": "workspace:*",
     "@stylex-extend/core": "workspace:*",

packages/babel-plugin/__tests__/fixtures/jsx-attributes/define-css-variable/code.js

@@ -0,0 +1,14 @@
+export function Component(props) {
+  const size = '16px'
+  return (
+    <div stylex={{
+      '--font-size-unit': size,
+      color: {
+        default: null,
+        '@media (max-width: 600px)': size ? props.read : props.purple
+      }
+    }}
+    >
+    </div>
+  )
+}

packages/babel-plugin/__tests__/fixtures/jsx-attributes/define-css-variable/output.js

@@ -0,0 +1,23 @@
+import { create as _create, props as _props } from "@stylexjs/stylex";
+const _styles = _create({
+  "--font-size-unit": (_$size) => ({
+    "--font-size-unit": _$size,
+  }),
+  color: (_$1c2mtth) => ({
+    color: {
+      default: null,
+      "@media (max-width: 600px)": _$1c2mtth,
+    },
+  }),
+});
+export function Component(props) {
+  const size = "16px";
+  return (
+    <div
+      {..._props(
+        _styles["--font-size-unit"](size),
+        _styles["color"](size ? props.read : props.purple)
+      )}
+    ></div>
+  );
+}

packages/babel-plugin/__tests__/fixtures/jsx-attributes/dynamic-single-prop/output.js

@@ -7,11 +7,11 @@ const _styles = _create({
   fontSize: {
     fontSize: "20px",
   },
-  display: (_$display) => ({
-    display: _$display,
+  display: (_$mashst) => ({
+    display: _$mashst,
   }),
-  padding: (_$padding) => ({
-    padding: _$padding,
+  padding: (_$omo79q) => ({
+    padding: _$omo79q,
   }),
 });
 export function Component(props) {

packages/babel-plugin/src/visitor/jsx-attribute.ts

@@ -1,5 +1,6 @@
 /* eslint-disable no-labels */
 import { NodePath, types } from '@babel/core'
+import { utils } from '@stylexjs/shared'
 import { Context } from '../state-context'
 import type { CSSObjectValue } from '../interface'
 
@@ -142,8 +143,9 @@ function scanExpressionProperty(path: NodePath<types.ObjectProperty>, ctx: CSSCo
       if (value.type === 'TemplateLiteral' && !value.expressions.length) {
         CSSObject[attr] = value.quasis[0].value.raw
       } else {
-        CSSObject[attr] = l(attr)
-        ctx.recordVars('prop', types.identifier(l(attr)), path.get('value') as NodePath<types.Expression>)
+        const value = l(utils.hash(attr))
+        CSSObject[attr] = value
+        ctx.recordVars('prop', types.identifier(value), path.get('value') as NodePath<types.Expression>)
       }
       break
     }
@@ -155,8 +157,9 @@ function scanExpressionProperty(path: NodePath<types.ObjectProperty>, ctx: CSSCo
       break
     }
     case 'CallExpression': {
-      CSSObject[attr] = l(attr)
-      ctx.recordVars('prop', types.identifier(l(attr)), path.get('value') as NodePath<types.Expression>)
+      const value = l(utils.hash(attr))
+      CSSObject[attr] = value
+      ctx.recordVars('prop', types.identifier(value), path.get('value') as NodePath<types.Expression>)
       break
     }
     case 'ObjectExpression': {