feat: Implement style-value-parser to stylex normalize-value and improvements in style-value-parser

.flowconfig

@@ -1,5 +1,5 @@
 [version]
-0.245.2
+0.249.0
 
 [ignore]
 .*/build/.*
@@ -26,7 +26,9 @@ munge_underscores=true
 suppress_type=$FlowFixMe
 suppress_type=$FlowTODO
 module.name_mapper='^@stylexjs\/shared$' -> '<PROJECT_ROOT>/packages/shared/src/index.js'
-module.name_mapper='^@stylexjs\/shared\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/shared/src/\1'
+module.name_mapper='^@stylexjs\/shared\/lib\/\([a-zA-Z0-9_\/\-]+\)$' -> '<PROJECT_ROOT>/packages/shared/src/\1'
+module.name_mapper='^@stylexjs\/style-value-parser$' -> '<PROJECT_ROOT>/packages/style-value-parser/src/index.js'
+module.name_mapper='^@stylexjs\/style-value-parser\/lib\/\([a-zA-Z0-9_\/\-]+\)$' -> '<PROJECT_ROOT>/packages/style-value-parser/src/\1'
 module.name_mapper='^@stylexjs/stylex$' -> '<PROJECT_ROOT>/packages/stylex/src/stylex.js'
 module.name_mapper='^@stylexjs/stylex\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/stylex/src/\1'
 module.name_mapper='^@stylexjs/babel-plugin$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/index.js'

apps/cli-example/package.json

@@ -11,11 +11,11 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
+    "@babel/preset-react": "^7.25.7",
+    "@babel/preset-typescript": "^7.25.7",
     "@stylexjs/cli": "0.8.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "typescript": "^5"
   }
 }

apps/docs/package.json

@@ -24,13 +24,13 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.6.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.23.10",
+    "@babel/eslint-parser": "^7.25.8",
     "@stylexjs/babel-plugin": "0.8.0",
     "clean-css": "^5.3.2",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-header": "^3.1.1",
     "eslint-plugin-import": "^2.29.1",

apps/esbuild-example/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@stylexjs/esbuild-plugin": "^0.7.5",
     "@stylexjs/eslint-plugin": "^0.7.5",
-    "esbuild": "^0.19.12",
-    "eslint": "^8.55.0"
+    "esbuild": "^0.24.0",
+    "eslint": "^8.57.1"
   }
 }

apps/nextjs-example/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@stylexjs/stylex": "^0.7.5",
     "@stylexjs/open-props": "^0.7.5",
-    "bright": "^0.8.4",
+    "bright": "^0.8.5",
     "react": "^18",
     "react-dom": "^18",
     "next": "14.0.1"
@@ -23,13 +23,13 @@
     "@stylexjs/babel-plugin": "^0.7.5",
     "@stylexjs/eslint-plugin": "^0.7.5",
     "@stylexjs/nextjs-plugin": "^0.7.5",
-    "@types/node": "^20.10.4",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "^8.56.0",
+    "@types/node": "^22.7.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.0.1",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.10",
     "typescript": "^5.3.3"
   }
 }

apps/nextjs-example/typetests/theming/ButtonTokenThemes.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { Theme } from '@stylexjs/stylex';
+
+import { ButtonTokens } from './ButtonTokens.stylex';
+
+import * as stylex from '@stylexjs/stylex';
+
+/* eslint-disable no-unused-vars */
+
+const fdsRed: Theme<typeof ButtonTokens> = stylex.createTheme(ButtonTokens, {
+  bgColor: 'red',
+  color: 'white',
+  height: 'var(--button-height-medium)',
+  opacity: '1',
+});
+
+const fdsBlue: Theme<typeof ButtonTokens> = stylex.createTheme(ButtonTokens, {
+  bgColor: 'blue',
+  color: 'white',
+  height: 'var(--button-height-medium)',
+  opacity: '1',
+});
+
+const styles = stylex.create({
+  test1: {
+    padding: 4,
+    color: ButtonTokens.color,
+    backgroundColor: `color-mix(in oklch, ${ButtonTokens.bgColor}, 'white')`,
+  },
+});

apps/nextjs-example/typetests/theming/ButtonTokens.stylex.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type { VarGroup } from '@stylexjs/stylex';
+import * as stylex from '@stylexjs/stylex';
+
+declare const ButtonTokensTag: unique symbol;
+export const ButtonTokens: VarGroup<
+  Readonly<{
+    bgColor: string;
+    color: string;
+    height: string;
+    opacity: string;
+  }>,
+  typeof ButtonTokensTag
+> = stylex.defineVars({
+  bgColor: 'var(--secondary-button-background)',
+  color: 'currentcolor',
+  height: 'var(--button-height-medium)',
+  opacity: '1',
+});

apps/webpack-example/package.json

@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@stylexjs/webpack-plugin": "0.8.0",
-    "html-webpack-plugin": "^5.5.3",
+    "html-webpack-plugin": "^5.6.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"
   }