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

packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js

@@ -369,6 +369,7 @@ describe('Evaluation of imported values works based on configuration', () => {
         import 'otherFile.stylex';
         import { MyTheme } from 'otherFile.stylex';
         _inject2(".__hashed_var__b69i2g{--__hashed_var__1jqb1tb:var(----__hashed_var__1jqb1tb)}", 1);
+        _inject2("@property ----__hashed_var__1jqb1tb { inherits: false }", 0);
         const styles = {
           color: color => [{
             "--__hashed_var__1jqb1tb": color == null ? null : "__hashed_var__b69i2g",
@@ -389,6 +390,14 @@ describe('Evaluation of imported values works based on configuration', () => {
             },
             1,
           ],
+          [
+            "----__hashed_var__1jqb1tb",
+            {
+              "ltr": "@property ----__hashed_var__1jqb1tb { inherits: false }",
+              "rtl": null,
+            },
+            0,
+          ],
         ]
       `);
     });

packages/babel-plugin/__tests__/stylex-transform-create-test.js

@@ -1323,6 +1323,7 @@ describe('@stylexjs/babel-plugin', () => {
         import stylex from 'stylex';
         _inject2(".xrkmrrc{background-color:red}", 3000);
         _inject2(".xfx01vb{color:var(--color)}", 3000);
+        _inject2("@property --color { inherits: false }", 0);
         export const styles = {
           default: color => [{
             backgroundColor: "xrkmrrc",
@@ -1352,6 +1353,7 @@ describe('@stylexjs/babel-plugin', () => {
         import stylex from 'stylex';
         _inject2(".xrkmrrc{background-color:red}", 3000);
         _inject2(".x1bl4301{width:var(--width)}", 4000);
+        _inject2("@property --width { inherits: false }", 0);
         export const styles = {
           default: width => [{
             backgroundColor: "xrkmrrc",
@@ -1385,6 +1387,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".xrkmrrc{background-color:red}", 3000);
         _inject2(".xfx01vb{color:var(--color)}", 3000);
         _inject2(".x1mqxbix{color:black}", 3000);
+        _inject2("@property --color { inherits: false }", 0);
         export const styles = {
           default: color => [{
             backgroundColor: "xrkmrrc",
@@ -1416,6 +1419,7 @@ describe('@stylexjs/babel-plugin', () => {
         var _inject2 = _inject;
         import stylex from 'stylex';
         _inject2(".x15mgraa{--background-color:var(----background-color)}", 1);
+        _inject2("@property ----background-color { inherits: false }", 0);
         export const styles = {
           default: bgColor => [{
             "--background-color": bgColor == null ? null : "x15mgraa",
@@ -1445,6 +1449,7 @@ describe('@stylexjs/babel-plugin', () => {
         import stylex from 'stylex';
         _inject2(".x1gykpug:hover{background-color:red}", 3130);
         _inject2(".xtyu0qe:hover{color:var(--1ijzsae)}", 3130);
+        _inject2("@property --1ijzsae { inherits: false }", 0);
         export const styles = {
           default: color => [{
             ":hover_backgroundColor": "x1gykpug",
@@ -1477,6 +1482,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".xrkmrrc{background-color:red}", 3000);
         _inject2(".xfx01vb{color:var(--color)}", 3000);
         _inject2(".x1mqxbix{color:black}", 3000);
+        _inject2("@property --color { inherits: false }", 0);
         export const styles = {
           default: color => [{
             backgroundColor: "xrkmrrc",
@@ -1508,6 +1514,7 @@ describe('@stylexjs/babel-plugin', () => {
         var _inject2 = _inject;
         import stylex from 'stylex';
         _inject2(".x15mgraa{--background-color:var(----background-color)}", 1);
+        _inject2("@property ----background-color { inherits: false }", 0);
         export const styles = {
           default: bgColor => [{
             "--background-color": bgColor == null ? null : "x15mgraa",
@@ -1543,6 +1550,7 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1n25116{color:var(--4xs81a)}", 3000);
         _inject2("@media (min-width: 1000px){.xtljkjt.xtljkjt:hover{color:green}}", 3330);
         _inject2(".x17z2mba:hover{color:blue}", 3130);
+        _inject2("@property --4xs81a { inherits: false }", 0);
         export const styles = {
           default: color => [{
             backgroundColor: "xrkmrrc",
@@ -1579,6 +1587,8 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1n25116{color:var(--4xs81a)}", 3000);
         _inject2("@media (min-width: 1000px){.xtljkjt.xtljkjt:hover{color:green}}", 3330);
         _inject2(".x1d4gdy3:hover{color:var(--w5m4kq)}", 3130);
+        _inject2("@property --4xs81a { inherits: false }", 0);
+        _inject2("@property --w5m4kq { inherits: false }", 0);
         export const styles = {
           default: color => [{
             backgroundColor: "xrkmrrc",
@@ -1622,6 +1632,9 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2(".x1k44ad6{margin-left:var(--14mfytm)}", 3000, ".x1k44ad6{margin-right:var(--14mfytm)}");
         _inject2(".x10ktymb:hover{margin-left:var(--yepcm9)}", 3130, ".x10ktymb:hover{margin-right:var(--yepcm9)}");
         _inject2(".x17zef60{margin-top:var(--marginTop)}", 4000);
+        _inject2("@property --14mfytm { inherits: false }", 0);
+        _inject2("@property --yepcm9 { inherits: false }", 0);
+        _inject2("@property --marginTop { inherits: false }", 0);
         export const styles = {
           default: margin => [{
             backgroundColor: "xrkmrrc",

packages/babel-plugin/src/visitors/stylex-create/index.js

@@ -117,13 +117,30 @@ export default function transformStyleXCreate(
       throw path.buildCodeFrameError(messages.NON_STATIC_VALUE, SyntaxError);
     }
     const plainObject = value;
+
+    // add injection that mark variables used for dynamic styles as `inherits: false`
+    const injectedInheritStyles: { [string]: InjectableStyle } = {};
+    if (fns != null) {
+      const dynamicFnsNames = Object.values(fns)
+        ?.map((entry) => Object.keys(entry[1]))
+        .flat();
+      dynamicFnsNames.forEach((fnsName) => {
+        injectedInheritStyles[fnsName] = {
+          priority: 0,
+          ltr: `@property ${fnsName} { inherits: false }`,
+          rtl: null,
+        };
+      });
+    }
+
     // eslint-disable-next-line prefer-const
     let [compiledStyles, injectedStylesSansKeyframes, classPathsPerNamespace] =
       stylexCreate(plainObject, state.options);
 
     const injectedStyles = {
       ...injectedKeyframes,
       ...injectedStylesSansKeyframes,
+      ...injectedInheritStyles,
     };
 
     let varName = null;

packages/cli/src/files.js

@@ -73,7 +73,11 @@ export function isJSFile(filePath: string): boolean {
 // e.g. ./pages/home/index.js -> ../../stylex_bundle.css
 export function getRelativePath(from: string, to: string): string {
   const relativePath = path.relative(path.parse(from).dir, to);
-  return formatRelativePath(relativePath);
+  return formatRelativePath(toPosixPath(relativePath));
+}
+
+function toPosixPath(filePath: string): string {
+  return filePath.split(path.sep).join(path.posix.sep);
 }
 
 function formatRelativePath(filePath: string) {

packages/eslint-plugin/src/stylex-valid-styles.js

@@ -2185,6 +2185,7 @@ const CSSProperties = {
   unicodeBidi: unicodeBidi,
   unicodeRange: unicodeRange,
   userSelect: userSelect,
+  viewTransitionName: makeUnionRule(all, isString),
   verticalAlign: verticalAlign,
   visibility: visibility,
   voiceBalance: voiceBalance,