@stylexjs/shared 0.7.3 → 0.7.5

package/lib/stylex-first-that-works.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-declare function stylexFirstThatWorks<T extends string>(
-  ...args: ReadonlyArray<T>
-): ReadonlyArray<T>;
+declare function stylexFirstThatWorks(
+  ...args: ReadonlyArray<string>
+): ReadonlyArray<string> | string;
 export default stylexFirstThatWorks;

package/lib/stylex-first-that-works.js

@@ -4,9 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = stylexFirstThatWorks;
+const isVar = arg => typeof arg === 'string' && arg.match(/^var\(--[a-zA-Z0-9-_]+\)$/);
 function stylexFirstThatWorks() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-  return [...args].reverse();
+  const firstVar = args.findIndex(isVar);
+  if (firstVar === -1) {
+    return [...args].reverse();
+  }
+  const priorities = args.slice(0, firstVar).reverse();
+  const rest = args.slice(firstVar);
+  const firstNonVar = rest.findIndex(arg => !isVar(arg));
+  const varParts = rest.slice(0, firstNonVar === -1 ? rest.length : firstNonVar + 1).reverse();
+  const vars = varParts.map(arg => isVar(arg) ? arg.slice(4, -1) : arg);
+  const returnValue = [vars.reduce((soFar, varName) => soFar ? `var(${varName}, ${String(soFar)})` : varName.startsWith('--') ? `var(${varName})` : varName, ''), ...priorities];
+  if (returnValue.length === 1) {
+    return returnValue[0];
+  }
+  return returnValue;
 }

package/lib/stylex-first-that-works.js.flow

@@ -7,6 +7,6 @@
  * @flow strict
  */
 
-declare export default function stylexFirstThatWorks<T: string>(
-  ...args: $ReadOnlyArray<T>
-): $ReadOnlyArray<T>;
+declare export default function stylexFirstThatWorks(
+  ...args: $ReadOnlyArray<string>
+): $ReadOnlyArray<string> | string;

package/lib/utils/property-priorities.js

@@ -56,11 +56,11 @@ longHandLogical.add('border-block-width');
 shorthandsOfLonghands.add('border-block-start');
 shorthandsOfLonghands.add('border-top');
 longHandLogical.add('border-block-start-color');
-longHandLogical.add('border-top-color');
+longHandPhysical.add('border-top-color');
 longHandLogical.add('border-block-start-style');
-longHandLogical.add('border-top-style');
+longHandPhysical.add('border-top-style');
 longHandLogical.add('border-block-start-width');
-longHandLogical.add('border-top-width');
+longHandPhysical.add('border-top-width');
 shorthandsOfLonghands.add('border-block-end');
 shorthandsOfLonghands.add('border-bottom');
 longHandLogical.add('border-block-end-color');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.7.3"
+    "@stylexjs/scripts": "0.7.5"
   },
   "jest": {
     "snapshotFormat": {