@slimr/styled 2.1.77 → 2.1.81

package/src/core.ts

@@ -1,69 +1,71 @@
 /* eslint-disable prefer-const */
-import {ShorthandProps, classJoin, css} from '@slimr/css'
+import { classJoin, css, type ShorthandProps } from "@slimr/css"
 
-import {toKebabCase} from '@slimr/util'
-import {CSSProperties, FC, HTMLAttributes, createElement, forwardRef} from 'react'
+import { toKebabCase } from "@slimr/util"
+import { type CSSProperties, createElement, type FC, forwardRef, type HTMLAttributes } from "react"
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type allowableAny = any
 
 /** A type that represents all the css properties + shorthand props + any css variable */
 export interface ZxProps
-  extends CSSProperties,
-    ShorthandProps,
-    Record<`--${string}`, number | string | undefined> {}
+	extends Omit<CSSProperties, "d">,
+		ShorthandProps,
+		Record<`--${string}`, number | string | undefined> {}
 type ZxP = ZxProps
 
 type Zx = {
-  [k in keyof ZxP]:
-    | ZxP[k]
-    | [ZxP[k] | null, ZxP[k]]
-    | [ZxP[k] | null, ZxP[k] | null, ZxP[k]]
-    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
-    | [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
-    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
-    | [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+	[k in keyof ZxP]:
+		| ZxP[k]
+		| [ZxP[k] | null, ZxP[k]]
+		| [ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+		| [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+		| [ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+		| [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
+		| [ZxP[k], ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k] | null, ZxP[k]]
 }
 
 type _Props = {
-  [k in keyof Zx as `_${k}`]?: Zx[k]
+	[k in keyof Zx as `_${k}`]?: Zx[k]
 }
 
 export interface SCProps extends _Props {
-  /** Like zx prop, but applies only on :active */
-  _active?: Zx
-  className?: string
-  /** A string of css or classname to be added to the component */
-  _css?: string
-  /** Like zx prop, but applies only when user prefers dark theme */
-  _dark?: Zx
-  /** Like zx prop, but applies only on :focus */
-  _focus?: Zx
-  /** Like zx prop, but applies only on :focus-visible */
-  _focusVisible?: Zx
-  /** Like zx prop, but applies only on :focus-within */
-  _focusWithin?: Zx
-  /** Like zx prop, but applies only on :hover */
-  _hover?: Zx
-  /** Like zx prop, but applies only when user prefers dark theme */
-  _light?: Zx
-  /** Standard style prop */
-  style?: CSSProperties
-  /** Like zx prop, but applies only on :target */
-  _target?: Zx
-  /** Like zx prop, but applies only on :visited */
-  _visited?: Zx
-  /**
-   * Like style prop, but enhanced with features like chakra
-   *  - Array values are converted to media query breakpoints
-   *  - Numbers are converted to px
-   *  - Shorthand props are supported
-   */
-  _zx?: Zx
+	/** Like zx prop, but applies only on :active */
+	_active?: Zx
+	className?: string
+	/** A string of css or classname to be added to the component */
+	_css?: string
+	/** Like zx prop, but applies only when user prefers dark theme */
+	_dark?: Zx
+	/** Like zx prop, but applies only on :focus */
+	_focus?: Zx
+	/** Like zx prop, but applies only on :focus-visible */
+	_focusVisible?: Zx
+	/** Like zx prop, but applies only on :focus-within */
+	_focusWithin?: Zx
+	/** Like zx prop, but applies only on :hover */
+	_hover?: Zx
+	/** Like zx prop, but applies only when user prefers dark theme */
+	_light?: Zx
+	/** Standard style prop */
+	style?: CSSProperties
+	/** Like zx prop, but applies only on :target */
+	_target?: Zx
+	/** Like zx prop, but applies only on :visited */
+	_visited?: Zx
+	/**
+	 * Like style prop, but enhanced with features like chakra
+	 *  - Array values are converted to media query breakpoints
+	 *  - Numbers are converted to px
+	 *  - Shorthand props are supported
+	 */
+	_zx?: Zx
 }
 
 /** Styled Component: Like FunctionalComponent but adds SCProps */
-export type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}> = FC<T & SCProps>
+export type SC<T extends { className?: HTMLAttributes<allowableAny>["className"] }> = FC<
+	T & SCProps
+>
 
 /**
  * The core functionality of the exported `styled` Object.
@@ -71,119 +73,119 @@ export type SC<T extends {className?: HTMLAttributes<allowableAny>['className']}
  * Not intended to be used directly. Instead, use the `styled` object.
  */
 export function styledBase<C extends FC<allowableAny>>(Component: C) {
-  return (...cssProps: Parameters<typeof css>) => {
-    const className = css(...cssProps)
-    /**
-     * A functional component that accepts Styled Props
-     */
-    const CStyled = forwardRef(function CStyled(props: SCProps, ref) {
-      let {
-        _active,
-        _css,
-        _dark,
-        _focus,
-        _focusVisible,
-        _focusWithin,
-        _hover,
-        _light,
-        _target,
-        _visited,
-        _zx = {},
-        ...rest
-      } = props
+	return (...cssProps: Parameters<typeof css>) => {
+		const className = css(...cssProps)
+		/**
+		 * A functional component that accepts Styled Props
+		 */
+		const CStyled = forwardRef(function CStyled(props: SCProps, ref) {
+			const {
+				_active,
+				_css,
+				_dark,
+				_focus,
+				_focusVisible,
+				_focusWithin,
+				_hover,
+				_light,
+				_target,
+				_visited,
+				_zx = {},
+				...rest
+			} = props
 
-      // Pluck out $ prefixed props
-      Object.entries(props).forEach(([k, v]) => {
-        if (k.startsWith('_')) {
-          // @ts-expect-error - We know the key exists but ts doesn't
-          _zx[k.slice(1)] = v
-          // @ts-expect-error - We know the key exists but ts doesn't
-          delete rest[k]
-        }
-      })
+			// Pluck out $ prefixed props
+			Object.entries(props).forEach(([k, v]) => {
+				if (k.startsWith("_")) {
+					// @ts-expect-error - We know the key exists but ts doesn't
+					_zx[k.slice(1)] = v
+					// @ts-expect-error - We know the key exists but ts doesn't
+					delete rest[k]
+				}
+			})
 
-      let cssStr = ''
+			let cssStr = ""
 
-      if (_active) {
-        cssStr += `
+			if (_active) {
+				cssStr += `
           &:active {
           ${zxToCss(_active)}
           }
         `
-      }
-      if (_dark) {
-        cssStr += `
+			}
+			if (_dark) {
+				cssStr += `
           @media (prefers-color-scheme: dark) {
           ${zxToCss(_dark)}
           }
         `
-      }
-      if (_focus) {
-        cssStr += `
+			}
+			if (_focus) {
+				cssStr += `
           &:focus {
           ${zxToCss(_focus)}
           }
         `
-      }
-      if (_focusVisible) {
-        cssStr += `
+			}
+			if (_focusVisible) {
+				cssStr += `
           &:focus-visible {
           ${zxToCss(_focusVisible)}
           }
         `
-      }
-      if (_focusWithin) {
-        cssStr += `
+			}
+			if (_focusWithin) {
+				cssStr += `
           &:focus-within {
           ${zxToCss(_focusWithin)}
           }
         `
-      }
-      if (_hover) {
-        cssStr += `
+			}
+			if (_hover) {
+				cssStr += `
           &:hover {
           ${zxToCss(_hover)}
           }
         `
-      }
-      if (_light) {
-        cssStr += `
+			}
+			if (_light) {
+				cssStr += `
           @media (prefers-color-scheme: light) {
           ${zxToCss(_light)}
           }
         `
-      }
-      if (_target) {
-        cssStr += `
+			}
+			if (_target) {
+				cssStr += `
           &:target {
           ${zxToCss(_target)}
           }
         `
-      }
-      if (_visited) {
-        cssStr += `
+			}
+			if (_visited) {
+				cssStr += `
           &:visited {
           ${zxToCss(_visited)}
           }
         `
-      }
+			}
 
-      cssStr = zxToCss(_zx) + cssStr
+			cssStr = zxToCss(_zx) + cssStr
 
-      return createElement(Component, {
-        ref,
-        ...rest,
-        className: classJoin(
-          className,
-          _css ? (_css.includes(':') ? css(_css) : _css) : undefined,
-          cssStr ? css(cssStr) : undefined,
-          props.className
-        ),
-      })
-    })
-    CStyled.toString = () => '.' + className
-    return CStyled as unknown as SC<Parameters<C>[0]>
-  }
+			return createElement(Component, {
+				ref,
+				...rest,
+				className: classJoin(
+					className,
+					_css ? (_css.includes(":") ? css(_css) : _css) : undefined,
+					cssStr ? css(cssStr) : undefined,
+					props.className,
+				),
+			})
+		})
+		CStyled.toString = () => `.${className}`
+		return CStyled as unknown as SC<Parameters<C>[0]>
+	}
 }
 
 /**********************
@@ -192,16 +194,16 @@ export function styledBase<C extends FC<allowableAny>>(Component: C) {
 
 /** Converts a zx prop into css string */
 function zxToCss(zx: Zx): string {
-  return Object.entries(zx)
-    .map(([k, v]) => {
-      if (!v) return ''
-      k = toKebabCase(k)
-      if (typeof v === 'number') v = v + 'px'
-      if (Array.isArray(v)) {
-        // @ts-expect-error - TS gets confused by the complexity
-        v = '[' + v.map(v => (typeof v === 'number' ? v + 'px' : v)).join(',') + ']'
-      }
-      return k + ':' + v + ';'
-    })
-    .join('\n')
+	return Object.entries(zx)
+		.map(([k, v]) => {
+			if (!v) return ""
+			k = toKebabCase(k)
+			if (typeof v === "number") v = `${v}px`
+			if (Array.isArray(v)) {
+				// @ts-expect-error - TS gets confused by the complexity
+				v = `[${v.map((v) => (typeof v === "number" ? `${v}px` : v)).join(",")}]`
+			}
+			return `${k}:${v};`
+		})
+		.join("\n")
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-export * from '@slimr/css'
-export * from './core.js'
-export * from './primitives.js'
-export * from './styled.js'
+export * from "@slimr/css"
+export * from "./core.js"
+export * from "./primitives.js"
+export * from "./styled.js"

package/src/primitives.ts

@@ -1,4 +1,4 @@
-import {styled} from './styled.js'
+import { styled } from "./styled.js"
 
 /** A decorated HTML Element. See [npm](https://www.npmjs.com/package/@slimr/styled) for more info. */
 export const A = styled.a``