@tamagui/react-native-web-internals 1.112.2

package/src/StyleSheet/dom/createOrderedCSSStyleSheet.tsx

@@ -0,0 +1,195 @@
+// @ts-nocheck
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+type Groups = {
+  [K in number]: {
+    start: number | null
+    rules: Array<string>
+  }
+}
+
+type Selectors = {
+  [K in string]: boolean
+}
+
+export type OrderedCSSStyleSheet = {
+  getTextContent: () => string
+  insert: (cssText: string, groupValue: number) => void
+}
+
+const slice = Array.prototype.slice
+
+/**
+ * Order-based insertion of CSS.
+ *
+ * Each rule is associated with a numerically defined group.
+ * Groups are ordered within the style sheet according to their number, with the
+ * lowest first.
+ *
+ * Groups are implemented using marker rules. The selector of the first rule of
+ * each group is used only to encode the group number for hydration. An
+ * alternative implementation could rely on CSSMediaRule, allowing groups to be
+ * treated as a sub-sheet, but the Edge implementation of CSSMediaRule is
+ * broken.
+ * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+ * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
+ */
+export default function createOrderedCSSStyleSheet(
+  sheet: CSSStyleSheet | null
+): OrderedCSSStyleSheet {
+  const groups: Groups = {}
+  const selectors: Selectors = {}
+
+  /**
+   * Hydrate approximate record from any existing rules in the sheet.
+   */
+  if (sheet != null) {
+    let group
+    slice.call(sheet.cssRules).forEach((cssRule, i) => {
+      const cssText = cssRule.cssText
+      // Create record of existing selectors and rules
+      if (cssText.indexOf('stylesheet-group') > -1) {
+        group = decodeGroupRule(cssRule)
+        groups[group] = { start: i, rules: [cssText] }
+      } else {
+        const selectorText = getSelectorText(cssText)
+        if (selectorText != null) {
+          selectors[selectorText] = true
+          groups[group].rules.push(cssText)
+        }
+      }
+    })
+  }
+
+  function sheetInsert(sheet, group, text) {
+    const orderedGroups = getOrderedGroups(groups)
+    const groupIndex = orderedGroups.indexOf(group)
+    const nextGroupIndex = groupIndex + 1
+    const nextGroup = orderedGroups[nextGroupIndex]
+    // Insert rule before the next group, or at the end of the stylesheet
+    const position =
+      nextGroup != null && groups[nextGroup].start != null
+        ? groups[nextGroup].start
+        : sheet.cssRules.length
+    const isInserted = insertRuleAt(sheet, text, position)
+
+    if (isInserted) {
+      // Set the starting index of the new group
+      if (groups[group].start == null) {
+        groups[group].start = position
+      }
+      // Increment the starting index of all subsequent groups
+      for (let i = nextGroupIndex; i < orderedGroups.length; i += 1) {
+        const groupNumber = orderedGroups[i]
+        const previousStart = groups[groupNumber].start || 0
+        groups[groupNumber].start = previousStart + 1
+      }
+    }
+
+    return isInserted
+  }
+
+  const OrderedCSSStyleSheet = {
+    /**
+     * The textContent of the style sheet.
+     */
+    getTextContent(): string {
+      return getOrderedGroups(groups)
+        .map((group) => {
+          const rules = groups[group].rules
+          // Sorting provides deterministic order of styles in group for
+          // build-time extraction of the style sheet.
+          const marker = rules.shift()
+          rules.sort()
+          rules.unshift(marker)
+          return rules.join('\n')
+        })
+        .join('\n')
+    },
+
+    /**
+     * Insert a rule into the style sheet
+     */
+    insert(cssText: string, groupValue: number) {
+      const group = Number(groupValue)
+
+      // Create a new group.
+      if (groups[group] == null) {
+        const markerRule = encodeGroupRule(group)
+        // Create the internal record.
+        groups[group] = { start: null, rules: [markerRule] }
+        // Update CSSOM.
+        if (sheet != null) {
+          sheetInsert(sheet, group, markerRule)
+        }
+      }
+
+      // selectorText is more reliable than cssText for insertion checks. The
+      // browser excludes vendor-prefixed properties and rewrites certain values
+      // making cssText more likely to be different from what was inserted.
+      const selectorText = getSelectorText(cssText)
+      if (selectorText != null && selectors[selectorText] == null) {
+        // Update the internal records.
+        selectors[selectorText] = true
+        groups[group].rules.push(cssText)
+        // Update CSSOM.
+        if (sheet != null) {
+          const isInserted = sheetInsert(sheet, group, cssText)
+          if (!isInserted) {
+            // Revert internal record change if a rule was rejected (e.g.,
+            // unrecognized pseudo-selector)
+            groups[group].rules.pop()
+          }
+        }
+      }
+    },
+  }
+
+  return OrderedCSSStyleSheet
+}
+
+/**
+ * Helper functions
+ */
+
+function encodeGroupRule(group) {
+  return `[stylesheet-group="${group}"]{}`
+}
+
+const groupPattern = /["']/g
+function decodeGroupRule(cssRule) {
+  return Number(cssRule.selectorText.split(groupPattern)[1])
+}
+
+function getOrderedGroups(obj: {
+  [K in number]: any
+}) {
+  return Object.keys(obj)
+    .map(Number)
+    .sort((a, b) => (a > b ? 1 : -1))
+}
+
+const selectorPattern = /\s*([,])\s*/g
+function getSelectorText(cssText) {
+  const selector = cssText.split('{')[0].trim()
+  return selector !== '' ? selector.replace(selectorPattern, '$1') : null
+}
+
+function insertRuleAt(root, cssText: string, position: number): boolean {
+  try {
+    // @ts-ignore : Flow is missing CSSOM types needed to type 'root'.
+    root.insertRule(cssText, position)
+    return true
+  } catch (e) {
+    // JSDOM doesn't support `CSSSMediaRule#insertRule`.
+    // Also ignore errors that occur from attempting to insert vendor-prefixed selectors.
+    return false
+  }
+}

package/src/StyleSheet/dom/index.tsx

@@ -0,0 +1,92 @@
+// @ts-nocheck
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import canUseDOM from '../../modules/canUseDOM'
+import createCSSStyleSheet from './createCSSStyleSheet'
+import type { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet'
+import createOrderedCSSStyleSheet from './createOrderedCSSStyleSheet'
+
+type Sheet = {
+  id: string
+} & OrderedCSSStyleSheet
+
+const defaultId = 'react-native-stylesheet'
+const roots = new WeakMap<Node, number>()
+const sheets = []
+
+const initialRules = [
+  // minimal top-level reset
+  'html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}',
+  'body{margin:0;}',
+  // minimal form pseudo-element reset
+  'button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}',
+  'input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}',
+]
+
+export function createSheet(root?: HTMLElement, id = defaultId): Sheet {
+  let sheet
+
+  function createSheet() {
+    if (sheet) return
+
+    if (canUseDOM) {
+      const rootNode: Node = root != null ? root.getRootNode() : document
+      // Create the initial style sheet
+      if (sheets.length === 0) {
+        sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id))
+        initialRules.forEach((rule) => {
+          sheet.insert(rule, 0)
+        })
+        roots.set(rootNode, sheets.length)
+        sheets.push(sheet)
+      } else {
+        const index = roots.get(rootNode)
+        if (index == null) {
+          const initialSheet = sheets[0]
+          // If we're creating a new sheet, populate it with existing styles
+          const textContent = initialSheet != null ? initialSheet.getTextContent() : ''
+          // Cast rootNode to 'any' because Flow types for getRootNode are wrong
+          sheet = createOrderedCSSStyleSheet(
+            createCSSStyleSheet(id, rootNode as any, textContent)
+          )
+          roots.set(rootNode, sheets.length)
+          sheets.push(sheet)
+        } else {
+          sheet = sheets[index]
+        }
+      }
+    } else {
+      // Create the initial style sheet
+      if (sheets.length === 0) {
+        sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(id))
+        initialRules.forEach((rule) => {
+          sheet.insert(rule, 0)
+        })
+        sheets.push(sheet)
+      } else {
+        sheet = sheets[0]
+      }
+    }
+  }
+
+  return {
+    getTextContent() {
+      createSheet()
+      return sheet.getTextContent()
+    },
+    id,
+    insert(cssText: string, groupValue: number) {
+      createSheet()
+      sheets.forEach((s) => {
+        s.insert(cssText, groupValue)
+      })
+    },
+  }
+}

