Merge branch 'main' of github.com:facebook/stylex into cli-cache-babel

.flowconfig

@@ -30,7 +30,7 @@ module.name_mapper='^@stylexjs\/shared\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_
 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'
-module.name_mapper='^@stylexjs/babel-plugin\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/\1'
+module.name_mapper='^@stylexjs/babel-plugin\/lib\/\(.+\)$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/\1'
 ; type-stubs
 module.system.node.resolve_dirname=flow_modules
 module.system.node.resolve_dirname=node_modules

apps/cli-example/package.json

@@ -1,19 +1,19 @@
 {
   "name": "stylex-cli-example",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "private": true,
   "scripts": {
     "transform": "stylex --config .stylex.json5"
   },
   "dependencies": {
-    "@stylexjs/open-props": "0.10.0",
+    "@stylexjs/open-props": "0.10.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.25.7",
-    "@stylexjs/cli": "0.10.0",
+    "@stylexjs/cli": "0.10.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "typescript": "^5"

apps/docs/blog/2025-01-17-Release-v0.10.1.mdx

@@ -0,0 +1,25 @@
+---
+# 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.
+slug: v0.10.1
+title: Release 0.10.1
+authors: 
+  - nmn
+tags: 
+  - release
+---
+
+
+
+# Release 0.10.1
+
+## Release Notes
+
+- Fixed a bug where variables with camelCase names were incorrectly converted to kebab-case (Thanks [yasuhiro-yamamoto](https://github.com/yasuhiro-yamamoto))
+- Fixed a bug in the eslint `valid-styles` rule where it would incorrectly flag when importing a file with an extension (Thanks [beaumontjonathan](https://github.com/beaumontjonathan))
+- Added support for `.js` resolved file extension imports from `.ts` files (Thanks [beaumontjonathan](https://github.com/beaumontjonathan))
+- Replaced `crypto` with `murmurhash` for CLI caching 
+- Fixed a bug where the `import resolve` function would not respect the Windows system (Thanks [nonzzz](https://github.com/nonzzz))
+- Fixed a bug where the `initial-value` in `@Property` was invalid

apps/docs/docs/learn/06-recipes/03-descendant styles.mdx

@@ -6,9 +6,6 @@
 sidebar_position: 3
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 # Variables for descendant styles
 
 It is not uncommon to define styles on an element that are dependent on a parent element's state, 

apps/docs/docs/learn/06-recipes/04-reset-themes.mdx

@@ -0,0 +1,30 @@
+---
+# 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.
+sidebar_position: 4
+---
+
+# Reset Theme
+
+The `stylex.defineVars` function is used to create a set of CSS variables,
+called `VarGroup`s. Further, the `stylex.createTheme` function can be used to create 
+`Theme`s, that override the values of the variables defined within `VarGroup`s.
+
+Many `VarGroup`s can be defined which can then be independently overridden with `Theme`s.
+However, `Theme`s for the *same* `VarGroup` are mutually exclusive and do not merge.
+Any variable in a `VarGroup` that is not explicitly overridden in a `Theme` for that `VarGroup`
+is set to its default value.
+
+This characteristic of `Theme`s can be used to define a "empty" theme that resets all variables
+to their default values.
+
+## Example
+
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { vars } from './variables.stylex';
+
+export const resetVars = stylex.createTheme(vars, {});
+```

apps/docs/docs/learn/06-recipes/05-merge-themes.mdx

@@ -0,0 +1,42 @@
+---
+# 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.
+sidebar_position: 5
+---
+
+# Merge Themes
+
+`Theme`s for the *same* `VarGroup` are mutually exclusive and do not merge.
+Any variable in a `VarGroup` that is not explicitly overridden in a `Theme` for that `VarGroup`
+is set to its default value.
+
+However, you can reuse common constants when defining multiple themes for a particular
+`VarGroup` and avoid excessive repetition.
+
+## Example
+
+```tsx
+import * as stylex from '@stylexjs/stylex';
+import { vars } from './variables.stylex';
+
+const themeBlueVars = {
+  backgroundColor: 'blue',
+};
+const themeBlue = stylex.createTheme(vars, themeBlueVars);
+
+const themeBigVars = {
+  size: '128px',
+};
+const themeBig = stylex.createTheme(vars, themeBigVars);
+
+const themeBigBlueVars = {...themeBlueVars, ...themeBigVars};
+const themeBigBlue = stylex.createTheme(vars, themeBigBlueVars);
+```
+
+The StyleX compiler is able to resolve local object constants and merge them.
+This is useful to be able to define a `Theme` that merges the values of two or more
+other `Theme`s without repetition.
+
+

apps/docs/docs/learn/06-recipes/06-light-dark-themes.mdx

@@ -0,0 +1,79 @@
+---
+# 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.
+sidebar_position: 6
+---
+
+# Light and Dark Themes
+
+It is a common pattern to define separate `light`, `dark` and system themes
+to provide the ability to switch between different color schemes.
+
+This would typically be done by defining three separate `Theme`s:
+
+```tsx
+const lightVars = {
+  primaryColor: 'black',
+  ...
+};
+export const light = stylex.createTheme(vars, lightVars);
+
+const darkVars = {
+  primaryColor: 'white',
+  ...
+};
+export const dark = stylex.createTheme(vars, darkVars);
+
+const systemVars = {
+  primaryColor: {
+    default: 'black',
+    '@media (prefers-color-scheme: dark)': 'white',
+  },
+  ...
+};
+export const system = stylex.createTheme(vars, systemVars);
+```
+This pattern is well supported and will work in all browsers that support CSS variables.
+
+## Using the `light-dark()` CSS function
+
+In modern browsers, we suggest using the 
+[`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
+CSS function instead which will simplify the code and remove the need to define themes.
+
+```tsx
+export const vars = stylex.defineVars({
+  primaryColor: 'light-dark(black, white)',
+  ...
+});
+```
+
+You can now control the color scheme applied by using the `color-scheme` CSS property.
+
+```tsx
+const styles = stylex.create({
+  light: {
+    colorScheme: 'light',
+  },
+  dark: {
+    colorScheme: 'dark',
+  },
+  system: {
+    colorScheme: 'light dark',
+  },
+});
+
+<div {...stylex.props(styles[colorScheme])}>
+  ...
+</div>
+```
+
+You *can* still define custom themes for other use-cases and use `light-dark()` within them.
+
+### Limitations
+
+1. The `light-dark()` CSS function can only be used for color values.
+2. The `light-dark()` function is not supported in older browsers.
+

apps/docs/package.json

@@ -23,7 +23,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/react": "^1.6.22",
-    "@stylexjs/stylex": "0.10.0",
+    "@stylexjs/stylex": "0.10.1",
     "@vercel/analytics": "^1.1.1",
     "@webcontainer/api": "^1.3.0",
     "clsx": "^1.2.1",
@@ -36,7 +36,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.25.8",
     "@stylexjs/eslint-plugin": "0.8.0",
-    "@stylexjs/babel-plugin": "0.10.0",
+    "@stylexjs/babel-plugin": "0.10.1",
     "clean-css": "^5.3.2",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",

apps/nextjs-example/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@stylexjs/eslint-plugin": "^0.7.5",
-    "@stylexjs/postcss-plugin": "0.10.0",
+    "@stylexjs/postcss-plugin": "0.10.1",
     "@types/node": "^22.7.6",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

apps/rollup-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rollup-example",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "A simple rollup example to test stylexjs/rollup-plugin",
   "main": "index.js",
   "scripts": {
@@ -9,7 +9,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@stylexjs/stylex": "0.10.0",
-    "@stylexjs/rollup-plugin": "0.10.0"
+    "@stylexjs/stylex": "0.10.1",
+    "@stylexjs/rollup-plugin": "0.10.1"
   }
 }

apps/webpack-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-example",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "A simple webpack example to test stylexjs/webpack-plugin",
   "main": "index.js",
   "scripts": {
@@ -9,10 +9,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@stylexjs/stylex": "0.10.0"
+    "@stylexjs/stylex": "0.10.1"
   },
   "devDependencies": {
-    "@stylexjs/webpack-plugin": "0.10.0",
+    "@stylexjs/webpack-plugin": "0.10.1",
     "html-webpack-plugin": "^5.6.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"