@pyreon/unistyle 0.11.0 → 0.11.2

package/src/styles/styles/types.ts

@@ -0,0 +1,366 @@
+type PropertyValue = string | number | null | undefined
+type Color = string | null | undefined
+
+export interface ITheme {
+  // Special
+  fullScreen?: boolean
+  hideEmpty?: boolean
+  clearFix?: boolean
+  extendCss?: string | ((css: (...args: any[]) => string) => string)
+
+  // Position
+  all?: string
+  display?: string
+  position?: string
+  boxSizing?: string
+  float?: string
+
+  // Inset
+  inset?: PropertyValue
+  insetX?: PropertyValue
+  insetY?: PropertyValue
+  top?: PropertyValue
+  left?: PropertyValue
+  bottom?: PropertyValue
+  right?: PropertyValue
+
+  // Sizing
+  width?: PropertyValue
+  minWidth?: PropertyValue
+  maxWidth?: PropertyValue
+  height?: PropertyValue
+  minHeight?: PropertyValue
+  maxHeight?: PropertyValue
+  size?: PropertyValue
+  minSize?: PropertyValue
+  maxSize?: PropertyValue
+  gap?: PropertyValue
+  aspectRatio?: string
+  contain?: string
+  containerType?: string
+  containerName?: string
+  container?: string
+  inlineSize?: PropertyValue
+  blockSize?: PropertyValue
+  minInlineSize?: PropertyValue
+  minBlockSize?: PropertyValue
+  maxInlineSize?: PropertyValue
+  maxBlockSize?: PropertyValue
+
+  // Spacing
+  margin?: PropertyValue
+  marginX?: PropertyValue
+  marginY?: PropertyValue
+  marginTop?: PropertyValue
+  marginLeft?: PropertyValue
+  marginBottom?: PropertyValue
+  marginRight?: PropertyValue
+  padding?: PropertyValue
+  paddingX?: PropertyValue
+  paddingY?: PropertyValue
+  paddingTop?: PropertyValue
+  paddingLeft?: PropertyValue
+  paddingBottom?: PropertyValue
+  paddingRight?: PropertyValue
+
+  // Logical spacing
+  marginInline?: PropertyValue
+  marginInlineStart?: PropertyValue
+  marginInlineEnd?: PropertyValue
+  marginBlock?: PropertyValue
+  marginBlockStart?: PropertyValue
+  marginBlockEnd?: PropertyValue
+  paddingInline?: PropertyValue
+  paddingInlineStart?: PropertyValue
+  paddingInlineEnd?: PropertyValue
+  paddingBlock?: PropertyValue
+  paddingBlockStart?: PropertyValue
+  paddingBlockEnd?: PropertyValue
+
+  // Logical inset
+  insetInline?: PropertyValue
+  insetInlineStart?: PropertyValue
+  insetInlineEnd?: PropertyValue
+  insetBlock?: PropertyValue
+  insetBlockStart?: PropertyValue
+  insetBlockEnd?: PropertyValue
+
+  // Flex
+  alignContent?: string
+  alignItems?: string
+  alignSelf?: string
+  flex?: string | number
+  flexBasis?: string | number
+  flexDirection?: string
+  flexFlow?: string
+  flexGrow?: number
+  flexShrink?: number
+  flexWrap?: string
+  justifyContent?: string
+  justifyItems?: string
+  justifySelf?: string
+  placeItems?: string
+  placeContent?: string
+  placeSelf?: string
+  rowGap?: PropertyValue
+  columnGap?: PropertyValue
+
+  // Grid
+  grid?: string
+  gridArea?: string
+  gridAutoColumns?: PropertyValue
+  gridAutoFlow?: string
+  gridAutoRows?: PropertyValue
+  gridColumn?: string
+  gridColumnEnd?: string
+  gridColumnGap?: PropertyValue
+  gridColumnStart?: PropertyValue
+  gridGap?: PropertyValue
+  gridRow?: string
+  gridRowStart?: string
+  gridRowEnd?: string
+  gridRowGap?: PropertyValue
+  gridTemplate?: string
+  gridTemplateAreas?: string
+  gridTemplateColumns?: string
+  gridTemplateRows?: string
+
+  // Positioning
+  objectFit?: string
+  objectPosition?: string
+  order?: number
+  opacity?: number | string
+  resize?: string
+  verticalAlign?: string
+
+  // Font & text
+  lineHeight?: string | number
+  font?: string
+  fontFamily?: string
+  fontSize?: PropertyValue
+  fontSizeAdjust?: PropertyValue
+  fontStretch?: PropertyValue
+  fontStyle?: string
+  fontVariant?: string
+  fontWeight?: string | number
+  fontKerning?: string
+  fontFeatureSettings?: string
+  fontVariationSettings?: string
+  fontOpticalSizing?: string
+  textAlign?: string
+  textAlignLast?: string
+  textTransform?: string
+  textDecoration?: string
+  textDecorationColor?: Color
+  textDecorationLine?: string
+  textDecorationStyle?: string
+  textDecorationThickness?: string
+  textUnderlineOffset?: string
+  textEmphasis?: string
+  textEmphasisColor?: Color
+  textEmphasisStyle?: string
+  letterSpacing?: string
+  wordSpacing?: string
+  textIndent?: string
+  textJustify?: string
+  textOverflow?: string
+  textShadow?: string
+  textWrap?: string
+  textRendering?: string
+  whiteSpace?: string
+  wordBreak?: string
+  wordWrap?: string
+  writingMode?: string
+  direction?: string
+  hyphens?: string
+
+  // List
+  listStyle?: string
+  listStyleImage?: string
+  listStylePosition?: string
+  listStyleType?: string
+
+  // Background & colors
+  color?: Color
+  background?: string
+  backgroundColor?: Color
+  backgroundImage?: string
+  backgroundAttachment?: string
+  backgroundClip?: string
+  backgroundOrigin?: string
+  backgroundPosition?: string
+  backgroundRepeat?: string
+  backgroundSize?: string
+
+  // Borders
+  borderRadius?: PropertyValue
+  borderRadiusTop?: PropertyValue
+  borderRadiusBottom?: PropertyValue
+  borderRadiusLeft?: PropertyValue
+  borderRadiusRight?: PropertyValue
+  borderRadiusTopLeft?: PropertyValue
+  borderRadiusTopRight?: PropertyValue
+  borderRadiusBottomLeft?: PropertyValue
+  borderRadiusBottomRight?: PropertyValue
+  border?: string
+  borderTop?: string
+  borderBottom?: string
+  borderLeft?: string
+  borderRight?: string
+  borderWidth?: PropertyValue
+  borderWidthX?: PropertyValue
+  borderWidthY?: PropertyValue
+  borderWidthTop?: PropertyValue
+  borderWidthLeft?: PropertyValue
+  borderWidthBottom?: PropertyValue
+  borderWidthRight?: PropertyValue
+  borderStyle?: string
+  borderStyleX?: string
+  borderStyleY?: string
+  borderStyleTop?: string
+  borderStyleLeft?: string
+  borderStyleBottom?: string
+  borderStyleRight?: string
+  borderColor?: Color
+  borderColorX?: Color
+  borderColorY?: Color
+  borderColorTop?: Color
+  borderColorLeft?: Color
+  borderColorBottom?: Color
+  borderColorRight?: Color
+  borderImage?: string
+  borderImageOutset?: string
+  borderImageRepeat?: string
+  borderImageSlice?: string
+  borderImageSource?: string
+  borderImageWidth?: string
+  borderSpacing?: string
+
+  // Logical borders
+  borderInline?: string
+  borderBlock?: string
+  borderInlineStart?: string
+  borderInlineEnd?: string
+  borderBlockStart?: string
+  borderBlockEnd?: string
+
+  // Visual effects
+  backfaceVisibility?: string
+  boxShadow?: string
+  filter?: string
+  backdropFilter?: string
+  mixBlendMode?: string
+  backgroundBlendMode?: string
+  isolation?: string
+  outline?: string
+  outlineColor?: Color
+  outlineOffset?: string
+  outlineStyle?: string
+  outlineWidth?: string
+
+  // Animations
+  keyframe?: string
+  animation?: string
+  animationName?: string
+  animationDuration?: string
+  animationTimingFunction?: string
+  animationDelay?: string
+  animationIterationCount?: string | number
+  animationDirection?: string
+  animationFillMode?: string
+  animationPlayState?: string
+  transition?: string
+  transitionDelay?: string
+  transitionDuration?: string
+  transitionProperty?: string
+  transitionTimingFunction?: string
+
+  // Transform
+  transform?: string
+  transformOrigin?: string
+  transformStyle?: string
+  translate?: string
+  rotate?: string
+  scale?: string | number
+  willChange?: string
+
+  // Scroll
+  scrollBehavior?: string
+  scrollSnapType?: string
+  scrollSnapAlign?: string
+  scrollSnapStop?: string
+  scrollMargin?: string
+  scrollPadding?: string
+  overscrollBehavior?: string
+  overscrollBehaviorX?: string
+  overscrollBehaviorY?: string
+
+  // Interaction
+  cursor?: string
+  pointerEvents?: string
+  userSelect?: string
+  touchAction?: string
+  scrollbarWidth?: string
+  scrollbarColor?: string
+  scrollbarGutter?: string
+  caretColor?: Color
+  accentColor?: Color
+  colorScheme?: string
+
+  // Other
+  captionSide?: string
+  clear?: string
+  clip?: string
+  clipPath?: string
+  content?: string
+  contentVisibility?: string
+  counterIncrement?: string
+  counterReset?: string
+  emptyCells?: string
+  zIndex?: number | string
+  overflow?: string
+  overflowWrap?: string
+  overflowX?: string
+  overflowY?: string
+  perspective?: string
+  perspectiveOrigin?: string
+  quotes?: string
+  tabSize?: string | number
+  tableLayout?: string
+  visibility?: string
+  appearance?: string
+  imageRendering?: string
+
+  // Masks
+  maskImage?: string
+  maskSize?: string
+  maskPosition?: string
+  maskRepeat?: string
+
+  // Shapes
+  shapeOutside?: string
+  shapeMargin?: string
+  shapeImageThreshold?: string | number
+
+  // Columns
+  columnCount?: number | string
+  columnWidth?: string
+  columnRule?: string
+  columns?: string
+
+  // Fragmentation
+  breakBefore?: string
+  breakAfter?: string
+  breakInside?: string
+  orphans?: number
+  widows?: number
+  printColorAdjust?: string
+}
+
+export type InnerTheme = {
+  [K in keyof ITheme]?: ITheme[K] | null | undefined
+}
+
+export type Theme = {
+  [K in keyof InnerTheme]?: InnerTheme[K] | (() => ITheme[K])
+}

