@tamagui/core 1.0.1-beta.76 → 1.0.1-beta.79

package/dist/jsx/helpers/generateAtomicStyles.js

@@ -1,410 +0,0 @@
-import { simpleHash } from "@tamagui/helpers";
-import hyphenateStyleName from "hyphenate-style-name";
-import normalizeCSSColor from "normalize-css-color";
-import { getConfig } from "../conf";
-import { isWeb } from "../constants/platform";
-import { reversedShorthands } from "../createTamagui";
-import { pseudos } from "./pseudos";
-const generateAtomicStyles = (style, pseudo) => {
-  const res = expandStyles(style);
-  const out = [];
-  for (const key in res) {
-    const value = res[key];
-    if (value != null) {
-      const valueString = stringifyValueWithProperty(value, key);
-      const hash = simpleHash(key + valueString + ((pseudo == null ? void 0 : pseudo.name) || ""));
-      const cachedResult = cache.get(hash, valueString);
-      if (cachedResult != null) {
-        out.push(cachedResult);
-      } else {
-        const pseudoPrefix = pseudo ? `0${pseudo.name}-` : "";
-        const shortProp = reversedShorthands[key] || key;
-        const identifier = `_${shortProp}-${pseudoPrefix}${hash}`;
-        const rules = createAtomicRules(identifier, key, valueString, pseudo);
-        const styleObject = {
-          property: key,
-          pseudo: pseudo == null ? void 0 : pseudo.name,
-          value,
-          identifier,
-          rules
-        };
-        cache.set(hash, valueString, styleObject);
-        out.push(styleObject);
-      }
-    }
-  }
-  if (style.borderColor === "transparent") {
-    debugger;
-  }
-  return out;
-};
-const reducedStyleKeys = {
-  shadowColor: true,
-  shadowOffset: true,
-  shadowOpacity: true,
-  shadowRadius: true,
-  textShadowColor: true,
-  textShadowOffset: true,
-  textShadowRadius: true
-};
-let shorthands = null;
-function expandStyles(style) {
-  const res = {};
-  boxShadowReducer(res, style);
-  textShadowReducer(res, style);
-  borderReducer(res, style);
-  for (let key in style) {
-    shorthands = shorthands || getConfig().shorthands;
-    if (shorthands) {
-      key = shorthands[key] || key;
-    }
-    if (reducedStyleKeys[key])
-      continue;
-    if (key in pseudos) {
-      res[key] = expandStyles(style[key]);
-    } else {
-      const val = normalizeValueWithProperty(style[key], key);
-      const out = expandStyle(key, val);
-      if (out) {
-        Object.assign(res, Object.fromEntries(out));
-      } else {
-        res[key] = val;
-      }
-    }
-  }
-  return res;
-}
-function borderReducer(res, cur) {
-  for (const key in borderDefaults) {
-    if (key in cur) {
-      res[borderDefaults[key]] = cur[borderDefaults[key]] || "solid";
-    }
-  }
-}
-const borderDefaults = {
-  borderWidth: "borderStyle",
-  borderBottomWidth: "borderBottomStyle",
-  borderTopWidth: "borderTopStyle",
-  borderLeftWidth: "borderLeftStyle",
-  borderRightWidth: "borderRightStyle"
-};
-function createDeclarationBlock(style, important = false) {
-  let declarations = "";
-  for (const key in style) {
-    const prop = hyphenateStyleName(key);
-    const value = style[key];
-    declarations += `${prop}:${value}`;
-  }
-  return `{${declarations}${important ? ` !important` : ""};}`;
-}
-const pseudoSelectorPrefixes = (() => {
-  const res = {};
-  for (const key in pseudos) {
-    const pseudo = pseudos[key];
-    res[pseudo.name] = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
-  }
-  return res;
-})();
-function createAtomicRules(identifier, property, value, pseudo) {
-  const selector = pseudo ? `${pseudoSelectorPrefixes[pseudo.name]} .${identifier}:${pseudo.name}` : `.${identifier}`;
-  const important = !!pseudo;
-  let rules = [];
-  switch (property) {
-    case "placeholderTextColor": {
-      const block = createDeclarationBlock({ color: value, opacity: 1 }, important);
-      rules.push(`${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" }, important);
-          rules.push(`${selector}>*${block2}`);
-        }
-      } else if (value === "none" || value === "box-none") {
-        finalValue = "none!important";
-        if (value === "box-none") {
-          const block2 = createDeclarationBlock({ pointerEvents: "auto" }, important);
-          rules.push(`${selector}>*${block2}`);
-        }
-      }
-      const block = createDeclarationBlock({ pointerEvents: finalValue }, important);
-      rules.push(`${selector}${block}`);
-      break;
-    }
-    case "scrollbarWidth": {
-      if (value === "none") {
-        rules.push(`${selector}::-webkit-scrollbar{display:none}`);
-      }
-      const block = createDeclarationBlock({ scrollbarWidth: value }, important);
-      rules.push(`${selector}${block}`);
-      break;
-    }
-    default: {
-      const block = createDeclarationBlock({ [property]: value }, important);
-      rules.push(`${selector}${block}`);
-      break;
-    }
-  }
-  if ((pseudo == null ? void 0 : pseudo.name) === "hover") {
-    rules = rules.map((r) => `@media not all and (hover: none) { ${r} }`);
-  }
-  return rules;
-}
-function expandStyle(key, value) {
-  if (key === "flex") {
-    if (value <= -1) {
-      return [
-        ["flexGrow", 0],
-        ["flexShrink", 1],
-        ["flexBasis", "auto"]
-      ];
-    }
-    if (value >= 0) {
-      return [
-        ["flexGrow", value],
-        ["flexShrink", 1]
-      ];
-    }
-    return;
-  }
-  switch (key) {
-    case "elevation":
-    case "overlayColor":
-    case "resizeMode":
-    case "tintColor": {
-      break;
-    }
-    case "aspectRatio": {
-      return [[key, value.toString()]];
-    }
-    case "backgroundClip": {
-      if (value === "text") {
-        return [
-          ["backgroundClip", value],
-          ["WebkitBackgroundClip", value]
-        ];
-      }
-      break;
-    }
-    case "textAlignVertical": {
-      return [["verticalAlign", value === "center" ? "middle" : value]];
-    }
-    case "textDecorationLine": {
-      return [["textDecorationLine", value]];
-    }
-    case "transform": {
-      if (Array.isArray(value)) {
-        return [[key, value.map(mapTransform).join(" ")]];
-      }
-      break;
-    }
-    case "writingDirection": {
-      return [["direction", value]];
-    }
-  }
-  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key];
-  if (longKey) {
-    return longKey.map((key2) => {
-      return [key2, value];
-    });
-  } else {
-    if (isWeb && Array.isArray(value)) {
-      return [[key, value.join(",")]];
-    }
-  }
-}
-const cache = {
-  get(property, value) {
-    if (cache[property] != null && cache[property].hasOwnProperty(value) && cache[property][value] != null) {
-      return cache[property][value];
-    }
-  },
-  set(property, value, object) {
-    if (cache[property] == null) {
-      cache[property] = {};
-    }
-    return cache[property][value] = object;
-  }
-};
-function stringifyValueWithProperty(value, property) {
-  return normalizeValueWithProperty(value, property);
-}
-const mapTransform = (transform) => {
-  const type = Object.keys(transform)[0];
-  const value = transform[type];
-  if (type === "matrix" || type === "matrix3d") {
-    return `${type}(${value.join(",")})`;
-  } else {
-    const normalizedValue = normalizeValueWithProperty(value, type);
-    return `${type}(${normalizedValue})`;
-  }
-};
-const colorProps = {
-  backgroundColor: true,
-  borderColor: true,
-  borderTopColor: true,
-  borderRightColor: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  color: true,
-  shadowColor: true,
-  textDecorationColor: true,
-  textShadowColor: true
-};
-function normalizeValueWithProperty(value, property) {
-  if (process.env.TAMAGUI_TARGET === "web") {
-    const shouldCoerceToPx = typeof value === "number" && (property === void 0 || property === null || !unitlessNumbers[property]);
-    if (shouldCoerceToPx) {
-      return `${value}px`;
-    }
-  }
-  if (property && colorProps[property]) {
-    return normalizeColor(value);
-  }
-  return value;
-}
-const normalizeColor = (color, opacity = 1) => {
-  if (color == null || color == void 0) {
-    return;
-  }
-  if (process.env.TAMAGUI_TARGET === "web") {
-    if (typeof color === "string" && isWebColor(color)) {
-      return color;
-    }
-  }
-  const colorInt = processColor(color);
-  if (colorInt != null) {
-    const r = colorInt >> 16 & 255;
-    const g = colorInt >> 8 & 255;
-    const b = colorInt & 255;
-    const a = (colorInt >> 24 & 255) / 255;
-    const alpha = (a * opacity).toFixed(2);
-    return `rgba(${r},${g},${b},${alpha})`;
-  }
-  return `${color}`;
-};
-const webColors = {
-  currentColor: true,
-  currentcolor: true,
-  transparent: true,
-  inherit: true
-};
-const isWebColor = (color) => webColors[color] || color.indexOf("var(") === 0;
-const processColor = (color) => {
-  if (color === void 0 || color === null) {
-    return color;
-  }
-  let intColor = normalizeCSSColor(color);
-  if (intColor === void 0 || intColor === null) {
-    return void 0;
-  }
-  return (+intColor << 24 | +intColor >>> 8) >>> 0;
-};
-const unitlessNumbers = {
-  animationIterationCount: true,
-  aspectRatio: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  boxFlex: true,
-  boxFleGroup: true,
-  boxOrdinalGroup: true,
-  columnCount: true,
-  flex: true,
-  flexGrow: true,
-  flexOrder: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  fontWeight: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowGap: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnGap: true,
-  gridColumnStart: true,
-  lineClamp: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  fillOpacity: true,
-  floodOpacity: true,
-  stopOpacity: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  strokeMiterlimit: true,
-  strokeOpacity: true,
-  strokeWidth: true,
-  scale: true,
-  scaleX: true,
-  scaleY: true,
-  scaleZ: true,
-  shadowOpacity: true
-};
-const resolveShadowValue = (style) => {
-  const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
-  if (shadowRadius === void 0) {
-    return;
-  }
-  const { height, width } = shadowOffset || defaultOffset;
-  const offsetX = normalizeValueWithProperty(width);
-  const offsetY = normalizeValueWithProperty(height);
-  const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
-  const color = normalizeColor(String(shadowColor || "black"), shadowOpacity);
-  return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-};
-function boxShadowReducer(resolvedStyle, style) {
-  const { boxShadow } = style;
-  const shadow = resolveShadowValue(style);
-  if (shadow != null) {
-    resolvedStyle.boxShadow = boxShadow ? `${boxShadow}, ${shadow}` : shadow;
-  }
-}
-const defaultOffset = { height: 0, width: 0 };
-function textShadowReducer(resolvedStyle, style) {
-  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) {
-    resolvedStyle.textShadow = `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-  }
-}
-const STYLE_SHORT_FORM_EXPANSIONS = {
-  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
-  borderRadius: [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomRightRadius",
-    "borderBottomLeftRadius"
-  ],
-  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
-  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
-  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
-  marginHorizontal: ["marginRight", "marginLeft"],
-  marginVertical: ["marginTop", "marginBottom"],
-  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
-  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
-  paddingHorizontal: ["paddingRight", "paddingLeft"],
-  paddingVertical: ["paddingTop", "paddingBottom"],
-  ...isWeb && {
-    overflow: ["overflowX", "overflowY"]
-  }
-};
-export {
-  expandStyle,
-  expandStyles,
-  generateAtomicStyles
-};

package/dist/jsx/helpers/getExpandedShorthands.js

@@ -1,15 +0,0 @@
-import { getConfig } from "../conf";
-function getExpandedShorthands(props) {
-  const shorthands = getConfig().shorthands;
-  if (!shorthands) {
-    return props;
-  }
-  let res = {};
-  for (const key in props) {
-    res[shorthands[key] || key] = props[key];
-  }
-  return res;
-}
-export {
-  getExpandedShorthands
-};

package/dist/jsx/helpers/getSize.js

@@ -1,19 +0,0 @@
-import { getTokens } from "../conf";
-const getSize = (size, shift = 0, bounds = [0]) => {
-  return stepTokenUpOrDown(getTokens().size, size, shift, bounds);
-};
-const stepTokenUpOrDown = (tokens, current, shift = 0, bounds = [0]) => {
-  var _a, _b;
-  const sizeNames = Object.keys(tokens);
-  const currentKeyNum = (typeof current === "string" ? current.replace("$", "") : current) || "4";
-  const nextKeyName = `$${+currentKeyNum + shift}`;
-  const min = (_a = bounds[0]) != null ? _a : 0;
-  const max = (_b = bounds[1]) != null ? _b : sizeNames.length - 1;
-  const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)));
-  const key = sizeNames[index];
-  return tokens[key] || tokens["$4"];
-};
-export {
-  getSize,
-  stepTokenUpOrDown
-};