@stylexjs/stylex 0.2.0-beta.10 → 0.2.0-beta.11

package/README.md

@@ -87,15 +87,15 @@ const styles = stylex.create({
 
 The compiler will extract the rules to CSS and replace the rules in the source code with a "compiled style" object.
 
-### stylex.apply()
+### stylex.spread()
 
-Applying style rules to specific elements is done using `stylex.apply()`. Each argument to this function must be a reference to a compiled style object, or an array of compiled style objects. The function merges styles from left to right.
+Applying style rules to specific elements is done using `stylex.spread`. Each argument to this function must be a reference to a compiled style object, or an array of compiled style objects. The function merges styles from left to right.
 
 ```tsx
-<div {...stylex.apply(styles.root, styles.highlighted)} />
+<div {...stylex.spread(styles.root, styles.highlighted)} />
 ```
 
-The `stylex.apply` function returns React DOM style props as required to render an HTML element. StyleX styles can still be passed to other components via props, but only the components rendering HTML elements will use `stylex.apply()`. For example:
+The `stylex.spread` function returns React props as required to render an element. StyleX styles can still be passed to other components via props, but only the components rendering host platform elements will use `stylex.spread()`. For example:
 
 ```tsx
 const styles = stylex.create({
@@ -108,7 +108,7 @@ const styles = stylex.create({
 });
 
 function InternalComponent(props) {
-  return <div {...props} {...stylex.apply([ styles.internalRoot, props.style ])} />
+  return <div {...props} {...stylex.spread([ styles.internalRoot, props.style ])} />
 }
 
 export function ExportedComponent(props) {
@@ -119,19 +119,19 @@ export function ExportedComponent(props) {
 Styles can be conditionally included using standard JavaScript.
 
 ```tsx
-<div {...stylex.apply(styles.root, isHighlighted && styles.highlighted)} />
+<div {...stylex.spread(styles.root, isHighlighted && styles.highlighted)} />
 ```
 
 And the local merging of styles can be used to control the relative priority of rules. For example, to allow a component's local styles to take priority over style property values passed in via props.
 
 ```tsx
-<div {...stylex.apply(props.style, styles.root)} />
+<div {...stylex.spread(props.style, styles.root)} />
 ```
 
 You can even mix compiled styles with inline styles
 
 ```tsx
-<div {...stylex.apply(styles.root, { opacity })} />
+<div {...stylex.spread(styles.root, { opacity })} />
 ```
 
 ### stylex.firstThatWorks()
@@ -174,7 +174,7 @@ type Props = {
 
 function MyComponent({style, ...}: Props) {
   return (
-    <div {...stylex.apply(localStyles.foo, localStyles.bar, style)} />
+    <div {...stylex.spread(localStyles.foo, localStyles.bar, style)} />
   );
 }
 ```

package/lib/native/CSSCustomPropertyValue.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSCustomPropertyValue = void 0;
+exports.isCustomPropertyValue = isCustomPropertyValue;
+/**
+ * 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.
+ *
+ * 
+ */
+
+const CUSTOM_PROPERTY_REGEX = /^var\(--(.+)\)$/;
+function camelize(s) {
+  return s.replace(/-./g, x => x.toUpperCase()[1]);
+}
+function isCustomPropertyValue(value) {
+  return typeof value === 'string' && CUSTOM_PROPERTY_REGEX.test(value);
+}
+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;
+    this.name = camelize(kebabCasePropName);
+  }
+}
+exports.CSSCustomPropertyValue = CSSCustomPropertyValue;

package/lib/native/CSSLengthUnitValue.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSLengthUnitValue = void 0;
+/**
+ * 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.
+ *
+ * 
+ */
+
+const LENGTH_REGEX = /^([0-9]*[.]?[0-9]+)(em|px|rem|vh|vmax|vmin|vw)$/;
+// TODO: this only works on simple values
+class CSSLengthUnitValue {
+  static parse(inp) {
+    const match = inp.match(LENGTH_REGEX);
+    if (match == null) {
+      return null;
+    }
+    const [, value, unit] = match;
+    const parsedValue = parseFloat(value);
+    // $FlowFixMe
+    return new CSSLengthUnitValue(parsedValue, unit);
+  }
+  constructor(value, unit) {
+    this.value = value;
+    this.unit = unit;
+  }
+  resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize) {
+    const unit = this.unit;
+    const value = this.value;
+    const valuePercent = value / 100;
+    switch (unit) {
+      case 'em':
+        {
+          if (inheritedFontSize == null) {
+            return fontScale * 16 * value;
+          } else {
+            return inheritedFontSize * value;
+          }
+        }
+      case 'px':
+        {
+          return value;
+        }
+      case 'rem':
+        {
+          return fontScale * 16 * value;
+        }
+      case 'vh':
+        {
+          return viewportHeight * valuePercent;
+        }
+      case 'vmin':
+        {
+          return Math.min(viewportWidth, viewportHeight) * valuePercent;
+        }
+      case 'vmax':
+        {
+          return Math.max(viewportWidth, viewportHeight) * valuePercent;
+        }
+      case 'vw':
+        {
+          return viewportWidth * valuePercent;
+        }
+      default:
+        {
+          console.error(`[stylex]: Unsupported unit of "${unit}"`);
+          return 0;
+        }
+    }
+  }
+}
+exports.CSSLengthUnitValue = CSSLengthUnitValue;

