@chakra-ui/styled-system/dist/esm/utils/transform-functions.js

Style function for css-in-js building component libraries

import { isCssVar, isNumber, isString } from "@chakra-ui/utils";
import { backdropFilterTemplate, filterTemplate, getRingTemplate, getTransformGpuTemplate, getTransformTemplate, flexDirectionTemplate } from "./templates";
import { gradientTransform, globalSet } from "./parse-gradient";

var analyzeCSSValue = value => {
  var num = parseFloat(value.toString());
  var unit = value.toString().replace(String(num), "");
  return {
    unitless: !unit,
    value: num,
    unit
  };
};

var wrap = str => value => str + "(" + value + ")";

export var transformFunctions = {
  filter(value) {
    return value !== "auto" ? value : filterTemplate;
  },

  backdropFilter(value) {
    return value !== "auto" ? value : backdropFilterTemplate;
  },

  ring(value) {
    return getRingTemplate(transformFunctions.px(value));
  },

  bgClip(value) {
    return value === "text" ? {
      color: "transparent",
      backgroundClip: "text"
    } : {
      backgroundClip: value
    };
  },

  transform(value) {
    if (value === "auto") return getTransformTemplate();
    if (value === "auto-gpu") return getTransformGpuTemplate();
    return value;
  },

  px(value) {
    if (value == null) return value;
    var {
      unitless
    } = analyzeCSSValue(value);
    return unitless || isNumber(value) ? value + "px" : value;
  },

  fraction(value) {
    return !isNumber(value) || value > 1 ? value : value * 100 + "%";
  },

  float(value, theme) {
    var map = {
      left: "right",
      right: "left"
    };
    return theme.direction === "rtl" ? map[value] : value;
  },

  degree(value) {
    if (isCssVar(value) || value == null) return value;
    var unitless = isString(value) && !value.endsWith("deg");
    return isNumber(value) || unitless ? value + "deg" : value;
  },

  gradient: gradientTransform,
  blur: wrap("blur"),
  opacity: wrap("opacity"),
  brightness: wrap("brightness"),
  contrast: wrap("contrast"),
  dropShadow: wrap("drop-shadow"),
  grayscale: wrap("grayscale"),
  hueRotate: wrap("hue-rotate"),
  invert: wrap("invert"),
  saturate: wrap("saturate"),
  sepia: wrap("sepia"),

  bgImage(value) {
    if (value == null) return value;
    var prevent = isCSSFunction(value) || globalSet.has(value);
    return !prevent ? "url(" + value + ")" : value;
  },

  outline(value) {
    var isNoneOrZero = String(value) === "0" || String(value) === "none";
    return value !== null && isNoneOrZero ? {
      outline: "2px solid transparent",
      outlineOffset: "2px"
    } : {
      outline: value
    };
  },

  flexDirection(value) {
    var _flexDirectionTemplat;

    var {
      space,
      divide
    } = (_flexDirectionTemplat = flexDirectionTemplate[value]) != null ? _flexDirectionTemplat : {};
    var result = {
      flexDirection: value
    };
    if (space) result[space] = 1;
    if (divide) result[divide] = 1;
    return result;
  }

};

var isCSSFunction = value => {
  return isString(value) && value.includes("(") && value.includes(")");
};
//# sourceMappingURL=transform-functions.js.map