@pyreon/unistyle 0.11.4 → 0.11.6

package/src/styles/alignContent.ts

@@ -1,33 +1,33 @@
-import { isEmpty } from "@pyreon/ui-core"
+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",
+  center: 'center',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  block: 'stretch',
 }
 
 export const ALIGN_CONTENT_MAP_X = {
-  left: "flex-start",
-  right: "flex-end",
+  left: 'flex-start',
+  right: 'flex-end',
   ...ALIGN_CONTENT_MAP_SHARED,
 } as const
 
 export const ALIGN_CONTENT_MAP_Y = {
-  top: "flex-start",
-  bottom: "flex-end",
+  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",
+  inline: 'row',
+  reverseInline: 'row-reverse',
+  rows: 'column',
+  reverseRows: 'column-reverse',
 } as const
 
 export type AlignContent = ({
@@ -47,7 +47,7 @@ const alignContent: AlignContent = (attrs) => {
     return null
   }
 
-  const isReverted = ["inline", "reverseInline"].includes(direction)
+  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]

package/src/styles/extendCss.ts

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

package/src/styles/index.ts

@@ -3,14 +3,14 @@ export type {
   AlignContentAlignXKeys,
   AlignContentAlignYKeys,
   AlignContentDirectionKeys,
-} from "./alignContent"
+} 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"
+} 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

@@ -1,4 +1,4 @@
-import { value } from "../../units"
+import { value } from '../../units'
 
 type PropertyValue = string | number | null | undefined
 type PV = PropertyValue
@@ -62,14 +62,14 @@ const formatShorthand = (corners: PV[], calc: (p: PV) => any) => {
 }
 
 const CORNER_CSS = [
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-bottom-right-radius",
-  "border-bottom-left-radius",
+  '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 = ""
+  let output = ''
   for (let i = 0; i < corners.length; i++) {
     if (isValidValue(corners[i])) output += `${CORNER_CSS[i]}: ${calc(corners[i])};`
   }

package/src/styles/shorthands/edge.ts

@@ -1,27 +1,27 @@
-import { value } from "../../units"
+import { value } from '../../units'
 
 type CssUnits =
-  | "px"
-  | "rem"
-  | "%"
-  | "em"
-  | "ex"
-  | "cm"
-  | "mm"
-  | "in"
-  | "pt"
-  | "pc"
-  | "ch"
-  | "vh"
-  | "vw"
-  | "vmin"
-  | "vmax"
+  | '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 Property = 'inset' | 'margin' | 'padding' | 'border-width' | 'border-style' | 'border-color'
 type Value = string | number | null | undefined
-type Side = "top" | "bottom" | "left" | "right"
+type Side = 'top' | 'bottom' | 'left' | 'right'
 
 type EdgeValues = {
   full: Value
@@ -36,12 +36,12 @@ type EdgeValues = {
 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` },
+  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) =>
@@ -84,11 +84,11 @@ const formatIndividual = (
   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)};`
+  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
 }
 

package/src/styles/shorthands/index.ts

@@ -1,4 +1,4 @@
-export type { BorderRadius } from "./borderRadius"
-export { default as borderRadius } from "./borderRadius"
-export type { Edge } from "./edge"
-export { default as edge } from "./edge"
+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/index.ts

@@ -1,8 +1,8 @@
-import { values } from "../../units"
-import { borderRadius, edge } from "../shorthands"
-import processDescriptor from "./processDescriptor"
-import propertyMap from "./propertyMap"
-import type { InnerTheme, Theme } from "./types"
+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 }
 
@@ -27,7 +27,7 @@ const styles: Styles = ({ theme: t, css, rootSize }) => {
     processDescriptor(d, t, css, calc, shorthand, borderRadiusFn),
   )
 
-  return fragments.filter(Boolean).join(" ")
+  return fragments.filter(Boolean).join(' ')
 }
 
 export default styles

package/src/styles/styles/processDescriptor.ts

@@ -1,8 +1,8 @@
-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"
+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>
@@ -10,39 +10,39 @@ 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 toCssDecl = (css: string, v: unknown) => (v == null ? '' : `${css}: ${v};`)
 
 const processSpecial = (
-  d: Extract<PropertyDescriptor, { kind: "special" }>,
+  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 'fullScreen':
+      if (!t.fullScreen) return ''
+      return 'position: fixed; top: 0; left: 0; right: 0; bottom: 0;'
 
-    case "backgroundImage":
-      if (!t.backgroundImage) return ""
+    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 '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 'hideEmpty':
+      if (!t.hideEmpty) return ''
+      return '&:empty { display: none; }'
 
-    case "clearFix":
-      if (!t.clearFix) return ""
+    case 'clearFix':
+      if (!t.clearFix) return ''
       return '&::after { clear: both; content: ""; display: table; }'
 
-    case "extendCss":
-      return (t.extendCss as string) ?? ""
+    case 'extendCss':
+      return (t.extendCss as string) ?? ''
 
     default:
-      return ""
+      return ''
   }
 }
 
@@ -55,16 +55,16 @@ const processDescriptor = (
   borderRadiusFn: ReturnType<BorderRadius>,
 ): string => {
   switch (d.kind) {
-    case "simple":
+    case 'simple':
       return toCssDecl(d.css, t[d.key])
 
-    case "convert":
+    case 'convert':
       return toCssDecl(d.css, calc(t[d.key]))
 
-    case "convert_fallback":
+    case 'convert_fallback':
       return toCssDecl(d.css, calc(...d.keys.map((k) => t[k])))
 
-    case "edge":
+    case 'edge':
       return (
         shorthand(d.property, {
           full: t[d.keys.full] as Value,
@@ -74,10 +74,10 @@ const processDescriptor = (
           left: t[d.keys.left] as Value,
           bottom: t[d.keys.bottom] as Value,
           right: t[d.keys.right] as Value,
-        }) ?? ""
+        }) ?? ''
       )
 
-    case "border_radius":
+    case 'border_radius':
       return (
         borderRadiusFn({
           full: t[d.keys.full] as Value,
@@ -89,10 +89,10 @@ const processDescriptor = (
           topRight: t[d.keys.topRight] as Value,
           bottomLeft: t[d.keys.bottomLeft] as Value,
           bottomRight: t[d.keys.bottomRight] as Value,
-        }) ?? ""
+        }) ?? ''
       )
 
-    case "special":
+    case 'special':
       return processSpecial(d, t)
   }
 }