@tamagui/react-native-web-internals 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/StyleSheet/compiler/index.mjs

@@ -2,25 +2,26 @@ import { simpleHash } from "@tamagui/simple-hash";
 import { createReactDOMStyle } from "./createReactDOMStyle.mjs";
 import { hyphenateStyleName } from "./hyphenateStyleName.mjs";
 import { normalizeValueWithProperty } from "./normalizeValueWithProperty.mjs";
-const cache = /* @__PURE__ */new Map();
+
+const cache = /* @__PURE__ */ new Map();
 const emptyObject = {};
 const classicGroup = 1;
 const atomicGroup = 2.2;
 const customGroup = {
-  borderColor: 2,
-  borderRadius: 2,
-  borderStyle: 2,
-  borderWidth: 2,
-  display: 2,
-  flex: 2,
-  margin: 2,
-  overflow: 2,
-  overscrollBehavior: 2,
-  padding: 2,
-  marginHorizontal: 2.1,
-  marginVertical: 2.1,
-  paddingHorizontal: 2.1,
-  paddingVertical: 2.1
+	borderColor: 2,
+	borderRadius: 2,
+	borderStyle: 2,
+	borderWidth: 2,
+	display: 2,
+	flex: 2,
+	margin: 2,
+	overflow: 2,
+	overscrollBehavior: 2,
+	padding: 2,
+	marginHorizontal: 2.1,
+	marginVertical: 2.1,
+	paddingHorizontal: 2.1,
+	paddingVertical: 2.1
 };
 const borderTopLeftRadius = "borderTopLeftRadius";
 const borderTopRightRadius = "borderTopRightRadius";
@@ -39,313 +40,289 @@ const paddingLeft = "paddingLeft";
 const paddingRight = "paddingRight";
 const left = "left";
 const PROPERTIES_FLIP = {
-  [borderTopLeftRadius]: borderTopRightRadius,
-  [borderTopRightRadius]: borderTopLeftRadius,
-  [borderBottomLeftRadius]: borderBottomRightRadius,
-  [borderBottomRightRadius]: borderBottomLeftRadius,
-  [borderLeftColor]: borderRightColor,
-  [borderLeftStyle]: borderRightStyle,
-  [borderLeftWidth]: borderRightWidth,
-  [borderRightColor]: borderLeftColor,
-  [borderRightStyle]: borderLeftStyle,
-  [borderRightWidth]: borderLeftWidth,
-  [left]: right,
-  [marginLeft]: marginRight,
-  [marginRight]: marginLeft,
-  [paddingLeft]: paddingRight,
-  [paddingRight]: paddingLeft,
-  [right]: left
+	[borderTopLeftRadius]: borderTopRightRadius,
+	[borderTopRightRadius]: borderTopLeftRadius,
+	[borderBottomLeftRadius]: borderBottomRightRadius,
+	[borderBottomRightRadius]: borderBottomLeftRadius,
+	[borderLeftColor]: borderRightColor,
+	[borderLeftStyle]: borderRightStyle,
+	[borderLeftWidth]: borderRightWidth,
+	[borderRightColor]: borderLeftColor,
+	[borderRightStyle]: borderLeftStyle,
+	[borderRightWidth]: borderLeftWidth,
+	[left]: right,
+	[marginLeft]: marginRight,
+	[marginRight]: marginLeft,
+	[paddingLeft]: paddingRight,
+	[paddingRight]: paddingLeft,
+	[right]: left
 };
 const PROPERTIES_I18N = {
-  borderTopStartRadius: borderTopLeftRadius,
-  borderTopEndRadius: borderTopRightRadius,
-  borderBottomStartRadius: borderBottomLeftRadius,
-  borderBottomEndRadius: borderBottomRightRadius,
-  borderStartColor: borderLeftColor,
-  borderStartStyle: borderLeftStyle,
-  borderStartWidth: borderLeftWidth,
-  borderEndColor: borderRightColor,
-  borderEndStyle: borderRightStyle,
-  borderEndWidth: borderRightWidth,
-  end: right,
-  marginStart: marginLeft,
-  marginEnd: marginRight,
-  paddingStart: paddingLeft,
-  paddingEnd: paddingRight,
-  start: left
+	borderTopStartRadius: borderTopLeftRadius,
+	borderTopEndRadius: borderTopRightRadius,
+	borderBottomStartRadius: borderBottomLeftRadius,
+	borderBottomEndRadius: borderBottomRightRadius,
+	borderStartColor: borderLeftColor,
+	borderStartStyle: borderLeftStyle,
+	borderStartWidth: borderLeftWidth,
+	borderEndColor: borderRightColor,
+	borderEndStyle: borderRightStyle,
+	borderEndWidth: borderRightWidth,
+	end: right,
+	marginStart: marginLeft,
+	marginEnd: marginRight,
+	paddingStart: paddingLeft,
+	paddingEnd: paddingRight,
+	start: left
 };
