@expressive/macro-style/lib/index.js

Style macros for most CSS keywords

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __markAsModule = (target) => __defProp(target, "__esModule", {value: true});
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
var __commonJS = (cb, mod) => () => (mod || cb((mod = {exports: {}}).exports, mod), mod.exports);
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, {get: all[name], enumerable: true});
};
var __reExport = (target, module2, desc) => {
  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
    for (let key of __getOwnPropNames(module2))
      if (!__hasOwnProp.call(target, key) && key !== "default")
        __defProp(target, key, {get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable});
  }
  return target;
};
var __toModule = (module2) => {
  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? {get: () => module2.default, enumerable: true} : {value: module2, enumerable: true})), module2);
};

// src/units.js
function addUnit(n) {
  if (isNaN(n))
    return n;
  if (n == 0)
    return 0;
  if (parseInt(n) === n)
    return n + "px";
  else
    return n + "em";
}
function appendUnitToN(val, unit) {
  if (val === 0)
    return "0";
  if (val === void 0)
    return "";
  if (typeof val == "string" && /\./.test(val) && !isNaN(parseFloat(val)))
    return val + (unit || "em");
  if (parseInt(val) === val)
    return val + (unit || "px");
  return val;
}
var init_units = __esm(() => {
});

// src/util.js
function rect(...args) {
  let [a2, b, c] = args;
  let top, left, right, bottom;
  switch (args.length) {
    case 0:
      a2 = 0;
    case 1:
      top = left = right = bottom = a2;
      break;
    case 2:
      top = bottom = a2;
      left = right = b;
      break;
    case 3:
      top = a2;
      bottom = c;
      left = right = b;
      break;
    case 4:
      return args;
    default:
      throw new Error("Too many arguments for css 4-way value.");
  }
  return [top, right, bottom, left];
}
var init_util = __esm(() => {
});

// src/margins.js
var require_margins = __commonJS((exports2) => {
  init_util();
  init_units();
  var EXPORT3 = exports2;
  for (const kind of [
    "margin",
    "padding"
  ]) {
    for (const [direction, a2, b] of [
      ["Vertical", "Top", "Bottom"],
      ["Horizontal", "Left", "Right"]
    ]) {
      EXPORT3[kind + direction] = EXPORT3[kind + direction[0]] = (aIn, bIn) => ({
        attrs: {
          [kind + a2]: aIn,
          [kind + b]: bIn || aIn
        }
      });
    }
    for (const side of ["Top", "Left", "Right", "Bottom"]) {
      EXPORT3[kind + side] = EXPORT3[kind + side[0]] = handleUnits(kind + side);
    }
    EXPORT3[kind] = function(keyword) {
      let value;
      if (this.arguments.length == 1 && keyword == "auto" || keyword == "none" || / /.test(keyword))
        value = keyword;
      else {
        let args = rect(...this.arguments);
        if (args.length == 2)
          args = args.slice(0, 2);
        value = args.map((x) => appendUnitToN(x)).join(" ");
      }
      return {
        style: {[kind]: value}
      };
    };
  }
  function handleUnits(name) {
    return function() {
      return {
        style: {
          [name]: appendUnitToN.apply(this, this.arguments)
        }
      };
    };
  }
});

// src/scalar.js
var require_scalar = __commonJS((exports2) => {
  init_units();
  var EXPORT3 = exports2;
  var EXPECTS_AUTO = [
    "gap",
    "top",
    "left",
    "right",
    "bottom",
    "width",
    "height",
    "maxWidth",
    "maxHeight",
    "minWidth",
    "minHeight",
    "fontSize",
    "lineHeight",
    "outlineWidth",
    "borderRadius",
    "backgroundSize"
  ];
  for (const key of EXPECTS_AUTO)
    EXPORT3[key] = nToNUnits;
  function nToNUnits(value, unit) {
    if (value == "fill")
      value = "100%";
    if (value.named) {
      unit = value.named;
      value = value.inner[0];
    }
    return {
      style: {
        [this.name]: appendUnitToN(value, unit)
      }
    };
  }
});