package/lib/native/CSSMediaQuery.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSMediaQuery = void 0;
+var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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.
+ *
+ * 
+ */
+
+const MQ_PREFIX = '@media';
+class CSSMediaQuery {
+  static isMediaQueryString(inp) {
+    return inp.startsWith(MQ_PREFIX);
+  }
+  static resolveMediaQueries(styleObj, matchObj) {
+    const mediaQueries = [];
+    const result = {};
+
+    // collect all the media queries
+    for (const [key, value] of Object.entries(styleObj)) {
+      if (value instanceof CSSMediaQuery) {
+        mediaQueries.push(value);
+      } else {
+        result[key] = value;
+      }
+    }
+
+    // check the media queries to see if any apply and if they do,
+    // merge their styles into the result
+    if (mediaQueries.length > 0) {
+      for (const mqInst of mediaQueries) {
+        const unresolvedMatchedStyle = mqInst.resolve(matchObj);
+        const resolvedMatchedStyle = this.resolveMediaQueries(unresolvedMatchedStyle, matchObj);
+        for (const propName in resolvedMatchedStyle) {
+          result[propName] = resolvedMatchedStyle[propName];
+        }
+      }
+    }
+    return result;
+  }
+  constructor(query, matchedStyle) {
+    this.query = query.replace(MQ_PREFIX, '');
+    this.matchedStyle = matchedStyle;
+  }
+  resolve(matchObject) {
+    const {
+      width,
+      height,
+      direction
+    } = matchObject;
+    const matches = _cssMediaquery.default.match(this.query, {
+      width,
+      height,
+      orientation: width > height ? 'landscape' : 'portrait',
+      'aspect-ratio': width / height,
+      direction: direction
+    });
+    return matches ? this.matchedStyle : {};
+  }
+}
+exports.CSSMediaQuery = CSSMediaQuery;

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

