@pyreon/unistyle 0.11.1 → 0.11.3

package/src/styles/alignContent.ts

@@ -0,0 +1,58 @@
+import { isEmpty } from "@pyreon/ui-core"
+
+export type AlignContentDirectionKeys = keyof typeof ALIGN_CONTENT_DIRECTION
+export type AlignContentAlignXKeys = keyof typeof ALIGN_CONTENT_MAP_X
+export type AlignContentAlignYKeys = keyof typeof ALIGN_CONTENT_MAP_Y
+
+const ALIGN_CONTENT_MAP_SHARED = {
+  center: "center",
+  spaceBetween: "space-between",
+  spaceAround: "space-around",
+  block: "stretch",
+}
+
+export const ALIGN_CONTENT_MAP_X = {
+  left: "flex-start",
+  right: "flex-end",
+  ...ALIGN_CONTENT_MAP_SHARED,
+} as const
+
+export const ALIGN_CONTENT_MAP_Y = {
+  top: "flex-start",
+  bottom: "flex-end",
+  ...ALIGN_CONTENT_MAP_SHARED,
+} as const
+
+export const ALIGN_CONTENT_DIRECTION = {
+  inline: "row",
+  reverseInline: "row-reverse",
+  rows: "column",
+  reverseRows: "column-reverse",
+} as const
+
+export type AlignContent = ({
+  direction,
+  alignX,
+  alignY,
+}: {
+  direction: AlignContentDirectionKeys
+  alignX: AlignContentAlignXKeys
+  alignY: AlignContentAlignYKeys
+}) => string | null
+
+const alignContent: AlignContent = (attrs) => {
+  const { direction, alignX, alignY } = attrs
+
+  if (isEmpty(attrs) || !direction || !alignX || !alignY) {
+    return null
+  }
+
+  const isReverted = ["inline", "reverseInline"].includes(direction)
+  const dir = ALIGN_CONTENT_DIRECTION[direction]
+  const x = ALIGN_CONTENT_MAP_X[alignX]
+  const y = ALIGN_CONTENT_MAP_Y[alignY]
+
+  return `flex-direction: ${dir}; align-items: ${isReverted ? y : x}; justify-content: ${isReverted ? x : y};`
+}
+
+export default alignContent

package/src/styles/extendCss.ts

@@ -0,0 +1,26 @@
+export type ExtendCss = (
+  styles:
+    | ((css: (strings: TemplateStringsArray, ...values: any[]) => string) => string)
+    | string
+    | null
+    | undefined,
+) => string
+
+const simpleCss = (strings: TemplateStringsArray, ...values: any[]): string => {
+  let result = ""
+  for (let i = 0; i < strings.length; i++) {
+    result += strings[i]
+    if (i < values.length) result += String(values[i] ?? "")
+  }
+  return result
+}
+
+const extendCss: ExtendCss = (styles) => {
+  if (!styles) return ""
+  if (typeof styles === "function") {
+    return styles(simpleCss)
+  }
+  return styles
+}
+
+export default extendCss

package/src/styles/index.ts

@@ -0,0 +1,16 @@
+export type {
+  AlignContent,
+  AlignContentAlignXKeys,
+  AlignContentAlignYKeys,
+  AlignContentDirectionKeys,
+} from "./alignContent"
+export {
+  ALIGN_CONTENT_DIRECTION,
+  ALIGN_CONTENT_MAP_X,
+  ALIGN_CONTENT_MAP_Y,
+  default as alignContent,
+} from "./alignContent"
+export type { ExtendCss } from "./extendCss"
+export { default as extendCss } from "./extendCss"
+export type { Styles, StylesTheme } from "./styles"
+export { default as styles } from "./styles"

package/src/styles/shorthands/borderRadius.ts

