@stylexjs/stylex 0.1.0-beta.7 → 0.2.0-beta.11

package/lib/native/stylex.js

@@ -0,0 +1,283 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.create = create;
+exports.firstThatWorks = exports.default = void 0;
+exports.keyframes = keyframes;
+exports.spread = spread;
+exports.stylex = void 0;
+var _CSSCustomPropertyValue = require("./CSSCustomPropertyValue");
+var _CSSLengthUnitValue = require("./CSSLengthUnitValue");
+var _CSSMediaQuery = require("./CSSMediaQuery");
+var _errorMsg = require("./errorMsg");
+var _flattenStyle = require("./flattenStyle");
+var _parseShadow = require("./parseShadow");
+/**
+ * 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 stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'backfaceVisibility', 'backgroundColor', 'borderBlockColor', 'borderBlockStyle', 'borderBlockWidth', 'borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth', 'borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderColor', 'borderInlineColor', 'borderInlineStyle', 'borderInlineWidth', 'borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth', 'borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStartEndRadius', 'borderStartStartRadius', 'borderStyle', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'color', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'fontVariant', 'gap', 'gapColumn', 'gapRow', 'height',
+// 'includeFontPadding', Android Only
+'inset', 'insetBlock', 'insetBlockEnd', 'insetBlockStart', 'insetInline', 'insetInlineEnd', 'insetInlineStart', 'justifyContent', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'objectFit', 'opacity', 'overflow', 'padding', 'paddingBlock', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingEnd', 'paddingInline', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'pointerEvents', 'position', 'resizeMode', 'right', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'shadowWidth', 'start', 'textAlign', 'textDecorationLine', 'textDecorationColor',
+// iOS Only
+'textDecorationStyle',
+// iOS Only
+'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'tintColor', 'transform', 'top', 'userSelect', 'verticalAlign',
+// Android Only
+'width', 'writingDirection',
+// iOS Only
+'zIndex']);
+function isReactNativeStyleProp(propName) {
+  return stylePropertyAllowlistSet.has(propName) || propName.startsWith('--');
+}
+function isReactNativeStyleValue(propValue) {
+  if (typeof propValue === 'string') {
+    // RN doesn't have an inherit keyword
+    if (propValue === 'inherit') {
+      return false;
+    }
+    // RN doesn't have an inherit keyword
+    if (propValue === 'initial') {
+      return false;
+    }
+    //if (propValue.endsWith('em')) {
+    //  return false;
+    //}
+    //if (propValue.endsWith('rem')) {
+    //  return false;
+    //}
+    // RN on android doesn't like explicitly specified px units
+    if (propValue.endsWith('px')) {
+      return false;
+    }
+    // RN doesn't support calc functions
+    if (propValue.includes('calc(')) {
+      return false;
+    }
+  }
+  return true;
+}
+function preprocessPropertyValue(propValue) {
+  if (typeof propValue === 'string') {
+    if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
+      return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
+    }
+    const maybeViewportValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
+    if (maybeViewportValue != null) {
+      return maybeViewportValue;
+    }
+  }
+  return propValue;
+}
+function preprocessCreate(style) {
+  // eslint-disable-next-line flowtype/no-flow-fix-me-comments
+  const processedStyle = {};
+  for (const propName in style) {
+    const styleValue = style[propName];
+    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === 'object' && styleValue != null) {
+      // have to spread styleValue into a copied object to appease flow
+      const processsedSubStyle = preprocessCreate({
+        ...styleValue
+      });
+      processedStyle[propName] = new _CSSMediaQuery.CSSMediaQuery(propName, processsedSubStyle);
+      continue;
+    }
+    if (propName === 'backgroundImage') {
+      (0, _errorMsg.errorMsg)('"backgroundImage" is not supported in React Native.');
+    }
+    // React Native only supports non-standard box-shadow styles
+    else if (propName === 'boxShadow' && typeof styleValue === 'string') {
+      const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
+      if (parsedShadow.length > 1) {
+        (0, _errorMsg.errorMsg)('Multiple "boxShadow" values are not supported in React Native.');
+      }
+      const {
+        inset,
+        offsetX,
+        offsetY,
+        blurRadius,
+        color
+      } = parsedShadow[0];
+      // TODO: parse alpha color inputs => alpha + color
+      // errorMsg('"boxShadow" opacity is not implemented in React Native.');
+      if (inset) {
+        (0, _errorMsg.errorMsg)('"boxShadow" value of "inset" is not supported in React Native.');
+      }
+      processedStyle.shadowColor = color;
+      processedStyle.shadowOffset = {
+        height: offsetY,
+        width: offsetX
+      };
+      processedStyle.shadowOpacity = 1;
+      processedStyle.shadowRadius = blurRadius;
+    }
+    // Needed by React Native for Desktop
+    else if (propName === 'fontWeight' && typeof styleValue === 'number') {
+      // $FlowFixMe
+      processedStyle[propName] = styleValue.toString();
+    } else if (propName === 'position') {
+      if (styleValue === 'fixed') {
+        processedStyle[propName] = 'absolute';
+        (0, _errorMsg.errorMsg)('"position" value of "fixed" is not supported in React Native. Falling back to "absolute".');
+      } else if (styleValue === 'sticky') {
+        processedStyle[propName] = 'relative';
+        (0, _errorMsg.errorMsg)('"position" value of "sticky" is not supported in React Native. Falling back to "relative".');
+      } else {
+        processedStyle[propName] = styleValue;
+      }
+    }
+    // React Native only supports non-standard text-shadow styles
+    else if (propName === 'textShadow' && typeof styleValue === 'string') {
+      const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
+      if (parsedShadow.length > 1) {
+        (0, _errorMsg.errorMsg)('Multiple "textShadow" values are not supported in React Native.');
+      }
+      const {
+        offsetX,
+        offsetY,
+        blurRadius,
+        color
+      } = parsedShadow[0];
+      processedStyle.textShadowColor = color;
+      processedStyle.textShadowOffset = {
+        height: offsetY,
+        width: offsetX
+      };
+      processedStyle.textShadowRadius = blurRadius;
+    } else {
+      processedStyle[propName] = styleValue;
+    }
+  }
+
+  // Process values that need to be resolved during render
+  for (const prop in processedStyle) {
+    const processedStyleValue = preprocessPropertyValue(processedStyle[prop]);
+    processedStyle[prop] = processedStyleValue;
+  }
+  return processedStyle;
+}
+
+/**
+ * The create method shim should do initial transforms like
+ * renaming/expanding/validating properties, essentially all the steps
+ * which can be done at initialization-time (could potentially be done at
+ * compile-time in the future).
+ */
+function create(styles) {
+  const result = {};
+  for (const styleName in styles) {
+    result[styleName] = preprocessCreate(styles[styleName]);
+  }
+  return result;
+}
+const firstThatWorks = function () {
+  return arguments.length <= 0 ? undefined : arguments[0];
+};
+exports.firstThatWorks = firstThatWorks;
+function keyframes() {
+  (0, _errorMsg.errorMsg)('keyframes are not supported in React Native.');
+}
+
+/**
+ * The spread method shim
+ */
+
+function spread(style, _ref) {
+  let {
+    customProperties,
+    inheritedFontSize,
+    fontScale = 1,
+    viewportHeight,
+    viewportWidth,
+    writingDirection
+  } = _ref;
+  /* eslint-disable prefer-const */
+  let {
+    lineClamp,
+    ...flatStyle
+  } = (0, _flattenStyle.flattenStyle)(style);
+  /* eslint-enable prefer-const */
+
+  const nativeProps = {};
+  for (const styleProp in flatStyle) {
+    let styleValue = flatStyle[styleProp];
+
+    // resolve media queries
+    if (styleValue instanceof _CSSMediaQuery.CSSMediaQuery) {
+      const maybeExistingMediaQuery = flatStyle[styleProp];
+      if (maybeExistingMediaQuery instanceof _CSSMediaQuery.CSSMediaQuery) {
+        const s = (0, _flattenStyle.flattenStyle)([maybeExistingMediaQuery.matchedStyle, styleValue.matchedStyle]);
+        if (s != null) {
+          maybeExistingMediaQuery.matchedStyle = s;
+        }
+        continue;
+      }
+    }
+    // resolve custom property references
+    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;
+    }
+    // resolve viewport units
+    if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
+      const resolvedValue = styleValue.resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize);
+      styleValue = resolvedValue;
+    }
+
+    // Filter out any unexpected style property names so RN doesn't crash but give
+    // the developer a warning to let them know that there's a new prop we should either
+    // explicitly ignore or process in some way.
+    // NOTE: Any kind of prop name transformations should happen before this check.
+    if (!isReactNativeStyleProp(styleProp)) {
+      (0, _errorMsg.errorMsg)(`Encountered unsupported style property "${styleProp}"`);
+      delete flatStyle[styleProp];
+      continue;
+    }
+
+    // Similar filter to the prop name one above but instead operates on the property's
+    // value. Similarly, any sort of prop value transformations should happen before this
+    // filter.
+    // We check this at resolve time to ensure the render-time styles are safe.
+    if (!isReactNativeStyleValue(styleValue)) {
+      (0, _errorMsg.errorMsg)(`Encounted unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
+      delete flatStyle[styleProp];
+      continue;
+    }
+    flatStyle[styleProp] = styleValue;
+  }
+  if (flatStyle != null && Object.keys(flatStyle).length > 0) {
+    flatStyle = _CSSMediaQuery.CSSMediaQuery.resolveMediaQueries(flatStyle, {
+      width: viewportWidth,
+      height: viewportHeight,
+      direction: writingDirection
+    });
+    // $FlowFixMe
+    nativeProps.style = flatStyle;
+  }
+  if (lineClamp != null) {
+    // $FlowFixMe
+    nativeProps.numberOfLines = lineClamp;
+  }
+  return nativeProps;
+}
+const stylex = {
+  create,
+  firstThatWorks,
+  keyframes,
+  spread
+};
+exports.stylex = stylex;
+var _default = stylex;
+exports.default = _default;

package/lib/stylex.d.ts

@@ -38,17 +38,14 @@ export type CompiledNamespaceSet = {
   readonly [K in string]: CompiledNamespace;
 };
 
-type Stylex$Create = <S extends StyleXNamespaceSet>(
+type Stylex$Create = <S extends NamespaceSet>(
   styles: S
 ) => $ReadOnly<{
   readonly [K in keyof S]: {
     readonly [P in keyof S[K]]: S[K][P] extends string | number
-      ? StyleXClassNameFor<P, S[K][P]>
+      ? ClassNameFor<P, S[K][P]>
       : {
-          readonly [F in keyof S[K][P]]: StyleXClassNameFor<
-            `${P}+${F}`,
-            S[K][P][F]
-          >;
+          readonly [F in keyof S[K][P]]: ClassNameFor<`${P}+${F}`, S[K][P][F]>;
         };
   };
 }>;
@@ -56,19 +53,17 @@ type Stylex$Create = <S extends StyleXNamespaceSet>(
 type StylexInclude = <S extends CompiledNamespace>(
   compiledNamespace: S
 ) => {
-  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V>
-    ? V
-    : Uncompiled<S[K]>;
+  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V> ? V : S[K];
 };
 
-type Stylex$Keyframes = <S extends StyleXNamespaceSet>(
-  animationConfig: S
-) => string;
+type Stylex$Keyframes = <S extends NamespaceSet>(animationConfig: S) => string;
 
-type stylex = {
+type NestedArray<T> = T | Array<T | NestedArray<T>>;
+
+declare let stylex: {
   (
     ...styles: ReadonlyArray<
-      StyleXArray<(CompiledNamespace | null | undefined) | boolean>
+      NestedArray<(CompiledNamespace | null | undefined) | boolean>
     >
   ): string;
   create: Stylex$Create;
@@ -79,6 +74,14 @@ type stylex = {
     rtlRule: string | null | undefined
   ) => void;
   keyframes: Stylex$Keyframes;
+  spread: (
+    ...styles: ReadonlyArray<
+      NestedArray<(Object | CompiledNamespace | null | undefined) | boolean>
+    >
+  ) => {
+    className: string;
+    style: { [key: string]: string | number };
+  };
 };
 
 export default stylex;

package/lib/stylex.js

@@ -12,79 +12,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.default = exports.create = exports.UNSUPPORTED_PROPERTY = void 0;
+exports.spread = spread;
+exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
+var _styleq = require("styleq");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const enableCache = true;
-const cache = enableCache ? new WeakMap() : null;
-function stylex() {
-  // Keep a set of property commits to the className
-  const definedProperties = [];
-  let className = '';
-  let nextCache = cache;
+function spread() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-  while (styles.length) {
-    // Push nested styles back onto the stack to be processed
-    const possibleStyle = styles.pop();
-    if (Array.isArray(possibleStyle)) {
-      for (let i = 0; i < possibleStyle.length; i++) {
-        styles.push(possibleStyle[i]);
-      }
-      continue;
-    }
-
-    // Process an individual style object
-    const styleObj = possibleStyle;
-    if (styleObj != null && typeof styleObj === 'object') {
-      // Build up the class names defined by this object
-      let classNameChunk = '';
-      if (nextCache != null && nextCache.has(styleObj)) {
-        // Cache: read
-        const cacheEntry = nextCache.get(styleObj);
-        if (cacheEntry != null) {
-          classNameChunk = cacheEntry.classNameChunk;
-          definedProperties.push(...cacheEntry.definedPropertiesChunk);
-          nextCache = cacheEntry.next;
-        }
-      } else {
-        // Record the properties this object defines (and that haven't already
-        // been defined by later objects.)
-        const definedPropertiesChunk = [];
-        for (const prop in styleObj) {
-          const value = styleObj[prop];
-          // Style declarations, e.g., opacity: 's3fkgpd'
-          if (typeof value === 'string') {
-            // Skip adding to the chunks if property has already been seen
-            if (!definedProperties.includes(prop)) {
-              definedProperties.push(prop);
-              definedPropertiesChunk.push(prop);
-              classNameChunk += classNameChunk ? ' ' + value : value;
-            }
-          }
-        }
-        // Cache: write
-        if (nextCache != null) {
-          const emptyCache = new WeakMap();
-          nextCache.set(styleObj, {
-            classNameChunk,
-            definedPropertiesChunk,
-            next: emptyCache
-          });
-          nextCache = emptyCache;
-        }
-      }
-
-      // Order of classes in chunks matches property-iteration order of style
-      // object. Order of chunks matches passed order of styles from first to
-      // last (which we iterate over in reverse).
-      if (classNameChunk) {
-        className = className ? classNameChunk + ' ' + className : classNameChunk;
-      }
-    }
-  }
-  return className;
+  const [className, style] = (0, _styleq.styleq)(styles);
+  return {
+    className,
+    style
+  };
 }
 function stylexCreate(_styles) {
   throw new Error('stylex.create should never be called. It should be compiled away.');
@@ -92,17 +34,39 @@ function stylexCreate(_styles) {
 function stylexIncludes(_styles) {
   throw new Error('stylex.extends should never be called. It should be compiled away.');
 }
-stylex.create = stylexCreate;
-stylex.include = stylexIncludes;
-stylex.keyframes = _keyframes => {
+const create = stylexCreate;
+exports.create = create;
+const include = stylexIncludes;
+exports.include = include;
+const keyframes = _keyframes => {
   throw new Error('stylex.keyframes should never be called');
 };
-stylex.firstThatWorks = function () {
+exports.keyframes = keyframes;
+const firstThatWorks = function () {
   throw new Error('stylex.firstThatWorks should never be called.');
 };
-stylex.inject = _stylexInject.default;
-stylex.UNSUPPORTED_PROPERTY = props => {
+exports.firstThatWorks = firstThatWorks;
+const inject = _stylexInject.default;
+exports.inject = inject;
+const UNSUPPORTED_PROPERTY = _props => {
   throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
 };
-var _default = stylex;
-exports.default = _default;
+exports.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+function _stylex() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  const [className] = (0, _styleq.styleq)(styles);
+  return className;
+}
+_stylex.spread = spread;
+_stylex.create = create;
+_stylex.include = include;
+_stylex.keyframes = keyframes;
+_stylex.firstThatWorks = firstThatWorks;
+_stylex.inject = inject;
+_stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+var _default = _stylex;
+exports.default = _default;
+const stylex = _stylex;
+exports.stylex = stylex;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.1.0-beta.7",
-  "description": "A minimal runtime styling library for web.",
+  "version": "0.2.0-beta.11",
+  "description": "A styling library for React.",
   "main": "lib/stylex.js",
+  "react-native": "lib/native/stylex.js",
   "types": "lib/stylex.d.ts",
-  "repository": "https://www.github.com/facebookexternal/stylex",
-  "author": "Naman Goel <nmn@fb.com>",
+  "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
     "build": "babel src/ --out-dir lib/ --copy-files",
@@ -13,11 +13,10 @@
     "test": "jest"
   },
   "dependencies": {
+    "css-mediaquery": "^0.1.2",
     "invariant": "^2.2.4",
-    "utility-types": "^3.10.0"
-  },
-  "devDependencies": {
-    "benchmark": "^2.1.4"
+    "utility-types": "^3.10.0",
+    "styleq": "0.1.3"
   },
   "jest": {},
   "files": [