@@ -0,0 +1,372 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom properties filters out the property and emits a warning when encountering a variable name which has not been provided 1`] = `{}`;
+
+exports[`custom properties resolves custom properties' values 1`] = `
+{
+  "style": {
+    "color": "#333",
+    "width": 42,
+  },
+}
+`;
+
+exports[`length units 10 "em" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 160,
+  },
+}
+`;
+
+exports[`length units 10 "em" units based on inherited font-size 1`] = `
+{
+  "style": {
+    "width": 120,
+  },
+}
+`;
+
+exports[`length units 10 "px" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 10,
+  },
+}
+`;
+
+exports[`length units 10 "rem" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 160,
+  },
+}
+`;
+
+exports[`length units 10 "vh" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 60,
+  },
+}
+`;
+
+exports[`length units 10 "vmax" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 60,
+  },
+}
+`;
+
+exports[`length units 10 "vmin" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 32,
+  },
+}
+`;
+
+exports[`length units 10 "vw" units are resolved to pixels 1`] = `
+{
+  "style": {
+    "width": 32,
+  },
+}
+`;
+
+exports[`styles box-shadow 1`] = `
+{
+  "style": {
+    "shadowColor": "red",
+    "shadowOffset": {
+      "height": 2,
+      "width": 1,
+    },
+    "shadowOpacity": 1,
+    "shadowRadius": 3,
+  },
+}
+`;
+
+exports[`styles direction 1`] = `
+{
+  "style": {
+    "direction": "ltr",
+  },
+}
+`;
+
+exports[`styles direction 2`] = `
+{
+  "style": {
+    "direction": "rtl",
+  },
+}
+`;
+
+exports[`styles font-size: default 1`] = `
+{
+  "style": {
+    "fontSize": 40,
+  },
+}
+`;
+
+exports[`styles font-size: fontScale:2 1`] = `
+{
+  "style": {
+    "fontSize": 80,
+  },
+}
+`;
+
+exports[`styles font-variant 1`] = `
+{
+  "style": {
+    "fontVariant": "common-ligatures small-caps",
+  },
+}
+`;
+
+exports[`styles font-weight 1`] = `
+{
+  "style": {
+    "fontWeight": "900",
+  },
+}
+`;
+
+exports[`styles font-weight 2`] = `
+{
+  "style": {
+    "fontWeight": "bold",
+  },
+}
+`;
+
+exports[`styles line-clamp 1`] = `
+{
+  "numberOfLines": 3,
+}
+`;
+
+exports[`styles object-fit: contain 1`] = `
+{
+  "style": {
+    "objectFit": "contain",
+  },
+}
+`;
+
+exports[`styles object-fit: contain 2`] = `
+{
+  "style": {
+    "objectFit": "cover",
+  },
+}
+`;
+
+exports[`styles object-fit: fill 1`] = `
+{
+  "style": {
+    "objectFit": "fill",
+  },
+}
+`;
+
+exports[`styles object-fit: none 1`] = `
+{
+  "style": {
+    "objectFit": "none",
+  },
+}
+`;
+
+exports[`styles object-fit: scaleDown 1`] = `
+{
+  "style": {
+    "objectFit": "scale-down",
+  },
+}
+`;
+
+exports[`styles pointer-events 1`] = `
+{
+  "style": {
+    "pointerEvents": "none",
+  },
+}
+`;
+
+exports[`styles position: absolute 1`] = `
+{
+  "style": {
+    "position": "absolute",
+  },
+}
+`;
+
+exports[`styles position: fixed 1`] = `
+{
+  "style": {
+    "position": "absolute",
+  },
+}
+`;
+
+exports[`styles position: relative 1`] = `
+{
+  "style": {
+    "position": "relative",
+  },
+}
+`;
+
+exports[`styles position: static 1`] = `
+{
+  "style": {
+    "position": "static",
+  },
+}
+`;
+
+exports[`styles position: sticky 1`] = `
+{
+  "style": {
+    "position": "relative",
+  },
+}
+`;
+
+exports[`styles text-shadow 1`] = `
+{
+  "style": {
+    "textShadowColor": "red",
+    "textShadowOffset": {
+      "height": 2,
+      "width": 1,
+    },
+    "textShadowRadius": 3,
+  },
+}
+`;
+
+exports[`styles text-shadow 2`] = `
+{
+  "style": {
+    "textShadowColor": "red",
+    "textShadowOffset": {
+      "height": 2,
+      "width": 1,
+    },
+    "textShadowRadius": 3,
+  },
+}
+`;
+
+exports[`styles transform: matrix 1`] = `
+{
+  "style": {
+    "transform": "matrix(0.1, 1, -0.3, 1, 0, 0)",
+  },
+}
+`;
+
+exports[`styles transform: mixed 1`] = `
+{
+  "style": {
+    "transform": "
+          rotateX(1deg) rotateY(2deg) rotateZ(3deg) rotate3d(1deg, 2deg, 3deg)
+          scale(1) scaleX(2) scaleY(3) scaleZ(4) scale3d(1,2,3)
+          translateX(1px) translateY(1em) translateZ(1rem) translate3d(1px, 1em, 1rem)
+        ",
+  },
+}
+`;
+
+exports[`styles transform: none 1`] = `
+{
+  "style": {
+    "transform": "none",
+  },
+}
+`;
+
+exports[`styles transform: perspective 1`] = `
+{
+  "style": {
+    "transform": "perspective(10px)",
+  },
+}
+`;
+
+exports[`styles transform: rotate 1`] = `
+{
+  "style": {
+    "transform": "rotate(10deg) rotateX(20deg) rotateY(30deg) rotateZ(40deg) rotate3d(0, 0.5, 1, 90deg)",
+  },
+}
+`;
+
+exports[`styles transform: rotate 2`] = `
+{
+  "style": {
+    "transform": "rotate(10deg) rotateX(20deg) rotateY(30deg) rotateZ(40deg) rotate3d(0, 0.5, 1, 90deg)",
+  },
+}
+`;
+
+exports[`styles transform: scale 1`] = `
+{
+  "style": {
+    "transform": "scale(1, 2) scaleX(1) scaleY(2) scaleZ(3) scale3d(1, 2, 3)",
+  },
+}
+`;
+
+exports[`styles transform: skew 1`] = `
+{
+  "style": {
+    "transform": "skew(10deg, 15deg) skewX(20deg) skewY(30deg)",
+  },
+}
+`;
+
+exports[`styles transform: translate 1`] = `
+{
+  "style": {
+    "transform": "translate(10px, 20px) translateX(11px) translateY(12px) translateZ(13px) translate3d(20px, 30px, 40px)",
+  },
+}
+`;
+
+exports[`styles user-select 1`] = `
+{
+  "style": {
+    "userSelect": "none",
+  },
+}
+`;
+
+exports[`styles vertical-align: middle 1`] = `
+{
+  "style": {
+    "verticalAlign": "middle",
+  },
+}
+`;
+
+exports[`styles vertical-align: top 1`] = `
+{
+  "style": {
+    "verticalAlign": "top",
+  },
+}
+`;
+
+exports[`unsupported style values calc 1`] = `{}`;
+
+exports[`unsupported style values inherit 1`] = `{}`;
+
+exports[`unsupported style values initial 1`] = `{}`;