package/src/StyleSheet/index.tsx

@@ -0,0 +1,183 @@
+// @ts-nocheck
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import { styleq } from 'styleq'
+import { localizeStyle } from 'styleq/transform-localize-style.js'
+
+import { canUseDOM } from '../index'
+import { atomic, classic, inline } from './compiler/index'
+import { createSheet } from './dom/index'
+import { preprocess } from './preprocess'
+import { validate } from './validate'
+
+const staticStyleMap: WeakMap<Object, Object> = new WeakMap()
+const sheet = createSheet()
+
+function customStyleq(styles, isRTL) {
+  return styleq.factory({
+    transform(style) {
+      const compiledStyle = staticStyleMap.get(style)
+      if (compiledStyle != null) {
+        return localizeStyle(compiledStyle, isRTL)
+      }
+      return style
+    },
+  })(styles)
+}
+
+function insertRules(compiledOrderedRules) {
+  compiledOrderedRules.forEach(([rules, order]) => {
+    if (sheet != null) {
+      rules.forEach((rule) => {
+        sheet.insert(rule, order)
+      })
+    }
+  })
+}
+
+function compileAndInsertAtomic(style) {
+  const [compiledStyle, compiledOrderedRules] = atomic(preprocess(style))
+  insertRules(compiledOrderedRules)
+  return compiledStyle
+}
+
+function compileAndInsertReset(style, key) {
+  const [compiledStyle, compiledOrderedRules] = classic(style, key)
+  insertRules(compiledOrderedRules)
+  return compiledStyle
+}
+
+/* ----- API ----- */
+
+const absoluteFillObject = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+}
+
+const absoluteFill = absoluteFillObject as any
+
+/**
+ * create
+ */
+function create(styles) {
+  Object.keys(styles).forEach((key) => {
+    const styleObj = styles[key]
+    // Only compile at runtime if the style is not already compiled
+    if (styleObj != null && styleObj.$$css !== true) {
+      let compiledStyles
+      if (key.indexOf('$raw') > -1) {
+        compiledStyles = compileAndInsertReset(styleObj, key.split('$raw')[0])
+      } else {
+        if (process.env.NODE_ENV !== 'production') {
+          validate(styleObj)
+          styles[key] = Object.freeze(styleObj)
+        }
+        compiledStyles = compileAndInsertAtomic(styleObj)
+      }
+      staticStyleMap.set(styleObj, compiledStyles)
+    }
+  })
+  return styles
+}
+
+/**
+ * compose
+ */
+function compose(style1: any, style2: any): any {
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable prefer-rest-params */
+    const len = arguments.length
+    if (len > 2) {
+      const readableStyles = [...arguments].map((a) => flatten(a))
+      throw new Error(
+        `StyleSheet.compose() only accepts 2 arguments, received ${len}: ${JSON.stringify(
+          readableStyles
+        )}`
+      )
+    }
+    /* eslint-enable prefer-rest-params */
+  }
+  if (style1 && style2) {
+    return [style1, style2]
+  } else {
+    return style1 || style2
+  }
+}
+
+/**
+ * flatten
+ */
+export function flatten(...styles: any): { [key: string]: any } {
+  const flatArray = styles.flat(Infinity)
+  const result = {}
+  for (let i = 0; i < flatArray.length; i++) {
+    const style = flatArray[i]
+    if (style != null && typeof style === 'object') {
+      // @ts-ignore
+      Object.assign(result, style)
+    }
+  }
+  return result
+}
+
+/**
+ * getSheet
+ */
+function getSheet(): { id: string; textContent: string } {
+  return {
+    id: sheet.id,
+    textContent: sheet.getTextContent(),
+  }
+}
+
+/**
+ * resolve
+ */
+type StyleProps = [string, { [key: string]: any } | null]
+type Options = { writingDirection: 'ltr' | 'rtl' }
+
+export default function StyleSheet(styles: any, options?: Options): StyleProps {
+  const isRTL = options != null && options.writingDirection === 'rtl'
+  const styleProps: StyleProps = customStyleq(styles, isRTL)
+  if (Array.isArray(styleProps) && styleProps[1] != null) {
+    styleProps[1] = inline(preprocess(styleProps[1]), isRTL)
+  }
+  return styleProps
+}
+
+StyleSheet.absoluteFill = absoluteFill
+StyleSheet.absoluteFillObject = absoluteFillObject
+StyleSheet.create = create
+StyleSheet.compose = compose
+StyleSheet.flatten = flatten
+StyleSheet.getSheet = getSheet
+// `hairlineWidth` is not implemented using screen density as browsers may
+// round sub-pixel values down to `0`, causing the line not to be rendered.
+StyleSheet.hairlineWidth = 1
+
+export type IStyleSheet = {
+  (styles: any, options?: Options): StyleProps
+  absoluteFill: Object
+  absoluteFillObject: Object
+  create: typeof create
+  compose: typeof compose
+  flatten: typeof flatten
+  getSheet: typeof getSheet
+  hairlineWidth: number
+}
+
+setTimeout(() => {
+  if (canUseDOM && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.resolveRNStyle = StyleSheet.flatten
+  }
+}, 100)

