@stylexjs/stylex 0.2.0-beta.20 → 0.2.0-beta.21

package/lib/native/CSSCustomPropertyValue.js

@@ -4,22 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CSSCustomPropertyValue = void 0;
-exports.isCustomPropertyValue = isCustomPropertyValue;
-const CUSTOM_PROPERTY_REGEX = /^var\(--(.+)\)$/;
+exports.createCSSCustomPropertyValue = createCSSCustomPropertyValue;
+const CUSTOM_PROPERTY_REGEX = /^var\(--([\w-]+) *(?:\)|, *(.+)\))$/;
 function camelize(s) {
   return s.replace(/-./g, x => x.toUpperCase()[1]);
 }
-function isCustomPropertyValue(value) {
-  return typeof value === "string" && CUSTOM_PROPERTY_REGEX.test(value);
+function createCSSCustomPropertyValue(value) {
+  if (typeof value === "string") {
+    const match = CUSTOM_PROPERTY_REGEX.exec(value);
+    if (match) {
+      return new CSSCustomPropertyValue(match[1], match[2]);
+    }
+  }
+  return null;
 }
 class CSSCustomPropertyValue {
-  constructor(value) {
-    const found = value.match(CUSTOM_PROPERTY_REGEX);
-    if (found == null) {
-      throw new Error("[stylex]: Unable to find custom property reference in input string");
-    }
-    const [, kebabCasePropName] = found;
+  constructor(kebabCasePropName, fallback) {
     this.name = camelize(kebabCasePropName);
+    this.defaultValue = fallback ?? null;
   }
 }
 exports.CSSCustomPropertyValue = CSSCustomPropertyValue;

package/lib/native/CSSCustomPropertyValue.js.flow

@@ -7,9 +7,21 @@
  * @flow strict
  */
 
-declare export function isCustomPropertyValue(value: mixed): boolean;
+/**
+ * Either create a custom property value or return null if the input is not a string
+ * containing a 'var(--name)' or 'var(--name, default)' sequence.
+ *
+ * Made this a single function to test and create to avoid parsing the RegExp twice.
+ */
+declare export function createCSSCustomPropertyValue(
+  value: string,
+): CSSCustomPropertyValue | null;
 
+/**
+ * Class representing a custom property value with an optional fallback.
+ */
 declare export class CSSCustomPropertyValue {
   name: string;
-  constructor(value: string): void;
+  defaultValue: mixed;
+  constructor(kebabCasePropName: string, fallback: mixed): void;
 }

package/lib/native/CSSLengthUnitValue.d.ts

@@ -7,16 +7,12 @@
  *
  */
 
+import type { SpreadOptions } from './SpreadOptions';
 type CSSLengthUnitType = 'em' | 'px' | 'rem' | 'vh' | 'vmax' | 'vmin' | 'vw';
 export declare class CSSLengthUnitValue {
   static parse(inp: string): [number, CSSLengthUnitType] | null;
   value: number;
   unit: CSSLengthUnitType;
   constructor(value: number, unit: CSSLengthUnitType);
-  resolvePixelValue(
-    viewportWidth: number,
-    viewportHeight: number,
-    fontScale: number,
-    inheritedFontSize: null | undefined | number,
-  ): number;
+  resolvePixelValue(options: SpreadOptions): number;
 }

package/lib/native/CSSLengthUnitValue.js

@@ -19,7 +19,13 @@ class CSSLengthUnitValue {
     this.value = value;
     this.unit = unit;
   }
-  resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize) {
+  resolvePixelValue(options) {
+    const {
+      viewportWidth,
+      viewportHeight,
+      fontScale = 1,
+      inheritedFontSize
+    } = options;
     const unit = this.unit;
     const value = this.value;
     const valuePercent = value / 100;

package/lib/native/CSSLengthUnitValue.js.flow

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import type { SpreadOptions } from './SpreadOptions';
+
 type CSSLengthUnitType = 'em' | 'px' | 'rem' | 'vh' | 'vmax' | 'vmin' | 'vw';
 
 // TODO: this only works on simple values
@@ -15,10 +17,5 @@ declare export class CSSLengthUnitValue {
   value: number;
   unit: CSSLengthUnitType;
   constructor(value: number, unit: CSSLengthUnitType): void;
-  resolvePixelValue(
-    viewportWidth: number,
-    viewportHeight: number,
-    fontScale: number,
-    inheritedFontSize: ?number,
-  ): number;
+  resolvePixelValue(options: SpreadOptions): number;
 }

package/lib/native/SpreadOptions.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export type SpreadOptions = {
+  customProperties: {};
+  inheritedFontSize: null | undefined | number;
+  fontScale: number | void;
+  passthroughProperties: Array<string>;
+  viewportHeight: number;
+  viewportWidth: number;
+  writingDirection: 'ltr' | 'rtl';
+};

package/lib/native/SpreadOptions.js

@@ -0,0 +1 @@
+"use strict";

package/lib/native/SpreadOptions.js.flow

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+export type SpreadOptions = {|
+  customProperties: {},
+  inheritedFontSize: ?number,
+  fontScale: number | void,
+  passthroughProperties: Array<string>,
+  viewportHeight: number,
+  viewportWidth: number,
+  writingDirection: 'ltr' | 'rtl',
+|};

package/lib/native/__tests__/__snapshots__/stylex-css-var-test.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stylex CSSCustomProperty value test falls back to a default value with spaces 1`] = `
+{
+  "style": {
+    "shadowColor": "0px 0px 0px black",
+    "shadowOffset": {
+      "height": undefined,
+      "width": undefined,
+    },
+    "shadowOpacity": 1,
+  },
+}
+`;
+
+exports[`stylex CSSCustomProperty value test parses a variable with a default value with spaces 1`] = `
+{
+  "style": {
+    "shadowColor": "5px 5px 5px black",
+    "shadowOffset": {
+      "height": undefined,
+      "width": undefined,
+    },
+    "shadowOpacity": 1,
+  },
+}
+`;
+
+exports[`stylex CSSCustomProperty value test parses and falls back to a default value containing spaces and embedded variables 1`] = `
+{
+  "style": {
+    "shadowColor": "var(--boxShadowVarNotFound",
+    "shadowOffset": {
+      "height": undefined,
+      "width": undefined,
+    },
+    "shadowOpacity": 1,
+  },
+}
+`;
+
+exports[`stylex CSSCustomProperty value test parses and falls back to default value containing a variable 1`] = `
+{
+  "style": {
+    "color": "blue",
+  },
+}
+`;

package/lib/native/__tests__/__snapshots__/stylex-test.js.snap

@@ -594,6 +594,17 @@ exports[`styles box-sizing: content-box: allDifferent 1`] = `
 }
 `;
 
+exports[`styles box-sizing: content-box: auto 1`] = `
+{
+  "style": {
+    "borderWidth": 2,
+    "height": 74,
+    "padding": 10,
+    "width": "auto",
+  },
+}
+`;
+
 exports[`styles box-sizing: content-box: height 1`] = `
 {
   "style": {

package/lib/native/__tests__/stylex-css-var-test.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _stylex = require("../stylex");
+const mockOptions = {
+  customProperties: {
+    testVar: "red",
+    testVar2: "blue",
+    boxShadowVar1: "5px 5px 5px black",
+    rawNumber: 10,
+    pixelNumber: "10px",
+    emNumber: "10em",
+    refToRawNumber: "var(--rawNumber)",
+    refToPixelNumber: "var(--pixelNumber)",
+    refToRefToRawNumber: "var(--refToRawNumber)"
+  },
+  viewportHeight: 600,
+  viewportWidth: 320
+};
+function resolveColorValue(colorValue) {
+  const styles = _stylex.stylex.create({
+    root: {
+      color: colorValue
+    }
+  });
+  return _stylex.stylex.spread(styles.root, mockOptions).style.color;
+}
+describe("stylex CSSCustomProperty value test", () => {
+  beforeEach(() => {
+    jest.spyOn(console, "warn");
+    console.warn.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.warn.mockRestore();
+  });
+  test("parses a basic variable correctly", () => {
+    expect(resolveColorValue("var(--testVar)")).toEqual("red");
+  });
+  test("parses kebab case to camel case", () => {
+    expect(resolveColorValue("var(--test-var)")).toEqual("red");
+  });
+  test("parses a variable with a default value", () => {
+    expect(resolveColorValue("var(--testVar, blue)")).toEqual("red");
+    expect(resolveColorValue("var(--notFound, blue)")).toEqual("blue");
+  });
+  test("parses kebab case with a default value", () => {
+    expect(resolveColorValue("var(--test-var, blue)")).toEqual("red");
+    expect(resolveColorValue("var(--not-found, blue)")).toEqual("blue");
+  });
+  test("parses a variable with a default value with spaces", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "var(--boxShadowVar1, 0px 0px 0px black)"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("falls back to a default value with spaces", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "var(--boxShadowVarNotFound, 0px 0px 0px black)"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("parses and falls back to default value containing a variable", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        color: "var(--colorNotFound, var(--testVar2))"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("parses and falls back to a default value containing spaces and embedded variables", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "var(--boxShadowVarNotFound, 0px 0px 0px var(--testVar2))"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("does not parse malformed vars", () => {
+    expect(resolveColorValue("var(--testUnfinished")).toEqual("var(--testUnfinished");
+    expect(resolveColorValue("var(bad--input)")).toEqual("var(bad--input)");
+    expect(resolveColorValue("--testMulti")).toEqual("--testMulti");
+    expect(resolveColorValue("var ( --testMulti)")).toEqual("var ( --testMulti)");
+  });
+  test("basic value lookup works", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: 10
+      },
+      withVars: {
+        borderWidth: "var(--rawNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+  });
+  test("value lookup with pixel prop conversion", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: "10px"
+      },
+      withVars: {
+        borderWidth: "var(--pixelNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+  });
+  test("value lookup with em prop conversion", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        fontSize: "10em"
+      },
+      withVars: {
+        fontSize: "var(--emNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.fontSize).toEqual(160);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.fontSize).toEqual(rootStyle.fontSize);
+  });
+  test("prop lookup with ref", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: "var(--refToRawNumber)"
+      },
+      withVars: {
+        borderWidth: "var(--refToPixelNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+  });
+  test("prop lookup with ref to ref", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        borderWidth: "var(--refToRefToRawNumber)"
+      }
+    });
+    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    expect(rootStyle.borderWidth).toEqual(10);
+  });
+});

package/lib/native/__tests__/stylex-test.js

@@ -132,6 +132,13 @@ describe("styles", () => {
         paddingLeft: 40,
         width: 100,
         height: 100
+      },
+      auto: {
+        boxSizing: "content-box",
+        borderWidth: 2,
+        padding: 10,
+        height: 50,
+        width: "auto"
       }
     });
     expect(_stylex.stylex.spread(styles.width, mockOptions)).toMatchSnapshot("width");
@@ -142,6 +149,7 @@ describe("styles", () => {
     expect(_stylex.stylex.spread(styles.minHeight, mockOptions)).toMatchSnapshot("minHeight");
     expect(_stylex.stylex.spread(styles.units, mockOptions)).toMatchSnapshot("units");
     expect(_stylex.stylex.spread(styles.allDifferent, mockOptions)).toMatchSnapshot("allDifferent");
+    expect(_stylex.stylex.spread(styles.auto, mockOptions)).toMatchSnapshot("auto");
   });
   test("direction", () => {
     const styles = _stylex.stylex.create({

package/lib/native/fixContentBox.js

@@ -42,6 +42,10 @@ function fixContentBox(flatStyle) {
         nextStyle[styleProp] = null;
         continue;
       }
+      if (styleValue === "auto") {
+        nextStyle[styleProp] = styleValue;
+        continue;
+      }
       if (typeof styleValue !== "number") {
         (0, _errorMsg.warnMsg)(`"boxSizing:'content-box'" does not support value "${String(styleValue)}" for property "${styleProp}". Expected a value that resolves to a number. Percentage values can only be used with "boxSizing:'border-box'".`);
         return flatStyle;

package/lib/native/stylex.d.ts

@@ -7,6 +7,7 @@
  *
  */
 
+import { type SpreadOptions } from './SpreadOptions';
 /**
  * The create method shim should do initial transforms like
  * renaming/expanding/validating properties, essentially all the steps
@@ -23,21 +24,10 @@ export declare function keyframes(): void;
 /**
  * The spread method shim
  */
-/**
- * The spread method shim
- */
-type SpreadOptions = {
-  customProperties: {};
-  inheritedFontSize: null | undefined | number;
-  fontScale: number | void;
-  passthroughProperties: Array<string>;
-  viewportHeight: number;
-  viewportWidth: number;
-  writingDirection: 'ltr' | 'rtl';
-};
+
 export declare function spread(
   style: null | undefined | { [key: string]: unknown },
-  $$PARAM_1$$: SpreadOptions,
+  options: SpreadOptions,
 ): { [$$Key$$: string]: {} };
 export type IStyleX = {
   create: typeof create;

package/lib/native/stylex.js

@@ -39,12 +39,13 @@ function isReactNativeStyleValue(propValue) {
 }
 function preprocessPropertyValue(propValue) {
   if (typeof propValue === "string") {
-    if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
-      return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
+    const customPropValue = (0, _CSSCustomPropertyValue.createCSSCustomPropertyValue)(propValue);
+    if (customPropValue != null) {
+      return customPropValue;
     }
     const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
     if (maybeLengthUnitValue != null) {
-      return new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
+      return maybeLengthUnitValue[1] === "px" ? maybeLengthUnitValue[0] : new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
     }
   }
   return propValue;
@@ -115,6 +116,22 @@ function preprocessCreate(style) {
   }
   return processedStyle;
 }
+function finalizeValue(unfinalizedValue, options) {
+  let styleValue = unfinalizedValue;
+  while (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
+    const customProperties = options.customProperties || {};
+    const resolvedValue = customProperties[styleValue.name] ?? styleValue.defaultValue;
+    if (resolvedValue == null) {
+      (0, _errorMsg.errorMsg)(`Unrecognized custom property "--${styleValue.name}"`);
+      return null;
+    }
+    styleValue = preprocessPropertyValue(resolvedValue);
+  }
+  if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
+    styleValue = styleValue.resolvePixelValue(options);
+  }
+  return styleValue;
+}
 function create(styles) {
   const result = {};
   for (const styleName in styles) {
@@ -130,16 +147,7 @@ function keyframes() {
   (0, _errorMsg.errorMsg)("keyframes are not supported in React Native.");
 }
 const timeValuedProperties = ["animationDelay", "animationDuration", "transitionDelay", "transitionDuration"];
-function spread(style, _ref) {
-  let {
-    customProperties = {},
-    inheritedFontSize,
-    fontScale = 1,
-    passthroughProperties = [],
-    viewportHeight,
-    viewportWidth,
-    writingDirection
-  } = _ref;
+function spread(style, options) {
   let {
     lineClamp,
     ...flatStyle
@@ -147,6 +155,12 @@ function spread(style, _ref) {
   let prevStyle = {
     ...flatStyle
   };
+  const {
+    passthroughProperties = [],
+    viewportHeight,
+    viewportWidth,
+    writingDirection
+  } = options;
   const nativeProps = {};
   for (const styleProp in flatStyle) {
     let styleValue = flatStyle[styleProp];
@@ -160,18 +174,10 @@ function spread(style, _ref) {
         continue;
       }
     }
-    if (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
-      const resolvedValue = customProperties[styleValue.name];
-      if (resolvedValue == null) {
-        (0, _errorMsg.errorMsg)(`Unrecognized custom property "--${styleValue.name}"`);
-        delete flatStyle[styleProp];
-        continue;
-      }
-      styleValue = resolvedValue;
-    }
-    if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
-      const resolvedValue = styleValue.resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize);
-      styleValue = resolvedValue;
+    styleValue = finalizeValue(styleValue, options);
+    if (styleValue == null) {
+      delete flatStyle[styleProp];
+      continue;
     }
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
       if (styleProp === "blockSize") {

package/lib/native/stylex.js.flow

@@ -7,6 +7,8 @@
  * @flow strict
  */
 
+import { type SpreadOptions } from './SpreadOptions';
+
 /**
  * The create method shim should do initial transforms like
  * renaming/expanding/validating properties, essentially all the steps
@@ -26,19 +28,10 @@ declare export function keyframes(): void;
 /**
  * The spread method shim
  */
-type SpreadOptions = {|
-  customProperties: {},
-  inheritedFontSize: ?number,
-  fontScale: number | void,
-  passthroughProperties: Array<string>,
-  viewportHeight: number,
-  viewportWidth: number,
-  writingDirection: 'ltr' | 'rtl',
-|};
 
 declare export function spread(
   style: ?{ [key: string]: mixed },
-  SpreadOptions,
+  options: SpreadOptions,
 ): { [string]: { ... } };
 
 export type IStyleX = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.20",
+  "version": "0.2.0-beta.21",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "react-native": "lib/native/stylex.js",
@@ -20,7 +20,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.20"
+    "@stylexjs/scripts": "0.2.0-beta.21"
   },
   "jest": {},
   "files": [