// src/index.js
__markAsModule(exports);
__export(exports, {
  Color: () => colors_exports,
  absolute: () => absolute,
  aspectSize: () => aspectSize,
  background: () => background,
  backgroundImage: () => backgroundImage,
  bg: () => bg,
  centered: () => centered,
  circle: () => circle,
  clickable: () => clickable,
  family: () => fontFamily,
  fixed: () => fixed,
  flexAlign: () => flexAlign,
  font: () => font,
  fontFamily: () => fontFamily,
  gridArea: () => gridArea,
  gridColumn: () => gridColumn,
  gridColumns: () => gridColumns,
  gridRow: () => gridRow,
  gridRows: () => gridRows,
  icon: () => icon,
  image: () => image,
  mobile: () => mobile,
  outline: () => outline,
  radius: () => radius,
  relative: () => relative,
  screen: () => screen,
  select: () => select,
  shadow: () => shadow
});

// src/border.js
init_units();
var EXPORT = exports;
for (const kind of [
  "border",
  "borderTop",
  "borderLeft",
  "borderRight",
  "borderBottom"
]) {
  let handler = function(color, width, borderStyle) {
    const style = {};
    if (!width && color.indexOf(" ") > 0)
      style[kind] = color;
    else
      style[kind] = border(color, width, borderStyle);
    return {style};
  };
  EXPORT[kind] = handler;
  if (kind[6]) {
    const shortName = kind.slice(0, 7);
    EXPORT[shortName] = handler;
  }
}
function border(color = "black", width = 1, style = "solid") {
  if (color == "none")
    return "none";
  else {
    width = appendUnitToN(width);
    return [color, style, width].join(" ");
  }
}
function outline(a2, b) {
  if (a2 == "none")
    return {style: {outline: "none"}};
  if (b == void 0)
    return {style: {outline: `1px dashed ${a2 || "green"}`}};
  else {
    const outline2 = this.arguments.map((x) => typeof x == "number" ? `${x}px` : x).join(" ");
    return {style: {outline: outline2}};
  }
}

// src/radius.js
init_units();
var CORNER_MATRIX = {
  top: [1, 1, 0, 0],
  left: [1, 0, 0, 1],
  right: [0, 1, 1, 0],
  bottom: [0, 0, 1, 1]
};
function radius(dir, r1, r2) {
  let value = "";
  if (dir == "round")
    value = 999;
  else if (r1 === void 0)
    value = dir;
  else if (typeof dir == "string") {
    let [d1, d2] = dir.split("-");
    let matrix = CORNER_MATRIX[d1];
    if (d2)
      matrix = matrix.map((dir2, i) => {
        return CORNER_MATRIX[d2][i] ? dir2 : 0;
      });
    const radii = matrix.map((b) => {
      return (b ? r1 : r2) || 0;
    });
    value = radii.map(addUnit).join(" ");
  }
  return {
    attrs: {
      borderRadius: addUnit(value)
    }
  };
}
function circle(a2) {
  return {
    attrs: {
      borderRadius: a2 / 2,
      size: a2
    }
  };
}

// src/colors.js
var colors_exports = {};
__export(colors_exports, {
  hsl: () => hsla,
  hsla: () => hsla,
  rgb: () => rgba,
  rgba: () => rgba
});
function rgba(r, g, b, a2 = 1) {
  for (const x of [r, g, b])
    if (typeof x != "number")
      throw new Error("malformed arguments in rgb statement");
  const rgb = [r, g, b].join(",");
  return {
    value: a2 == 1 ? `rgb(${rgb})` : `rgba(${rgb},${a2})`
  };
}
function hsla(h, s, l, a2 = 1) {
  for (const x of [h, s, l])
    if (typeof x != "number")
      throw new Error("malformed arguments in hsl statement");
  const hsl = [h, s + "%", l + "%"].join(",");
  return {
    value: a2 == 1 ? `hsl(${hsl})` : `hsla(${hsl},${a2})`
  };
}

// src/coloration.js
function bg(a2) {
  if (Array.isArray(a2)) {
    let attrs = {};
    const [head, ...tail] = a2;
    switch (head) {
      case "rgb":
      case "rgba": {
        const {value} = rgba(...tail);
        attrs = {backgroundColor: value};
        break;
      }
      case "hsl":
      case "hsla": {
        const {value} = hsla(...tail);
        attrs = {backgroundColor: value};
        break;
      }
    }
    return {
      style: attrs
    };
  }
  return {
    attrs: {
      background: this.arguments
    }
  };
}

// src/flex.js
var DIRECTIONS = {
  right: "row",
  left: "row-reverse",
  up: "column-reverse",
  down: "column",
  row: null,
  column: null,
  "row-reverse": null,
  "column-reverse": null
};
function flexAlign() {
  const style = {
    display: "flex"
  };
  for (const arg of this.arguments) {
    if (arg in DIRECTIONS) {
      style.flexDirection = DIRECTIONS[arg] || arg;
    } else if (arg == "center") {
      style.justifyContent = "center";
      style.alignItems = "center";
    } else
      style.justifyContent = arg;
  }
  return {style};
}