@@ -0,0 +1,89 @@
+import { value } from "../../units"
+
+type PropertyValue = string | number | null | undefined
+type PV = PropertyValue
+
+const isValidValue = (v: unknown) => !!v || v === 0
+
+type CornerValues = {
+  full: PV
+  top: PV
+  bottom: PV
+  left: PV
+  right: PV
+  topLeft: PV
+  topRight: PV
+  bottomLeft: PV
+  bottomRight: PV
+}
+
+const hasAnyValue = (v: CornerValues) =>
+  isValidValue(v.full) ||
+  isValidValue(v.top) ||
+  isValidValue(v.bottom) ||
+  isValidValue(v.left) ||
+  isValidValue(v.right) ||
+  isValidValue(v.topLeft) ||
+  isValidValue(v.topRight) ||
+  isValidValue(v.bottomLeft) ||
+  isValidValue(v.bottomRight)
+
+const resolveCorners = (v: CornerValues) => {
+  const corners: PV[] = [v.full, v.full, v.full, v.full]
+  if (isValidValue(v.top)) {
+    corners[0] = v.top
+    corners[1] = v.top
+  }
+  if (isValidValue(v.bottom)) {
+    corners[2] = v.bottom
+    corners[3] = v.bottom
+  }
+  if (isValidValue(v.left)) {
+    corners[0] = v.left
+    corners[3] = v.left
+  }
+  if (isValidValue(v.right)) {
+    corners[1] = v.right
+    corners[2] = v.right
+  }
+  if (isValidValue(v.topLeft)) corners[0] = v.topLeft
+  if (isValidValue(v.topRight)) corners[1] = v.topRight
+  if (isValidValue(v.bottomRight)) corners[2] = v.bottomRight
+  if (isValidValue(v.bottomLeft)) corners[3] = v.bottomLeft
+  return corners
+}
+
+const formatShorthand = (corners: PV[], calc: (p: PV) => any) => {
+  const [tl, tr, br, bl] = corners
+  if (corners.every((val, _, arr) => val === arr[0])) return `border-radius: ${calc(tl)};`
+  if (tl === br && tr === bl) return `border-radius: ${calc(tl)} ${calc(tr)};`
+  if (tl && tr === bl && br) return `border-radius: ${calc(tl)} ${calc(tr)} ${calc(br)};`
+  return `border-radius: ${calc(tl)} ${calc(tr)} ${calc(br)} ${calc(bl)};`
+}
+
+const CORNER_CSS = [
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-bottom-right-radius",
+  "border-bottom-left-radius",
+] as const
+
+const formatIndividual = (corners: PV[], calc: (p: PV) => any) => {
+  let output = ""
+  for (let i = 0; i < corners.length; i++) {
+    if (isValidValue(corners[i])) output += `${CORNER_CSS[i]}: ${calc(corners[i])};`
+  }
+  return output
+}
+
+export type BorderRadius = (rootSize?: number) => (props: CornerValues) => string | null
+
+const borderRadius: BorderRadius = (rootSize) => (props) => {
+  if (!hasAnyValue(props)) return null
+  const calc = (param: PV) => value(param, rootSize)
+  const corners = resolveCorners(props)
+  if (corners.every((val) => isValidValue(val))) return formatShorthand(corners, calc)
+  return formatIndividual(corners, calc)
+}
+
+export default borderRadius

package/src/styles/shorthands/edge.ts