-const PROPERTIES_VALUE = ["clear", "float", "textAlign"];
+const PROPERTIES_VALUE = [
+	"clear",
+	"float",
+	"textAlign"
+];
 function atomic(style) {
-  const compiledStyle = {
-    $$css: true
-  };
-  const compiledRules = [];
-  function atomicCompile(prop, value) {
-    const valueString = stringifyValueWithProperty(value, prop);
-    const cacheKey = prop + valueString;
-    const cachedResult = cache.get(cacheKey);
-    let identifier;
-    if (cachedResult != null) {
-      identifier = cachedResult[0];
-      compiledRules.push(cachedResult[1]);
-    } else {
-      identifier = createIdentifier("r", prop, value);
-      const order = customGroup[prop] || atomicGroup;
-      const rules = createAtomicRules(identifier, prop, value);
-      const orderedRules = [rules, order];
-      compiledRules.push(orderedRules);
-      cache.set(cacheKey, [identifier, orderedRules]);
-    }
-    return identifier;
-  }
-  Object.keys(style).sort().forEach(prop => {
-    const value = style[prop];
-    if (value != null) {
-      let localizeableValue;
-      if (PROPERTIES_VALUE.indexOf(prop) > -1) {
-        const left2 = atomicCompile(prop, "left");
-        const right2 = atomicCompile(prop, "right");
-        if (value === "start") {
-          localizeableValue = [left2, right2];
-        } else if (value === "end") {
-          localizeableValue = [right2, left2];
-        }
-      }
-      const propPolyfill = PROPERTIES_I18N[prop];
-      if (propPolyfill != null) {
-        const ltr = atomicCompile(propPolyfill, value);
-        const rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
-        localizeableValue = [ltr, rtl];
-      }
-      if (prop === "transitionProperty") {
-        const values = Array.isArray(value) ? value : [value];
-        const polyfillIndices = [];
-        for (let i = 0; i < values.length; i++) {
-          const val = values[i];
-          if (typeof val === "string" && PROPERTIES_I18N[val] != null) {
-            polyfillIndices.push(i);
-          }
-        }
-        if (polyfillIndices.length > 0) {
-          const ltrPolyfillValues = [...values];
-          const rtlPolyfillValues = [...values];
-          polyfillIndices.forEach(i => {
-            const ltrVal = ltrPolyfillValues[i];
-            if (typeof ltrVal === "string") {
-              const ltrPolyfill = PROPERTIES_I18N[ltrVal];
-              const rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
-              ltrPolyfillValues[i] = ltrPolyfill;
-              rtlPolyfillValues[i] = rtlPolyfill;
-              const ltr = atomicCompile(prop, ltrPolyfillValues);
-              const rtl = atomicCompile(prop, rtlPolyfillValues);
-              localizeableValue = [ltr, rtl];
-            }
-          });
-        }
-      }
-      if (localizeableValue == null) {
-        localizeableValue = atomicCompile(prop, value);
-      } else {
-        compiledStyle["$$css$localize"] = true;
-      }
-      compiledStyle[prop] = localizeableValue;
-    }
-  });
-  return [compiledStyle, compiledRules];
+	const compiledStyle = { $$css: true };
+	const compiledRules = [];
+	function atomicCompile(prop, value) {
+		const valueString = stringifyValueWithProperty(value, prop);
+		const cacheKey = prop + valueString;
+		const cachedResult = cache.get(cacheKey);
+		let identifier;
+		if (cachedResult != null) {
+			identifier = cachedResult[0];
+			compiledRules.push(cachedResult[1]);
+		} else {
+			identifier = createIdentifier("r", prop, value);
+			const order = customGroup[prop] || atomicGroup;
+			const rules = createAtomicRules(identifier, prop, value);
+			const orderedRules = [rules, order];
+			compiledRules.push(orderedRules);
+			cache.set(cacheKey, [identifier, orderedRules]);
+		}
+		return identifier;
+	}
+	Object.keys(style).sort().forEach((prop) => {
+		const value = style[prop];
+		if (value != null) {
+			let localizeableValue;
+			if (PROPERTIES_VALUE.indexOf(prop) > -1) {
+				const left2 = atomicCompile(prop, "left");
+				const right2 = atomicCompile(prop, "right");
+				if (value === "start") {
+					localizeableValue = [left2, right2];
+				} else if (value === "end") {
+					localizeableValue = [right2, left2];
+				}
+			}
+			const propPolyfill = PROPERTIES_I18N[prop];
+			if (propPolyfill != null) {
+				const ltr = atomicCompile(propPolyfill, value);
+				const rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
+				localizeableValue = [ltr, rtl];
+			}
+			if (prop === "transitionProperty") {
+				const values = Array.isArray(value) ? value : [value];
+				const polyfillIndices = [];
+				for (let i = 0; i < values.length; i++) {
+					const val = values[i];
+					if (typeof val === "string" && PROPERTIES_I18N[val] != null) {
+						polyfillIndices.push(i);
+					}
+				}
+				if (polyfillIndices.length > 0) {
+					const ltrPolyfillValues = [...values];
+					const rtlPolyfillValues = [...values];
+					polyfillIndices.forEach((i) => {
+						const ltrVal = ltrPolyfillValues[i];
+						if (typeof ltrVal === "string") {
+							const ltrPolyfill = PROPERTIES_I18N[ltrVal];
+							const rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
+							ltrPolyfillValues[i] = ltrPolyfill;
+							rtlPolyfillValues[i] = rtlPolyfill;
+							const ltr = atomicCompile(prop, ltrPolyfillValues);
+							const rtl = atomicCompile(prop, rtlPolyfillValues);
+							localizeableValue = [ltr, rtl];
+						}
+					});
+				}
+			}
+			if (localizeableValue == null) {
+				localizeableValue = atomicCompile(prop, value);
+			} else {
+				compiledStyle["$$css$localize"] = true;
+			}
+			compiledStyle[prop] = localizeableValue;
+		}
+	});
+	return [compiledStyle, compiledRules];
 }
 function classic(style, name) {
-  const compiledStyle = {
-    $$css: true
-  };
-  const compiledRules = [];
-  const {
-    animationKeyframes,
-    ...rest
-  } = style;
-  const identifier = createIdentifier("css", name, style);
-  const selector = `.${identifier}`;
-  let animationName;
-  if (animationKeyframes != null) {
-    const [animationNames, keyframesRules] = processKeyframesValue(animationKeyframes);
-    animationName = animationNames.join(",");
-    compiledRules.push(...keyframesRules);
-  }
-  const block = createDeclarationBlock({
-    ...rest,
-    animationName
-  });
-  compiledRules.push(`${selector}${block}`);
-  compiledStyle[identifier] = identifier;
-  return [compiledStyle, [[compiledRules, classicGroup]]];
+	const compiledStyle = { $$css: true };
+	const compiledRules = [];
+	const { animationKeyframes, ...rest } = style;
+	const identifier = createIdentifier("css", name, style);
+	const selector = `.${identifier}`;
+	let animationName;
+	if (animationKeyframes != null) {
+		const [animationNames, keyframesRules] = processKeyframesValue(animationKeyframes);
+		animationName = animationNames.join(",");
+		compiledRules.push(...keyframesRules);
+	}
+	const block = createDeclarationBlock({
+		...rest,
+		animationName
+	});
+	compiledRules.push(`${selector}${block}`);
+	compiledStyle[identifier] = identifier;
+	return [compiledStyle, [[compiledRules, classicGroup]]];
 }
 function inline(originalStyle, isRTL) {
-  const style = originalStyle || emptyObject;
-  const frozenProps = {};
-  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;
-    }
-    if (PROPERTIES_VALUE.indexOf(originalProp) > -1) {
-      if (originalValue === "start") {
-        value = isRTL ? "right" : "left";
-      } else if (originalValue === "end") {
-        value = isRTL ? "left" : "right";
-      }
-    }
-    const propPolyfill = PROPERTIES_I18N[originalProp];
-    if (propPolyfill != null) {
-      prop = isRTL ? PROPERTIES_FLIP[propPolyfill] : propPolyfill;
-    }
-    if (originalProp === "transitionProperty") {
-      const originalValues = Array.isArray(originalValue) ? originalValue : [originalValue];
-      originalValues.forEach((val, i) => {
-        if (typeof val === "string") {
-          const valuePolyfill = PROPERTIES_I18N[val];
-          if (valuePolyfill != null) {
-            originalValues[i] = isRTL ? PROPERTIES_FLIP[valuePolyfill] : valuePolyfill;
-          }
-        }
-      });
-    }
-    if (!frozenProps[prop]) {
-      nextStyle[prop] = value;
-    }
-    if (PROPERTIES_I18N.hasOwnProperty(originalProp)) {
-      frozenProps[prop] = true;
-    }
-  }
-  return createReactDOMStyle(nextStyle, true);
+	const style = originalStyle || emptyObject;
+	const frozenProps = {};
+	const nextStyle = {};
+	for (const originalProp in style) {
+		const originalValue = style[originalProp];
+		let prop = originalProp;
+		let value = originalValue;
+		if (originalValue == null) {
+			continue;
+		}
+		if (PROPERTIES_VALUE.indexOf(originalProp) > -1) {
+			if (originalValue === "start") {
+				value = isRTL ? "right" : "left";
+			} else if (originalValue === "end") {
+				value = isRTL ? "left" : "right";
+			}
+		}
+		const propPolyfill = PROPERTIES_I18N[originalProp];
+		if (propPolyfill != null) {
+			prop = isRTL ? PROPERTIES_FLIP[propPolyfill] : propPolyfill;
+		}
+		if (originalProp === "transitionProperty") {
+			const originalValues = Array.isArray(originalValue) ? originalValue : [originalValue];
+			originalValues.forEach((val, i) => {
+				if (typeof val === "string") {
+					const valuePolyfill = PROPERTIES_I18N[val];
+					if (valuePolyfill != null) {
+						originalValues[i] = isRTL ? PROPERTIES_FLIP[valuePolyfill] : valuePolyfill;
+					}
+				}
+			});
+		}
+		if (!frozenProps[prop]) {
+			nextStyle[prop] = value;
+		}
+		if (originalProp in PROPERTIES_I18N) {
+			frozenProps[prop] = true;
+		}
+	}
+	return createReactDOMStyle(nextStyle, true);
 }
 function stringifyValueWithProperty(value, property) {
-  const normalizedValue = normalizeValueWithProperty(value, property);
-  return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
+	const normalizedValue = normalizeValueWithProperty(value, property);
+	return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
 }
 function createAtomicRules(identifier, property, value) {
-  const rules = [];
-  const selector = `.${identifier}`;
-  switch (property) {
-    case "animationKeyframes":
-      {
-        const [animationNames, keyframesRules] = processKeyframesValue(value);
-        const block = createDeclarationBlock({
-          animationName: animationNames.join(",")
-        });
-        rules.push(`${selector}${block}`, ...keyframesRules);
-        break;
-      }
-    // Equivalent to using '::placeholder'
-    case "placeholderTextColor":
-      {
-        const block = createDeclarationBlock({
-          color: value,
-          opacity: 1
-        });
-        rules.push(`${selector}::-webkit-input-placeholder${block}`, `${selector}::-moz-placeholder${block}`, `${selector}:-ms-input-placeholder${block}`, `${selector}::placeholder${block}`);
-        break;
-      }
-    // Polyfill for additional 'pointer-events' values
-    // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
-    case "pointerEvents":
-      {
-        let finalValue = value;
-        if (value === "auto" || value === "box-only") {
-          finalValue = "auto!important";
-          if (value === "box-only") {
-            const block2 = createDeclarationBlock({
-              pointerEvents: "none"
-            });
-            rules.push(`${selector}>*${block2}`);
-          }
-        } else if (value === "none" || value === "box-none") {
-          finalValue = "none!important";
-          if (value === "box-none") {
-            const block2 = createDeclarationBlock({
-              pointerEvents: "auto"
-            });
-            rules.push(`${selector}>*${block2}`);
-          }
-        }
-        const block = createDeclarationBlock({
-          pointerEvents: finalValue
-        });
-        rules.push(`${selector}${block}`);
-        break;
-      }
-    // Polyfill for draft spec
-    // https://drafts.csswg.org/css-scrollbars-1/
-    case "scrollbarWidth":
-      {
-        if (value === "none") {
-          rules.push(`${selector}::-webkit-scrollbar{display:none}`);
-        }
-        const block = createDeclarationBlock({
-          scrollbarWidth: value
-        });
-        rules.push(`${selector}${block}`);
-        break;
-      }
-    default:
-      {
-        const block = createDeclarationBlock({
-          [property]: value
-        });
-        rules.push(`${selector}${block}`);
-        break;
-      }
-  }
-  return rules;
+	const rules = [];
+	const selector = `.${identifier}`;
+	switch (property) {
+		case "animationKeyframes": {
+			const [animationNames, keyframesRules] = processKeyframesValue(value);
+			const block = createDeclarationBlock({ animationName: animationNames.join(",") });
+			rules.push(`${selector}${block}`, ...keyframesRules);
+			break;
+		}
+		case "placeholderTextColor": {
+			const block = createDeclarationBlock({
+				color: value,
+				opacity: 1
+			});
+			rules.push(`${selector}::-webkit-input-placeholder${block}`, `${selector}::-moz-placeholder${block}`, `${selector}:-ms-input-placeholder${block}`, `${selector}::placeholder${block}`);
+			break;
+		}
+		case "pointerEvents": {
+			let finalValue = value;
+			if (value === "auto" || value === "box-only") {
+				finalValue = "auto!important";
+				if (value === "box-only") {
+					const block2 = createDeclarationBlock({ pointerEvents: "none" });
+					rules.push(`${selector}>*${block2}`);
+				}
+			} else if (value === "none" || value === "box-none") {
+				finalValue = "none!important";
+				if (value === "box-none") {
+					const block2 = createDeclarationBlock({ pointerEvents: "auto" });
+					rules.push(`${selector}>*${block2}`);
+				}
+			}
+			const block = createDeclarationBlock({ pointerEvents: finalValue });
+			rules.push(`${selector}${block}`);
+			break;
+		}
+		case "scrollbarWidth": {
+			if (value === "none") {
+				rules.push(`${selector}::-webkit-scrollbar{display:none}`);
+			}
+			const block = createDeclarationBlock({ scrollbarWidth: value });
+			rules.push(`${selector}${block}`);
+			break;
+		}
+		default: {
+			const block = createDeclarationBlock({ [property]: value });
+			rules.push(`${selector}${block}`);
+			break;
+		}
+	}
+	return rules;
 }
 function createDeclarationBlock(style) {
-  const domStyle = createReactDOMStyle(style);
-  const declarationsString = Object.keys(domStyle).map(property => {
-    const value = domStyle[property];
-    const prop = hyphenateStyleName(property);
-    if (Array.isArray(value)) {
-      return value.map(v => `${prop}:${v}`).join(";");
-    } else {
-      return `${prop}:${value}`;
-    }
-  }).sort().join(";");
-  return `{${declarationsString};}`;
+	const domStyle = createReactDOMStyle(style);
+	const declarationsString = Object.keys(domStyle).map((property) => {
+		const value = domStyle[property];
+		const prop = hyphenateStyleName(property);
+		if (Array.isArray(value)) {
+			return value.map((v) => `${prop}:${v}`).join(";");
+		} else {
+			return `${prop}:${value}`;
+		}
+	}).sort().join(";");
+	return `{${declarationsString};}`;
 }
 function createIdentifier(prefix, name, value) {
-  const hashedString = simpleHash(name + stringifyValueWithProperty(value, name));
-  return process.env.NODE_ENV !== "production" ? `${prefix}-${name}-${hashedString}` : `${prefix}-${hashedString}`;
+	const hashedString = simpleHash(name + stringifyValueWithProperty(value, name));
+	return process.env.NODE_ENV !== "production" ? `${prefix}-${name}-${hashedString}` : `${prefix}-${hashedString}`;
 }
 function createKeyframes(keyframes) {
-  const prefixes = ["-webkit-", ""];
-  const identifier = createIdentifier("r", "animation", keyframes);
-  const steps = "{" + Object.keys(keyframes).map(stepName => {
-    const rule = keyframes[stepName];
-    const block = createDeclarationBlock(rule);
-    return `${stepName}${block}`;
-  }).join("") + "}";
-  const rules = prefixes.map(prefix => {
-    return `@${prefix}keyframes ${identifier}${steps}`;
-  });
-  return [identifier, rules];
+	const prefixes = ["-webkit-", ""];
+	const identifier = createIdentifier("r", "animation", keyframes);
+	const steps = "{" + Object.keys(keyframes).map((stepName) => {
+		const rule = keyframes[stepName];
+		const block = createDeclarationBlock(rule);
+		return `${stepName}${block}`;
+	}).join("") + "}";
+	const rules = prefixes.map((prefix) => {
+		return `@${prefix}keyframes ${identifier}${steps}`;
+	});
+	return [identifier, rules];
 }
 function processKeyframesValue(keyframesValue) {
-  if (typeof keyframesValue === "number") {
-    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
-  }
-  const animationNames = [];
-  const rules = [];
-  const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
-  value.forEach(keyframes => {
-    if (typeof keyframes === "string") {
-      animationNames.push(keyframes);
-    } else {
-      const [identifier, keyframesRules] = createKeyframes(keyframes);
-      animationNames.push(identifier);
-      rules.push(...keyframesRules);
-    }
-  });
-  return [animationNames, rules];
+	if (typeof keyframesValue === "number") {
+		throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
+	}
+	const animationNames = [];
+	const rules = [];
+	const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
+	value.forEach((keyframes) => {
+		if (typeof keyframes === "string") {
+			animationNames.push(keyframes);
+		} else {
+			const [identifier, keyframesRules] = createKeyframes(keyframes);
+			animationNames.push(identifier);
+			rules.push(...keyframesRules);
+		}
+	});
+	return [animationNames, rules];
 }
+
 export { atomic, classic, inline, stringifyValueWithProperty };
 //# sourceMappingURL=index.mjs.map