package/src/StyleSheet/preprocess.tsx

@@ -0,0 +1,119 @@
+// @ts-nocheck
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import normalizeColor from './compiler/normalizeColor'
+import normalizeValueWithProperty from './compiler/normalizeValueWithProperty'
+
+const emptyObject = {}
+
+/**
+ * Shadows
+ */
+
+const defaultOffset = { height: 0, width: 0 }
+
+export const createBoxShadowValue = (style: Object): void | string => {
+  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style
+  const { height, width } = shadowOffset || defaultOffset
+  const offsetX = normalizeValueWithProperty(width)
+  const offsetY = normalizeValueWithProperty(height)
+  const blurRadius = normalizeValueWithProperty(shadowRadius || 0)
+  const color = normalizeColor(shadowColor || 'black', shadowOpacity)
+  if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`
+  }
+}
+
+export const createTextShadowValue = (style: Object): void | string => {
+  const { textShadowColor, textShadowOffset, textShadowRadius } = style
+  const { height, width } = textShadowOffset || defaultOffset
+  const radius = textShadowRadius || 0
+  const offsetX = normalizeValueWithProperty(width)
+  const offsetY = normalizeValueWithProperty(height)
+  const blurRadius = normalizeValueWithProperty(radius)
+  const color = normalizeValueWithProperty(textShadowColor, 'textShadowColor')
+
+  if (
+    color &&
+    (height !== 0 || width !== 0 || radius !== 0) &&
+    offsetX != null &&
+    offsetY != null &&
+    blurRadius != null
+  ) {
+    return `${offsetX} ${offsetY} ${blurRadius} ${color}`
+  }
+}
+
+/**
+ * Preprocess styles
+ */
+export const preprocess = <
+  T extends {
+    [K in string]: any
+  }
+>(
+  originalStyle: T
+): T => {
+  const style = originalStyle || emptyObject
+  const nextStyle = {}
+
+  for (const originalProp in style) {
+    const originalValue = style[originalProp]
+    let prop = originalProp
+    let value = originalValue
+
+    if (
+      !Object.prototype.hasOwnProperty.call(style, originalProp) ||
+      originalValue == null
+    ) {
+      continue
+    }
+
+    // Convert shadow styles
+    if (
+      prop === 'shadowColor' ||
+      prop === 'shadowOffset' ||
+      prop === 'shadowOpacity' ||
+      prop === 'shadowRadius'
+    ) {
+      const boxShadowValue = createBoxShadowValue(style)
+      if (boxShadowValue != null && nextStyle.boxShadow == null) {
+        const { boxShadow } = style
+        prop = 'boxShadow'
+        value = boxShadow ? `${boxShadow}, ${boxShadowValue}` : boxShadowValue
+      } else {
+        continue
+      }
+    }
+
+    // Convert text shadow styles
+    if (
+      prop === 'textShadowColor' ||
+      prop === 'textShadowOffset' ||
+      prop === 'textShadowRadius'
+    ) {
+      const textShadowValue = createTextShadowValue(style)
+      if (textShadowValue != null && nextStyle.textShadow == null) {
+        const { textShadow } = style
+        prop = 'textShadow'
+        value = textShadow ? `${textShadow}, ${textShadowValue}` : textShadowValue
+      } else {
+        continue
+      }
+    }
+
+    nextStyle[prop] = value
+  }
+
+  // $FlowIgnore
+  return nextStyle
+}
+
+export const processStyle = preprocess

package/src/StyleSheet/validate.tsx

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Nicolas Gallagher.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @noflow
+ */
+
+const invalidShortforms = {
+  background: true,
+  borderBottom: true,
+  borderLeft: true,
+  borderRight: true,
+  borderTop: true,
+  font: true,
+  grid: true,
+  outline: true,
+  textDecoration: true,
+}
+
+const invalidMultiValueShortforms = {
+  flex: true,
+  margin: true,
+  padding: true,
+  borderColor: true,
+  borderRadius: true,
+  borderStyle: true,
+  borderWidth: true,
+  marginHorizontal: true,
+  marginVertical: true,
+  paddingHorizontal: true,
+  paddingVertical: true,
+  overflow: true,
+  overscrollBehavior: true,
+  backgroundPosition: true,
+}
+
+function error(message) {
+  console.error(message)
+}
+
+export function validate(obj: Object) {
+  for (const k in obj) {
+    const prop = k.trim()
+    const value = obj[prop]
+    let isInvalid = false
+
+    if (value === null) {
+      continue
+    }
+
+    if (typeof value === 'string' && value.indexOf('!important') > -1) {
+      error(
+        `Invalid style declaration "${prop}:${value}". Values cannot include "!important"`
+      )
+      isInvalid = true
+    } else {
+      let suggestion = ''
+      if (prop === 'animation' || prop === 'animationName') {
+        suggestion = 'Did you mean "animationKeyframes"?'
+        // } else if (prop === 'boxShadow') {
+        //  suggestion = 'Did you mean "shadow{Color,Offset,Opacity,Radius}"?';
+        isInvalid = true
+      } else if (prop === 'direction') {
+        suggestion = 'Did you mean "writingDirection"?'
+        isInvalid = true
+      } else if (prop === 'verticalAlign') {
+        suggestion = 'Did you mean "textAlignVertical"?'
+        isInvalid = true
+      } else if (invalidShortforms[prop]) {
+        suggestion = 'Please use long-form properties.'
+        isInvalid = true
+      } else if (invalidMultiValueShortforms[prop]) {
+        // TODO
+        // if (typeof value === 'string' && valueParser(value).nodes.length > 1) {
+        //   suggestion = `Value is "${value}" but only single values are supported.`
+        //   isInvalid = true
+        // }
+      }
+      if (suggestion !== '') {
+        error(`Invalid style property of "${prop}". ${suggestion}`)
+      }
+    }
+
+    if (isInvalid) {
+      delete obj[k]
+    }
+  }
+}

package/src/TextAncestorContext.tsx

@@ -0,0 +1,14 @@
+/**
+ * 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 { Context } from 'react'
+import { createContext } from 'react'
+
+export const TextAncestorContext = createContext(false)
+export default TextAncestorContext as Context<boolean>

package/src/colorProps.tsx

@@ -0,0 +1,12 @@
+export const colorProps = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+}