@@ -0,0 +1,108 @@
+import { value } from "../../units"
+
+type CssUnits =
+  | "px"
+  | "rem"
+  | "%"
+  | "em"
+  | "ex"
+  | "cm"
+  | "mm"
+  | "in"
+  | "pt"
+  | "pc"
+  | "ch"
+  | "vh"
+  | "vw"
+  | "vmin"
+  | "vmax"
+
+const isValidValue = (v: unknown) => !!v || v === 0
+
+type Property = "inset" | "margin" | "padding" | "border-width" | "border-style" | "border-color"
+type Value = string | number | null | undefined
+type Side = "top" | "bottom" | "left" | "right"
+
+type EdgeValues = {
+  full: Value
+  x: Value
+  y: Value
+  top: Value
+  left: Value
+  right: Value
+  bottom: Value
+}
+
+type Definitions = Record<Property, { unit?: CssUnits; edgeCss: (side: Side) => string }>
+
+const definitions: Definitions = {
+  inset: { unit: "rem", edgeCss: (side) => side },
+  margin: { unit: "rem", edgeCss: (side) => `margin-${side}` },
+  padding: { unit: "rem", edgeCss: (side) => `padding-${side}` },
+  "border-width": { unit: "px", edgeCss: (side) => `border-${side}-width` },
+  "border-style": { edgeCss: (side) => `border-${side}-style` },
+  "border-color": { edgeCss: (side) => `border-${side}-color` },
+}
+
+const hasAnyValue = (vals: EdgeValues) =>
+  isValidValue(vals.top) ||
+  isValidValue(vals.bottom) ||
+  isValidValue(vals.left) ||
+  isValidValue(vals.right) ||
+  isValidValue(vals.x) ||
+  isValidValue(vals.y) ||
+  isValidValue(vals.full)
+
+const resolveSides = ({ full, x, y, top, left, right, bottom }: EdgeValues) => {
+  const sides: Value[] = [full, full, full, full]
+  if (isValidValue(x)) {
+    sides[1] = x
+    sides[3] = x
+  }
+  if (isValidValue(y)) {
+    sides[0] = y
+    sides[2] = y
+  }
+  if (isValidValue(top)) sides[0] = top
+  if (isValidValue(right)) sides[1] = right
+  if (isValidValue(bottom)) sides[2] = bottom
+  if (isValidValue(left)) sides[3] = left
+  return sides
+}
+
+const formatShorthand = (property: Property, sides: Value[], calc: (v: Value) => Value) => {
+  const [t, r, b, l] = sides
+  if (sides.every((val, _, arr) => val === arr[0])) return `${property}: ${calc(t)};`
+  if (t === b && r === l) return `${property}: ${calc(t)} ${calc(r)};`
+  if (t && r === l && b) return `${property}: ${calc(t)} ${calc(r)} ${calc(b)};`
+  return `${property}: ${calc(t)} ${calc(r)} ${calc(b)} ${calc(l)};`
+}
+
+const formatIndividual = (
+  sides: Value[],
+  edgeCss: (side: Side) => string,
+  calc: (v: Value) => Value,
+) => {
+  const [t, r, b, l] = sides
+  let output = ""
+  if (isValidValue(t)) output += `${edgeCss("top")}: ${calc(t)};`
+  if (isValidValue(b)) output += `${edgeCss("bottom")}: ${calc(b)};`
+  if (isValidValue(l)) output += `${edgeCss("left")}: ${calc(l)};`
+  if (isValidValue(r)) output += `${edgeCss("right")}: ${calc(r)};`
+  return output
+}
+
+export type Edge = (rootSize?: number) => (property: Property, values: EdgeValues) => string | null
+
+const edge: Edge =
+  (rootSize = 16) =>
+  (property, values) => {
+    if (!hasAnyValue(values)) return null
+    const { unit, edgeCss } = definitions[property]
+    const calc = (param: Value) => (unit ? value(param, rootSize, unit) : param)
+    const sides = resolveSides(values)
+    if (sides.every((val) => isValidValue(val))) return formatShorthand(property, sides, calc)
+    return formatIndividual(sides, edgeCss, calc)
+  }
+
+export default edge

package/src/styles/shorthands/index.ts

@@ -0,0 +1,4 @@
+export type { BorderRadius } from "./borderRadius"
+export { default as borderRadius } from "./borderRadius"
+export type { Edge } from "./edge"
+export { default as edge } from "./edge"

package/src/styles/styles/camelToKebab.ts

@@ -0,0 +1,3 @@
+const camelToKebab = (s: string): string => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
+
+export default camelToKebab

package/src/styles/styles/index.ts

