A CSS in JS micro-tool that's < 1kb (gzipped).
Usage:
const MyComponent = (props) => {
return (| const MIN_CONTEXT_SIZE = 4096 | |
| const MAX_CONTEXT_SIZE = MIN_CONTEXT_SIZE * 8 | |
| /** | |
| * Calculates the context size for a given set of messages, generically | |
| * in tokens. | |
| * | |
| * @param messages - The messages to calculate the context size for. | |
| * @param maxContextSize - The maximum context size to return. Defaults to MAX_CONTEXT_SIZE. | |
| * @returns The context size in tokens. |
| @media (hover: hover) { | |
| /* Enable CSS tooltips in a parent element */ | |
| .enable-css-tooltips { | |
| [data-tooltip] { | |
| position: relative !important; | |
| } | |
| [data-tooltip]:hover::after, | |
| [data-tooltip]:focus::after { | |
| contain: paint; |
| import { useEffect, useMemo } from "react" // or "preact/hooks" | |
| type ConstructorParams<T extends new (...args: any) => any> = T extends new ( | |
| ...args: infer P | |
| ) => any | |
| ? P | |
| : never | |
| /** | |
| * A simple view controller react hook. This hook will create a new |
| interface PathProvider { | |
| getPath(): string | |
| setPath(path: string): void | |
| onPathChange(callback: (path: string) => void): void | |
| } | |
| interface CurrentMatch { | |
| path: string | |
| route: Route | null | |
| params: Record<string, string> |
| type LogEntry = { | |
| messages: any[], | |
| level: 'pass' | 'fail' | 'error' | |
| } | |
| class Logger { | |
| messages: LogEntry[] = [] | |
| get total() { | |
| return this.messages.length |
| import { createMemo, JSX, splitProps } from "solid-js" | |
| import { Dynamic } from 'solid-js/web' | |
| type CssComponent<T extends keyof JSX.IntrinsicElements> = (props: JSX.IntrinsicElements[T]) => JSX.Element | |
| export function component(styles: string): (props: JSX.IntrinsicElements['div']) => JSX.Element | |
| export function component<T extends keyof JSX.IntrinsicElements>(tag: T | string | CssComponent<any>, styles: string): (props: JSX.IntrinsicElements[T]) => JSX.Element | |
| export function component<T extends keyof JSX.IntrinsicElements>(tag?: string | T | CssComponent<any>, styles?: string): CssComponent<any> { | |
| let extraClassNames = '' | |
| if (!styles) { |
| import { JSX } from "solid-js" | |
| import { Dynamic } from 'solid-js/web' | |
| export interface ComponentProps { children?: any, className?: string, [attr: string]: any } | |
| export type CssComponent = (props: ComponentProps) => JSX.Element | |
| export function component(styles: string): CssComponent | |
| export function component(tag: string | CssComponent, styles: string): CssComponent | |
| export function component(tag?: string | CssComponent, styles?: string): CssComponent { | |
| let extraClassNames = '' |
| interface IConfiguration { | |
| append: 'each' | 'batch' | |
| debug: boolean | |
| appendTo: Element | |
| replaceRegExp: RegExp | |
| } | |
| let _namePrefix = 'css' | |
| let _pendingStyles: string | null = null | |
| let _config: IConfiguration = { |
| import { useEffect, useMemo, useRef } from "preact/hooks" | |
| type PropsChangeMode = 'notify' | 'recycle' | 'smart' | |
| interface IControllerClass<T, P> { | |
| new(props: P): T | |
| dispose?: () => void | |
| propsDidChange?: (props: P) => void | |
| } | |
| /** |