package/src/styles/styles/utils.ts

@@ -0,0 +1,62 @@
+import type { PropertyValue } from "../../types"
+import value from "../../units/value"
+
+const isValidValue = (v: unknown) => !!v || v === 0
+
+type SideValues = {
+  top: PropertyValue | null | undefined
+  left: PropertyValue | null | undefined
+  right: PropertyValue | null | undefined
+  bottom: PropertyValue | null | undefined
+  x: PropertyValue | null | undefined
+  y: PropertyValue | null | undefined
+  full: PropertyValue | null | undefined
+}
+
+// top - right - bottom - left
+const resolveSides = ({ top, left, right, bottom, x, y, full }: SideValues) => {
+  const sides = [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 formatSpacing = (property: string, sides: (PropertyValue | null | undefined)[]) => {
+  const [t, r, b, l] = sides
+
+  if (sides.every((val, _, arr) => isValidValue(val) && val === arr[0])) return `${property}: ${t};`
+
+  if (t === b && r === l) return `${property}: ${value(t)} ${value(r)};`
+
+  if (t && r === l && b) return `${property}: ${value(t)} ${value(r)} ${value(b)};`
+
+  if (sides.every((val) => !!val))
+    return `${property}: ${value(t)} ${value(r)} ${value(b)} ${value(l)};`
+
+  let output = ""
+  if (t) output += `${property}-top: ${value(t)};`
+  if (b) output += `${property}-bottom: ${value(b)};`
+  if (l) output += `${property}-left: ${value(l)};`
+  if (r) output += `${property}-right: ${value(r)};`
+
+  return output
+}
+
+export type SpacingShorthand = (property: "padding" | "margin") => (props: SideValues) => string
+
+export const spacingShorthand: SpacingShorthand = (property) => (props) =>
+  formatSpacing(property, resolveSides(props))

package/src/types.ts

@@ -0,0 +1,175 @@
+import type { config } from "@pyreon/ui-core"
+
+export type Css = typeof config.css
+
+export type Defaults = "initial" | "inherit"
+export type Units = "px" | "rem" | "em" | "%" | "vh" | "vw" | "vmin" | "vmax" | "ex"
+export type UnitValue = number | `${number}${Units}`
+export type PropertyValue = UnitValue | "auto" | Defaults | `calc(${string | number})`
+
+export type Size = "max-content" | "min-content" | "fit-content"
+
+export type Color =
+  | `#${string | number}`
+  | "currentColor"
+  | "transparent"
+  | `rgb(${number}, ${number}, ${number})`
+  | `rgb(${number},${number},${number})`
+  | `rgba(${number}, ${number}, ${number}, ${number})`
+  | `rgba(${number},${number},${number},${number})`
+  | `hsl(${number}, ${number}%, ${number}%)`
+  | `hsl(${number},${number}%,${number}%)`
+  | `hsla(${number}, ${number}%, ${number}%, ${number})`
+  | `hsla(${number},${number}%,${number}%,${number})`
+  | BrowserColors
+  | Defaults
+
+export type BrowserColors =
+  | "black"
+  | "silver"
+  | "gray"
+  | "white"
+  | "maroon"
+  | "red"
+  | "purple"
+  | "fuchsia"
+  | "green"
+  | "lime"
+  | "olive"
+  | "yellow"
+  | "navy"
+  | "blue"
+  | "teal"
+  | "aqua"
+  | "orange"
+  | "aliceblue"
+  | "antiquewhite"
+  | "aquamarine"
+  | "azure"
+  | "beige"
+  | "bisque"
+  | "blanchedalmond"
+  | "blueviolet"
+  | "brown"
+  | "burlywood"
+  | "cadetblue"
+  | "chartreuse"
+  | "chocolate"
+  | "coral"
+  | "cornflowerblue"
+  | "cornsilk"
+  | "crimson"
+  | "cyan"
+  | "darkblue"
+  | "darkcyan"
+  | "darkgoldenrod"
+  | "darkgray"
+  | "darkgreen"
+  | "darkgrey"
+  | "darkkhaki"
+  | "darkmagenta"
+  | "darkolivegreen"
+  | "darkorange"
+  | "darkorchid"
+  | "darkred"
+  | "darksalmon"
+  | "darkseagreen"
+  | "darkslateblue"
+  | "darkslategray"
+  | "darkslategrey"
+  | "darkturquoise"
+  | "darkviolet"
+  | "deeppink"
+  | "deepskyblue"
+  | "dimgray"
+  | "dimgrey"
+  | "dodgerblue"
+  | "firebrick"
+  | "floralwhite"
+  | "forestgreen"
+  | "gainsboro"
+  | "ghostwhite"
+  | "gold"
+  | "goldenrod"
+  | "greenyellow"
+  | "grey"
+  | "honeydew"
+  | "hotpink"
+  | "indianred"
+  | "indigo"
+  | "ivory"
+  | "khaki"
+  | "lavender"
+  | "lavenderblush"
+  | "lawngreen"
+  | "lemonchiffon"
+  | "lightblue"
+  | "lightcoral"
+  | "lightcyan"
+  | "lightgoldenrodyellow"
+  | "lightgray"
+  | "lightgreen"
+  | "lightgrey"
+  | "lightpink"
+  | "lightsalmon"
+  | "lightseagreen"
+  | "lightskyblue"
+  | "lightslategray"
+  | "lightslategrey"
+  | "lightsteelblue"
+  | "lightyellow"
+  | "limegreen"
+  | "linen"
+  | "magenta"
+  | "mediumaquamarine"
+  | "mediumblue"
+  | "mediumorchid"
+  | "mediumpurple"
+  | "mediumseagreen"
+  | "mediumslateblue"
+  | "mediumspringgreen"
+  | "mediumturquoise"
+  | "mediumvioletred"
+  | "midnightblue"
+  | "mintcream"
+  | "mistyrose"
+  | "moccasin"
+  | "navajowhite"
+  | "oldlace"
+  | "olivedrab"
+  | "orangered"
+  | "orchid"
+  | "palegoldenrod"
+  | "palegreen"
+  | "paleturquoise"
+  | "palevioletred"
+  | "papayawhip"
+  | "peachpuff"
+  | "peru"
+  | "pink"
+  | "plum"
+  | "powderblue"
+  | "rosybrown"
+  | "royalblue"
+  | "saddlebrown"
+  | "salmon"
+  | "sandybrown"
+  | "seagreen"
+  | "seashell"
+  | "sienna"
+  | "skyblue"
+  | "slateblue"
+  | "slategray"
+  | "slategrey"
+  | "snow"
+  | "springgreen"
+  | "steelblue"
+  | "tan"
+  | "thistle"
+  | "tomato"
+  | "turquoise"
+  | "violet"
+  | "wheat"
+  | "whitesmoke"
+  | "yellowgreen"
+  | "rebeccapurple"

package/src/units/index.ts

@@ -0,0 +1,6 @@
+export type { StripUnit } from "./stripUnit"
+export { default as stripUnit } from "./stripUnit"
+export type { Value } from "./value"
+export { default as value } from "./value"
+export type { Values } from "./values"
+export { default as values } from "./values"

package/src/units/stripUnit.ts

@@ -0,0 +1,25 @@
+type Value<V> = V extends string ? number : V
+type Unit<V> = V extends string ? string : undefined
+
+export type StripUnit = <V extends string | number, UR extends boolean = false>(
+  value: V,
+  unitReturn?: UR,
+) => UR extends true ? [Value<V>, Unit<V>] : Value<V>
+
+const stripUnit = ((value: string | number, unitReturn?: boolean) => {
+  const cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/
+
+  if (typeof value !== "string") return unitReturn ? [value, undefined] : value
+
+  const matchedValue = value.match(cssRegex)
+
+  if (unitReturn) {
+    if (matchedValue) return [parseFloat(value), matchedValue[2]]
+    return [value, undefined]
+  }
+
+  if (matchedValue) return parseFloat(value)
+  return value
+}) as StripUnit
+
+export default stripUnit

package/src/units/value.ts

@@ -0,0 +1,47 @@
+import stripUnit from "./stripUnit"
+
+type CssUnits =
+  | "px"
+  | "rem"
+  | "%"
+  | "em"
+  | "ex"
+  | "cm"
+  | "mm"
+  | "in"
+  | "pt"
+  | "pc"
+  | "ch"
+  | "vh"
+  | "vw"
+  | "vmin"
+  | "vmax"
+
+const isNotValue = (val: unknown) => !val && val !== 0
+
+export type Value = (
+  param: string | number | null | undefined,
+  rootSize?: number,
+  outputUnit?: CssUnits,
+) => string | number | null
+
+const value: Value = (param, rootSize = 16, outputUnit = "rem"): string | number | null => {
+  if (isNotValue(param)) return null
+
+  // After the guard above, param is guaranteed to be string | number (non-null)
+  const p = param as string | number
+
+  const [val, unit] = stripUnit(p as string, true)
+  if (isNotValue(val)) return null
+  if (val === 0 || typeof val === "string") return p
+
+  const canConvert = rootSize && !Number.isNaN(val)
+  if (canConvert && !unit && outputUnit === "px") return `${val}${outputUnit}`
+  if (canConvert && !unit) return `${val / rootSize}rem`
+  if (canConvert && unit === "px" && outputUnit === "rem") return `${val / rootSize}rem`
+  if (unit) return p
+
+  return `${val}${outputUnit}`
+}
+
+export default value