Repository: facebook/stylex (JavaScript)

Issue:
using data attributes token conversions break sometimes
### Describe the issue

in this code:

**text.stylex.ts**
```ts
export const text = stylex.defineVars({
	fontWeight: stylex.types.integer(400),
});
```

**component.tsx**
```tsx
const styles = stylex.create({
	div: {
		[text.fontWeight]: {
			":is([data-size='default'])": 500,
			":is([data-size='large'])": 600,
		},
	},
});
```

`500` and `600` resolve to `500px` and `600px`

### Expected behavior

I'd expect the value to remain intact

### Steps to reproduce

create a component that applies the data property and see the styles resolve to `500px`, `600px`

### Test case

do you guys have a sandbox you'd like me to put a repro together in?

I can do it in a follow up comment if so

### Additional comments

_No response_


Discussion: I could be wrong, but this could work:
```jsx
const styles = stylex.create({
  div: {
    [text.fontWeight]: {
      ":is([data-size='default'])": stylex.types.integer(500),
      ":is([data-size='large'])": stylex.types.integer(600),
    },
  },
});
```
@srikrsna that might fix a type error (not sure if the TS types are even strict enough for that), but other than that `stylex.types` have no functional impact outside of `defineVars`.

> create a component that applies the data property and see the styles resolve to 500px, 600px

Looks like the bug reported is that the values are being converted to `px` values instead of being maintained as numbers. Is this correct?




Fix (patch):
diff --git a/package-lock.json b/package-lock.json
index 8ea683a22..76f862dc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31782,7 +31782,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -31798,7 +31797,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -31814,7 +31812,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -31830,7 +31827,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -31846,7 +31842,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -31862,7 +31857,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -31878,7 +31872,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -31894,7 +31887,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -31910,7 +31902,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -54295,6 +54286,60 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz",
+      "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz",
+      "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz",
+      "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz",
+      "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz",
+      "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz",
+      "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz",
+      "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz",
+      "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz",
+      "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==",
+      "optional": true
     }
   }
 }
diff --git a/packages/shared/src/transform-value.js b/packages/shared/src/transform-value.js
index e668be09c..a0e28919c 100644
--- a/packages/shared/src/transform-value.js
+++ b/packages/shared/src/transform-value.js
@@ -50,7 +50,7 @@ export default function transformValue(
 }
 
 export function getNumberSuffix(key: string): string {
-  if (unitlessNumberProperties.has(key)) {
+  if (unitlessNumberProperties.has(key) || key.startsWith('--')) {
     return '';
   }
   if (!(key in numberPropertySuffixes)) {