@@ -0,0 +1,33 @@
+import { values } from "../../units"
+import { borderRadius, edge } from "../shorthands"
+import processDescriptor from "./processDescriptor"
+import propertyMap from "./propertyMap"
+import type { InnerTheme, Theme } from "./types"
+
+export type { Theme as StylesTheme }
+
+type Css = (strings: TemplateStringsArray, ...args: any[]) => string
+
+export type Styles = ({
+  theme,
+  css,
+  rootSize,
+}: {
+  theme: InnerTheme
+  css: Css
+  rootSize?: number
+}) => string
+
+const styles: Styles = ({ theme: t, css, rootSize }) => {
+  const calc = (...params: any[]) => values(params, rootSize)
+  const shorthand = edge(rootSize)
+  const borderRadiusFn = borderRadius(rootSize)
+
+  const fragments = propertyMap.map((d) =>
+    processDescriptor(d, t, css, calc, shorthand, borderRadiusFn),
+  )
+
+  return fragments.filter(Boolean).join(" ")
+}
+
+export default styles

package/src/styles/styles/processDescriptor.ts

@@ -0,0 +1,100 @@
+import type { Values } from "../../units/values"
+import type { BorderRadius } from "../shorthands/borderRadius"
+import type { Edge } from "../shorthands/edge"
+import type { PropertyDescriptor } from "./propertyMap"
+import type { InnerTheme } from "./types"
+
+type Css = (strings: TemplateStringsArray, ...values: any[]) => string
+type Calc = (...params: any[]) => ReturnType<Values>
+
+/** Mirrors the Value / PropertyValue types used by edge and borderRadius shorthands. */
+type Value = string | number | null | undefined
+
+const toCssDecl = (css: string, v: unknown) => (v == null ? "" : `${css}: ${v};`)
+
+const processSpecial = (
+  d: Extract<PropertyDescriptor, { kind: "special" }>,
+  t: InnerTheme,
+): string => {
+  switch (d.id) {
+    case "fullScreen":
+      if (!t.fullScreen) return ""
+      return "position: fixed; top: 0; left: 0; right: 0; bottom: 0;"
+
+    case "backgroundImage":
+      if (!t.backgroundImage) return ""
+      return `background-image: url(${t.backgroundImage});`
+
+    case "animation": {
+      const parts = [t.keyframe, t.animation].filter(Boolean).join(" ")
+      return parts ? `animation: ${parts};` : ""
+    }
+
+    case "hideEmpty":
+      if (!t.hideEmpty) return ""
+      return "&:empty { display: none; }"
+
+    case "clearFix":
+      if (!t.clearFix) return ""
+      return '&::after { clear: both; content: ""; display: table; }'
+
+    case "extendCss":
+      return (t.extendCss as string) ?? ""
+
+    default:
+      return ""
+  }
+}
+
+const processDescriptor = (
+  d: PropertyDescriptor,
+  t: InnerTheme,
+  _css: Css,
+  calc: Calc,
+  shorthand: ReturnType<Edge>,
+  borderRadiusFn: ReturnType<BorderRadius>,
+): string => {
+  switch (d.kind) {
+    case "simple":
+      return toCssDecl(d.css, t[d.key])
+
+    case "convert":
+      return toCssDecl(d.css, calc(t[d.key]))
+
+    case "convert_fallback":
+      return toCssDecl(d.css, calc(...d.keys.map((k) => t[k])))
+
+    case "edge":
+      return (
+        shorthand(d.property, {
+          full: t[d.keys.full] as Value,
+          x: t[d.keys.x] as Value,
+          y: t[d.keys.y] as Value,
+          top: t[d.keys.top] as Value,
+          left: t[d.keys.left] as Value,
+          bottom: t[d.keys.bottom] as Value,
+          right: t[d.keys.right] as Value,
+        }) ?? ""
+      )
+
+    case "border_radius":
+      return (
+        borderRadiusFn({
+          full: t[d.keys.full] as Value,
+          top: t[d.keys.top] as Value,
+          bottom: t[d.keys.bottom] as Value,
+          left: t[d.keys.left] as Value,
+          right: t[d.keys.right] as Value,
+          topLeft: t[d.keys.topLeft] as Value,
+          topRight: t[d.keys.topRight] as Value,
+          bottomLeft: t[d.keys.bottomLeft] as Value,
+          bottomRight: t[d.keys.bottomRight] as Value,
+        }) ?? ""
+      )
+
+    case "special":
+      return processSpecial(d, t)
+  }
+}
+
+export default processDescriptor