@stylexjs/stylex 0.3.0 → 0.4.0

package/lib/native/stylex.js

@@ -1,393 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.__customProperties = void 0;
-exports.create = create;
-exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = void 0;
-exports.keyframes = keyframes;
-exports.props = props;
-exports.stylex = void 0;
-var _CSSCustomPropertyValue = require("./CSSCustomPropertyValue");
-var _CSSLengthUnitValue = require("./CSSLengthUnitValue");
-var _CSSMediaQuery = require("./CSSMediaQuery");
-var _errorMsg = require("./errorMsg");
-var _fixContentBox = require("./fixContentBox");
-var _flattenStyle = require("./flattenStyle");
-var _parseShadow = require("./parseShadow");
-var _parseTimeValue = require("./parseTimeValue");
-const stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', 'animationDelay', 'animationDuration', 'aspectRatio', 'backfaceVisibility', 'backgroundColor', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxSizing', 'color', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'fontVariant', 'gap', 'gapColumn', 'gapRow', 'height', 'justifyContent', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'objectFit', 'opacity', 'overflow', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pointerEvents', 'position', 'resizeMode', 'right', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'shadowWidth', 'start', 'textAlign', 'textDecorationLine', 'textDecorationColor', 'textDecorationStyle', 'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'tintColor', 'transform', 'transitionDelay', 'transitionDuration', 'top', 'userSelect', 'verticalAlign', 'width', 'zIndex']);
-function isReactNativeStyleProp(propName) {
-  return stylePropertyAllowlistSet.has(propName) || propName.startsWith('--');
-}
-function isReactNativeStyleValue(propValue) {
-  if (typeof propValue === 'string') {
-    if (propValue === 'inherit') {
-      return false;
-    }
-    if (propValue === 'initial') {
-      return false;
-    }
-    if (propValue.endsWith('px')) {
-      return false;
-    }
-    if (propValue.includes('calc(')) {
-      return false;
-    }
-  }
-  return true;
-}
-function preprocessPropertyValue(propValue) {
-  if (typeof propValue === 'string') {
-    const customPropValue = (0, _CSSCustomPropertyValue.createCSSCustomPropertyValue)(propValue);
-    if (customPropValue != null) {
-      return customPropValue;
-    }
-    const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
-    if (maybeLengthUnitValue != null) {
-      return maybeLengthUnitValue[1] === 'px' ? maybeLengthUnitValue[0] : new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
-    }
-  }
-  return propValue;
-}
-function preprocessCreate(style) {
-  const processedStyle = {};
-  for (const propName in style) {
-    const styleValue = style[propName];
-    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === 'object' && styleValue != null) {
-      const processsedSubStyle = preprocessCreate({
-        ...styleValue
-      });
-      processedStyle[propName] = new _CSSMediaQuery.CSSMediaQuery(propName, processsedSubStyle);
-      continue;
-    }
-    if (propName === 'boxShadow' && typeof styleValue === 'string') {
-      const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
-      if (parsedShadow.length > 1) {
-        (0, _errorMsg.warnMsg)('Multiple "boxShadow" values are not supported in React Native.');
-      }
-      const {
-        inset,
-        offsetX,
-        offsetY,
-        blurRadius,
-        color
-      } = parsedShadow[0];
-      if (inset) {
-        (0, _errorMsg.warnMsg)('"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;
-    } else if (propName === 'textShadow' && typeof styleValue === 'string') {
-      const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
-      if (parsedShadow.length > 1) {
-        (0, _errorMsg.warnMsg)('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;
-    }
-  }
-  for (const prop in processedStyle) {
-    let value = processedStyle[prop];
-    if (prop === 'lineHeight') {
-      if (typeof value === 'number' || typeof value === 'string' && _CSSLengthUnitValue.CSSLengthUnitValue.parse(value) == null) {
-        value = value + 'em';
-      }
-    }
-    const processedStyleValue = preprocessPropertyValue(value);
-    processedStyle[prop] = processedStyleValue;
-  }
-  return processedStyle;
-}
-function finalizeValue(unfinalizedValue, options) {
-  let styleValue = unfinalizedValue;
-  if (typeof styleValue === 'object' && styleValue != null && Object.hasOwn(styleValue, 'default')) {
-    if (options.hover === true && Object.hasOwn(styleValue, ':hover')) {
-      styleValue = styleValue[':hover'];
-    } else {
-      styleValue = styleValue.default;
-    }
-  }
-  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) {
-    const val = styles[styleName];
-    if (typeof val === 'function') {
-      result[styleName] = function () {
-        const style = val(...arguments);
-        return preprocessCreate(style);
-      };
-    } else {
-      result[styleName] = preprocessCreate(styles[styleName]);
-    }
-  }
-  return result;
-}
-const firstThatWorks = function () {
-  return arguments.length <= 0 ? undefined : arguments[0];
-};
-exports.firstThatWorks = firstThatWorks;
-function keyframes(k) {
-  (0, _errorMsg.errorMsg)('keyframes are not supported in React Native.');
-  return k;
-}
-const timeValuedProperties = ['animationDelay', 'animationDuration', 'transitionDelay', 'transitionDuration'];
-function props() {
-  const options = this;
-  for (var _len = arguments.length, style = new Array(_len), _key = 0; _key < _len; _key++) {
-    style[_key] = arguments[_key];
-  }
-  let {
-    lineClamp,
-    ...flatStyle
-  } = (0, _flattenStyle.flattenStyle)(style);
-  let prevStyle = {
-    ...flatStyle
-  };
-  const {
-    passthroughProperties = [],
-    viewportHeight,
-    viewportWidth,
-    writingDirection
-  } = options;
-  const nativeProps = {};
-  for (const styleProp in flatStyle) {
-    let styleValue = flatStyle[styleProp];
-    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;
-      }
-    }
-    styleValue = finalizeValue(styleValue, options);
-    if (styleValue == null) {
-      delete flatStyle[styleProp];
-      continue;
-    }
-    if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
-      if (styleProp === 'blockSize') {
-        flatStyle.height = flatStyle.height ?? styleValue;
-      } else if (styleProp === 'inlineSize') {
-        flatStyle.width = flatStyle.width ?? styleValue;
-      } else if (styleProp === 'maxBlockSize') {
-        flatStyle.maxHeight = flatStyle.maxHeight ?? styleValue;
-      } else if (styleProp === 'minBlockSize') {
-        flatStyle.minHeight = flatStyle.minHeight ?? styleValue;
-      } else if (styleProp === 'maxInlineSize') {
-        flatStyle.maxWidth = flatStyle.maxWidth ?? styleValue;
-      } else if (styleProp === 'minInlineSize') {
-        flatStyle.minWidth = flatStyle.minWidth ?? styleValue;
-      } else if (styleProp === 'borderBlockColor') {
-        flatStyle.borderTopColor = flatStyle.borderTopColor ?? styleValue;
-        flatStyle.borderBottomColor = flatStyle.borderBottomColor ?? styleValue;
-      } else if (styleProp === 'borderBlockStyle') {
-        flatStyle.borderTopStyle = flatStyle.borderTopStyle ?? styleValue;
-        flatStyle.borderBottomStyle = flatStyle.borderBottomStyle ?? styleValue;
-      } else if (styleProp === 'borderBlockWidth') {
-        flatStyle.borderTopWidth = flatStyle.borderTopWidth ?? styleValue;
-        flatStyle.borderBottomWidth = flatStyle.borderBottomWidth ?? styleValue;
-      } else if (styleProp === 'borderBlockEndColor') {
-        flatStyle.borderBottomColor = prevStyle.borderBottomColor ?? styleValue;
-      } else if (styleProp === 'borderBlockEndStyle') {
-        flatStyle.borderBottomStyle = prevStyle.borderBottomStyle ?? styleValue;
-      } else if (styleProp === 'borderBlockEndWidth') {
-        flatStyle.borderBottomWidth = prevStyle.borderBottomWidth ?? styleValue;
-      } else if (styleProp === 'borderBlockStartColor') {
-        flatStyle.borderTopColor = prevStyle.borderTopColor ?? styleValue;
-      } else if (styleProp === 'borderBlockStartStyle') {
-        flatStyle.borderTopStyle = prevStyle.borderTopStyle ?? styleValue;
-      } else if (styleProp === 'borderBlockStartWidth') {
-        flatStyle.borderTopWidth = prevStyle.borderTopWidth ?? styleValue;
-      } else if (styleProp === 'borderInlineColor') {
-        flatStyle.borderStartColor = flatStyle.borderStartColor ?? styleValue;
-        flatStyle.borderEndColor = flatStyle.borderEndColor ?? styleValue;
-      } else if (styleProp === 'borderInlineStyle') {
-        flatStyle.borderStartStyle = flatStyle.borderStartStyle ?? styleValue;
-        flatStyle.borderEndStyle = flatStyle.borderEndStyle ?? styleValue;
-      } else if (styleProp === 'borderInlineWidth') {
-        flatStyle.borderStartWidth = flatStyle.borderStartWidth ?? styleValue;
-        flatStyle.borderEndWidth = flatStyle.borderEndWidth ?? styleValue;
-      } else if (styleProp === 'borderInlineEndColor') {
-        flatStyle.borderEndColor = styleValue;
-      } else if (styleProp === 'borderInlineEndStyle') {
-        flatStyle.borderEndStyle = styleValue;
-      } else if (styleProp === 'borderInlineEndWidth') {
-        flatStyle.borderEndWidth = styleValue;
-      } else if (styleProp === 'borderInlineStartColor') {
-        flatStyle.borderStartColor = styleValue;
-      } else if (styleProp === 'borderInlineStartStyle') {
-        flatStyle.borderStartStyle = styleValue;
-      } else if (styleProp === 'borderInlineStartWidth') {
-        flatStyle.borderStartWidth = styleValue;
-      } else if (styleProp === 'borderStartStartRadius') {
-        flatStyle.borderTopStartRadius = styleValue;
-      } else if (styleProp === 'borderEndStartRadius') {
-        flatStyle.borderBottomStartRadius = styleValue;
-      } else if (styleProp === 'borderStartEndRadius') {
-        flatStyle.borderTopEndRadius = styleValue;
-      } else if (styleProp === 'borderEndEndRadius') {
-        flatStyle.borderBottomEndRadius = styleValue;
-      } else if (styleProp === 'inset') {
-        flatStyle.top = flatStyle.top ?? styleValue;
-        flatStyle.start = flatStyle.start ?? styleValue;
-        flatStyle.end = flatStyle.end ?? styleValue;
-        flatStyle.bottom = flatStyle.bottom ?? styleValue;
-      } else if (styleProp === 'insetBlock') {
-        flatStyle.top = flatStyle.top ?? styleValue;
-        flatStyle.bottom = flatStyle.bottom ?? styleValue;
-      } else if (styleProp === 'insetBlockEnd') {
-        flatStyle.bottom = prevStyle.bottom ?? styleValue;
-      } else if (styleProp === 'insetBlockStart') {
-        flatStyle.top = prevStyle.top ?? styleValue;
-      } else if (styleProp === 'insetInline') {
-        flatStyle.end = flatStyle.end ?? styleValue;
-        flatStyle.start = flatStyle.start ?? styleValue;
-      } else if (styleProp === 'insetInlineEnd') {
-        flatStyle.end = prevStyle.end ?? styleValue;
-      } else if (styleProp === 'insetInlineStart') {
-        flatStyle.start = prevStyle.start ?? styleValue;
-      } else if (styleProp === 'marginBlock') {
-        flatStyle.marginVertical = styleValue;
-      } else if (styleProp === 'marginBlockStart') {
-        flatStyle.marginTop = flatStyle.marginTop ?? styleValue;
-      } else if (styleProp === 'marginBlockEnd') {
-        flatStyle.marginBottom = flatStyle.marginBottom ?? styleValue;
-      } else if (styleProp === 'marginInline') {
-        flatStyle.marginHorizontal = styleValue;
-      } else if (styleProp === 'marginInlineStart') {
-        flatStyle.marginStart = styleValue;
-      } else if (styleProp === 'marginInlineEnd') {
-        flatStyle.marginEnd = styleValue;
-      } else if (styleProp === 'paddingBlock') {
-        flatStyle.paddingVertical = styleValue;
-      } else if (styleProp === 'paddingBlockStart') {
-        flatStyle.paddingTop = flatStyle.paddingTop ?? styleValue;
-      } else if (styleProp === 'paddingBlockEnd') {
-        flatStyle.paddingBottom = flatStyle.paddingBottom ?? styleValue;
-      } else if (styleProp === 'paddingInline') {
-        flatStyle.paddingHorizontal = styleValue;
-      } else if (styleProp === 'paddingInlineStart') {
-        flatStyle.paddingStart = styleValue;
-      } else if (styleProp === 'paddingInlineEnd') {
-        flatStyle.paddingEnd = styleValue;
-      } else {
-        (0, _errorMsg.warnMsg)(`Ignoring unsupported style property "${styleProp}"`);
-      }
-      delete flatStyle[styleProp];
-      continue;
-    }
-    if (!isReactNativeStyleValue(styleValue)) {
-      (0, _errorMsg.warnMsg)(`Ignoring 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
-    });
-    if (flatStyle.borderStyle === 'none') {
-      flatStyle.borderWidth = 0;
-      delete flatStyle.borderStyle;
-    }
-    if (typeof flatStyle.fontWeight === 'number') {
-      flatStyle.fontWeight = flatStyle.fontWeight.toString();
-    }
-    const boxSizingValue = flatStyle.boxSizing;
-    if (boxSizingValue === 'content-box') {
-      flatStyle = (0, _fixContentBox.fixContentBox)(flatStyle);
-    }
-    delete flatStyle.boxSizing;
-    const positionValue = flatStyle.position;
-    if (positionValue === 'fixed') {
-      flatStyle.position = 'absolute';
-      (0, _errorMsg.warnMsg)('"position" value of "fixed" is not supported in React Native. Falling back to "absolute".');
-    } else if (positionValue === 'static') {
-      flatStyle.position = 'relative';
-      (0, _errorMsg.warnMsg)('"position" value of "static" is not supported in React Native. Falling back to "relative".');
-    } else if (positionValue === 'sticky') {
-      flatStyle.position = 'relative';
-      (0, _errorMsg.warnMsg)('"position" value of "sticky" is not supported in React Native. Falling back to "relative".');
-    }
-    for (const timeValuedProperty of timeValuedProperties) {
-      if (typeof flatStyle[timeValuedProperty] === 'string') {
-        flatStyle[timeValuedProperty] = (0, _parseTimeValue.parseTimeValue)(flatStyle[timeValuedProperty]);
-      }
-    }
-    nativeProps.style = flatStyle;
-  }
-  if (lineClamp != null) {
-    nativeProps.numberOfLines = lineClamp;
-  }
-  return nativeProps;
-}
-const __customProperties = exports.__customProperties = {};
-let count = 1;
-const defineVars = tokens => {
-  const result = {};
-  for (const key in tokens) {
-    const value = tokens[key];
-    result[key] = `var(--${key}-${count++})`;
-    __customProperties[result[key]] = value;
-  }
-  return result;
-};
-exports.defineVars = defineVars;
-const createTheme = (baseTokens, overrides) => {
-  const result = {};
-  for (const key in baseTokens) {
-    const varName = baseTokens[key];
-    result[varName] = overrides[key];
-  }
-  return result;
-};
-exports.createTheme = createTheme;
-const stylex = exports.stylex = {
-  create,
-  firstThatWorks,
-  keyframes,
-  props,
-  defineVars,
-  createTheme,
-  __customProperties
-};
-var _default = exports.default = stylex;

package/lib/native/stylex.js.flow

@@ -1,60 +0,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.
- *
- * @flow strict
- */
-
-import { type SpreadOptions } from './SpreadOptions';
-import type { StyleX$CreateTheme, StyleX$DefineVars } from '../StyleXTypes';
-
-/**
- * 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).
- */
-declare export function create<S: { [string]: { ... } }>(styles: S): {
-  [string]: { ... },
-};
-
-declare export const firstThatWorks: <T: string | number>(
-  ...values: $ReadOnlyArray<T>
-) => T;
-
-type Keyframes = {
-  +[key: string]: { +[k: string]: string | number },
-};
-
-declare export function keyframes(k: Keyframes): Keyframes;
-
-/**
- * The spread method shim
- */
-
-declare export function props(
-  this: SpreadOptions,
-  ...style: $ReadOnlyArray<?{ [key: string]: mixed }>
-): { [string]: { ... } };
-
-declare export const __customProperties: { [string]: mixed };
-
-declare export const defineVars: StyleX$DefineVars;
-
-declare export const createTheme: $FlowFixMe;
-
-export type IStyleX = $ReadOnly<{
-  create: typeof create,
-  firstThatWorks: typeof firstThatWorks,
-  keyframes: typeof keyframes,
-  props: typeof props,
-  defineVars: StyleX$DefineVars,
-  createTheme: StyleX$CreateTheme,
-  __customProperties?: { [string]: mixed },
-}>;
-
-declare export const stylex: IStyleX;
-
-declare export default IStyleX;