// src/grid.js
function gridArea(...args) {
  if (args.length == 2)
    return {
      style: {
        gridRow: recombineSlash(args[0]),
        gridColumn: recombineSlash(args[1])
      }
    };
}
function gridRow(...args) {
  return {
    style: {
      gridRow: recombineSlash(args)
    }
  };
}
function gridColumn(...args) {
  return {
    style: {
      gridColumn: recombineSlash(args)
    }
  };
}
function gridRows(...args) {
  return {
    style: {
      display: "grid",
      gridTemplateRows: recombineTemplate(args)
    }
  };
}
function gridColumns(...args) {
  return {
    style: {
      display: "grid",
      gridTemplateColumns: recombineTemplate(args)
    }
  };
}
function recombineSlash(args) {
  args = [].concat(args);
  if (args[0] !== "-")
    return args[0];
  let layer = args;
  let x = "";
  while (true) {
    x = x + " / " + layer[2];
    if (Array.isArray(layer[1]))
      layer = layer[1];
    else {
      layer = layer[1] + x;
      break;
    }
  }
  return layer;
}
function recombineTemplate(args) {
  return args.map(formatGridValue).join(" ");
}
function formatGridValue(x) {
  if (typeof x == "number")
    return `${x}px`;
  if (typeof x !== "string")
    throw new Error("Unexpected value for grid");
  if (/^\d+\.\d+$/.test(x))
    return `${x}fr`;
  if (x == "min" || x == "max")
    return `${x}-content`;
  return x;
}

// src/image.js
function image(a2) {
  return {
    style: {
      backgroundImage: `url("${a2}")`
    }
  };
}
function requireExpression(value) {
  return {
    type: "CallExpression",
    callee: {type: "Identifier", name: "require"},
    arguments: [
      {type: "StringLiteral", value}
    ]
  };
}
function background(value, size, position2) {
  const attrs = {};
  const style = {};
  if (/^\.\.?\//.test(value))
    attrs.backgroundImage = value;
  else
    style.background = value;
  if (size)
    attrs.backgroundSize = size;
  if (position2)
    attrs.backgroundPosition = position2;
  return {attrs, style};
}
function backgroundImage(from) {
  if (/^\.\.?\//.test(from))
    return {
      style: {
        backgroundImage: {
          type: "TemplateLiteral",
          expressions: [
            requireExpression(from)
          ],
          quasis: [
            {
              type: "TemplateElement",
              value: {raw: "url(", cooked: "url("},
              tail: false
            },
            {
              type: "TemplateElement",
              value: {raw: ")", cooked: ")"},
              tail: true
            }
          ]
        }
      }
    };
  if (typeof from == "object" && !from.named)
    return {
      style: {
        backgroundImage: from
      }
    };
  return {
    attrs: {
      backgroundImage: this.arguments
    }
  };
}
function icon(mask, color) {
  if (!mask)
    return;
  if (mask.indexOf(".svg") < 0)
    mask = mask.concat(".svg");
  const attrs = {
    WebkitMaskImage: `url("${mask}")`
  };
  if (color)
    attrs.bg = color;
  return {attrs};
}

// src/macros.js
function clickable() {
  return {
    attrs: {
      cursor: "pointer",
      WebkitUserSelect: "none"
    }
  };
}
function select(a2) {
  if (a2 == "none")
    return {
      style: {
        WebkitUserSelect: "none",
        MoxUserSelect: "none",
        userSelect: "none"
      }
    };
}
function centered(maxWidth, padding) {
  const attrs = {
    marginH: "auto"
  };
  if (maxWidth)
    attrs.maxWidth = maxWidth;
  if (padding)
    attrs.paddingH = padding;
  return {attrs};
}

// src/index.js
__reExport(exports, __toModule(require_margins()));

// src/media.js
var MIN_MAX = {
  ">": "min-",
  "<": "max-",
  "==": "",
  ">=": -1,
  "<=": 1
};
var SIZE = {
  width: "width",
  height: "height",
  deviceHeight: "device-height",
  deviceWidth: "device-width"
};
var SPECIAL = {
  WebkitDevicePixelRatio: "-webkit-device-pixel-ratio"
};
var KEYWORD = {
  landscape: "(orientation: landscape)",
  portrait: "(orientation: portrait)"
};
function Transform(e) {
  if (typeof e == "string" && KEYWORD[e])
    return KEYWORD[e];
  else if (e.type == "binary") {
    let {operator, right, left} = e;
    if (operator[1] == "==") {
      right += MIN_MAX[operator];
      operator = operator[0];
    }
    let op = MIN_MAX[operator];
    let key = SIZE[left];
    if (key && typeof right == "number")
      right += "px";
    else
      key = SPECIAL[left];
    if (key && op !== void 0) {
      return `(${op}${key}: ${right})`;
    }
  }
}
function screen() {
  let {body} = this;
  body = body.type == "BlockStatement" ? body.get("body") : body.type == "IfStatement" ? [body] : [];
  for (const node of body)
    if (node.type == "IfStatement") {
      let query = this.parse(node.get("test"));
      query = query.map(Transform).join(" and ");
      this.declareMediaQuery("only screen" + (query ? " and " + query : ""), node.get("consequent"));
    }
}
function mobile() {
  this.declareMediaQuery("only screen and (max-width: 800px)", this.body);
}

// src/position.js
init_util();
var INVERSE = {
  top: "bottom",
  left: "right",
  right: "left",
  bottom: "top"
};
function absolute(...args) {
  return {
    style: {position: "absolute"},
    attrs: computePosition(...args)
  };
}
function fixed(...args) {
  return {
    style: {position: "fixed"},
    attrs: computePosition(...args)
  };
}
function relative() {
  return {
    style: {position: "relative"}
  };
}
function computePosition(...args) {
  const [a2, b = 0, c = b] = args;
  let out = {
    top: b,
    left: c,
    right: c,
    bottom: b
  };
  if (a2 == "fill")
    return out;
  if (typeof a2 == "string") {
    const [k1, k2] = a2.split("-");
    if (k2) {
      if (k1 == "fill")
        delete out[INVERSE[k2]];
      else {
        for (const dir of [k1, k2])
          delete out[INVERSE[dir]];
      }
      return out;
    }
  }
  return position(...args);
}
function position(...args) {
  let data = {};
  if (typeof a != "number")
    for (const item of args)
      if (item.named)
        data[item.named] = item.inner[0];
      else {
        data = null;
        break;
      }
  if (!data) {
    const [top, right, bottom, left] = rect(...args);
    return {top, right, bottom, left};
  }
  return data;
}

// src/index.js
__reExport(exports, __toModule(require_scalar()));

// src/size.js
var EXPORT2 = exports;
for (const type of ["min", "max", ""]) {
  const size = type ? `${type}Size` : "size";
  const width = type ? `${type}Width` : "width";
  const height = type ? `${type}Height` : "height";
  EXPORT2[size] = (x, y, unit) => {
    if (typeof y == "string" && typeof x == "number") {
      unit = y;
      y = null;
    }
    return {
      attrs: {
        [width]: [x, unit],
        [height]: [y || x, unit]
      }
    };
  };
}
function aspectSize(x, y, unit) {
  const y2 = Math.abs(y);
  if (y2 && y2 < 1)
    if (y <= 0)
      y = x * y2;
    else {
      y = x;
      x = x * y2;
    }
  return {
    attrs: {
      width: [x, unit],
      height: [y || x, unit]
    }
  };
}

// src/shadow.js
function shadow(color, radius2 = 10, x = 2, y = x) {
  let value;
  if (color == "intial" || color == "none")
    value = color;
  else
    value = `${x}px ${y}px ${radius2}px ${color}`;
  return {
    style: {
      boxShadow: value
    }
  };
}

// src/text.js
function font(...args) {
  const attrs = {};
  for (const x of args)
    if (x % 100 === 0)
      attrs.fontWeight = x;
    else if (isNaN(x) === false)
      attrs.fontSize = x;
    else if (typeof x === "string")
      attrs.fontFamily = x;
  return {attrs};
}
function fontFamily() {
  const fonts = this.arguments.map(quoteOnWhitespace).join(", ");
  return {
    style: {
      fontFamily: fonts
    }
  };
}
function quoteOnWhitespace(font2) {
  if (~font2.indexOf(" "))
    return `"${font2}"`;
  return font2;
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Color,
  absolute,
  aspectSize,
  background,
  backgroundImage,
  bg,
  centered,
  circle,
  clickable,
  family,
  fixed,
  flexAlign,
  font,
  fontFamily,
  gridArea,
  gridColumn,
  gridColumns,
  gridRow,
  gridRows,
  icon,
  image,
  mobile,
  outline,
  radius,
  relative,
  screen,
  select,
  shadow
});