@typed/css

Strongly typed atomic CSS using @typed/hooks

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

AnimationName

AnimationName: NewType<string, "AnimationName">

ClassName

ClassName: NewType<string, "ClassName">

Css

Css: NewType<string, "Css">

CssEnv

CssEnv: { classNameLength?: undefined | number; classNamePrefix?: undefined | string; rules: Rules; styleSheet: { textContent: string | null } }

Type declaration

Optional Readonly classNameLength?: undefined | number
Optional Readonly classNamePrefix?: undefined | string
Readonly rules: Rules
Readonly styleSheet: { textContent: string | null }
- textContent: string | null

CssSelector

CssSelector: NewType<string, "CssSelector">

CssTestEnv

CssTestEnv: VirtualTimerEnv & UuidEnv & CssEnv & HooksManagerEnv & HookEnv & CryptoEnv & CryptoFailure & LoggerEnv

FromToKeyFrame

FromToKeyFrame: { from: CssProperties; to: CssProperties }

Type declaration

Readonly from: CssProperties
Readonly to: CssProperties

GenerateAnimationName

GenerateAnimationName<E>: (keyframes: KeyFrame) => Effects<E, AnimationName>

Given a set of keyframes, generates an animation name

Type parameters

Type declaration

- (keyframes: KeyFrame): Effects<E, AnimationName>
- Parameters
  - keyframes: KeyFrame
  Returns Effects<E, AnimationName>

GenerateClassName

GenerateClassName<E>: (...properties: ReadonlyArray<NestedCssProperties | null | undefined | false>) => Effects<E, ClassName>

Given a set of class names should output a set of class names to apply

Type parameters

Type declaration

- (...properties: ReadonlyArray<NestedCssProperties | null | undefined | false>): Effects<E, ClassName>
- Parameters
  - Rest ...properties: ReadonlyArray<NestedCssProperties | null | undefined | false>
  Returns Effects<E, ClassName>

GetClassNames

GetClassNames: (...classNames: ReadonlyArray<string | ClassName | null | undefined | false>) => ClassName

Given a list of class names or other common patterns like "foo && ClassName".

Type declaration

- (...classNames: ReadonlyArray<string | ClassName | null | undefined | false>): ClassName
- Parameters
  - Rest ...classNames: ReadonlyArray<string | ClassName | null | undefined | false>
  Returns ClassName

GetCss

GetCss: (rules: Rules) => Css

Type declaration

- (rules: Rules): Css
- Parameters
  - rules: Rules
  Returns Css

GetCssSelector

GetCssSelector: (className: ClassName) => CssSelector

Converts a className into a CssSelector

Type declaration

- (className: ClassName): CssSelector
- Parameters
  - className: ClassName
  Returns CssSelector

KeyFrame

KeyFrame: FromToKeyFrame | PercentageKeyFrame

MediaQuery

MediaQuery: { maxHeight?: number | string; maxWidth?: number | string; minHeight?: number | string; minWidth?: number | string; orientation?: "landscape" | "portrait"; type?: "screen" | "print" | "all" }

Type declaration

Optional Readonly maxHeight?: number | string
Optional Readonly maxWidth?: number | string
Optional Readonly minHeight?: number | string
Optional Readonly minWidth?: number | string
Optional Readonly orientation?: "landscape" | "portrait"
Optional Readonly type?: "screen" | "print" | "all"

PercentageKeyFrame

PercentageKeyFrame: Readonly<Partial<{ 0%: CssProperties; 1%: CssProperties; 10%: CssProperties; 100%: CssProperties; 11%: CssProperties; 12%: CssProperties; 13%: CssProperties; 14%: CssProperties; 15%: CssProperties; 16%: CssProperties; 17%: CssProperties; 18%: CssProperties; 19%: CssProperties; 2%: CssProperties; 20%: CssProperties; 21%: CssProperties; 22%: CssProperties; 23%: CssProperties; 24%: CssProperties; 25%: CssProperties; 26%: CssProperties; 27%: CssProperties; 28%: CssProperties; 29%: CssProperties; 3%: CssProperties; 30%: CssProperties; 31%: CssProperties; 32%: CssProperties; 33%: CssProperties; 34%: CssProperties; 35%: CssProperties; 36%: CssProperties; 37%: CssProperties; 38%: CssProperties; 39%: CssProperties; 4%: CssProperties; 40%: CssProperties; 41%: CssProperties; 42%: CssProperties; 43%: CssProperties; 44%: CssProperties; 45%: CssProperties; 46%: CssProperties; 47%: CssProperties; 48%: CssProperties; 49%: CssProperties; 5%: CssProperties; 50%: CssProperties; 51%: CssProperties; 52%: CssProperties; 53%: CssProperties; 54%: CssProperties; 55%: CssProperties; 56%: CssProperties; 57%: CssProperties; 58%: CssProperties; 59%: CssProperties; 6%: CssProperties; 60%: CssProperties; 61%: CssProperties; 62%: CssProperties; 63%: CssProperties; 64%: CssProperties; 65%: CssProperties; 66%: CssProperties; 67%: CssProperties; 68%: CssProperties; 69%: CssProperties; 7%: CssProperties; 70%: CssProperties; 71%: CssProperties; 72%: CssProperties; 73%: CssProperties; 74%: CssProperties; 75%: CssProperties; 76%: CssProperties; 77%: CssProperties; 78%: CssProperties; 79%: CssProperties; 8%: CssProperties; 80%: CssProperties; 81%: CssProperties; 82%: CssProperties; 83%: CssProperties; 84%: CssProperties; 85%: CssProperties; 86%: CssProperties; 87%: CssProperties; 88%: CssProperties; 89%: CssProperties; 9%: CssProperties; 90%: CssProperties; 91%: CssProperties; 92%: CssProperties; 93%: CssProperties; 94%: CssProperties; 95%: CssProperties; 96%: CssProperties; 97%: CssProperties; 98%: CssProperties; 99%: CssProperties }>>

Rule

Rule: keyof [ClassName | AnimationName, Css]

Rules

Rules: Map<string, Rule>

VirtualTimerEnv

VirtualTimerEnv: { timer: VirtualTimer }

Type declaration

Readonly timer: VirtualTimer

Variables

Const AND_REGEX

AND_REGEX: RegExp = /^&/

Const CLASS_NAME_ESCAPE_REGEX

CLASS_NAME_ESCAPE_REGEX: RegExp = /[ !#$%&()*+,./;<=>?@[\]^`{|}~"'\\]/g

Const CLASS_NAME_ESCAPE_REPLACEMENT

CLASS_NAME_ESCAPE_REPLACEMENT: "\$&" = "\$&"

Const CSS_PROPERTIES_WITHOUT_UNIT

CSS_PROPERTIES_WITHOUT_UNIT: any = Object.fromEntries(['animationIterationCount','boxFlex','boxFlexGroup','boxOrdinalGroup','columnCount','fillOpacity','flex','flexGrow','flexPositive','flexShrink','flexNegative','flexOrder','fontWeight','lineClamp','lineHeight','opacity','order','orphans','stopOpacity','strokeDashoffset','strokeOpacity','strokeWidth','tabSize','widows','zIndex','zoom',].map((key) => [key, true] as const),)

Const DEFAULT_CLASS_NAME_LENGTH

DEFAULT_CLASS_NAME_LENGTH: 6 = 6

Const DEFAULT_CLASS_NAME_PREFIX

DEFAULT_CLASS_NAME_PREFIX: "t" = "t"

Const HYPHENATE_REGEX

HYPHENATE_REGEX: RegExp = /[A-Z]|^ms/g

Const HYPHENATE_REPLACEMENT

HYPHENATE_REPLACEMENT: "-$&" = "-$&"

Functions

Const classNames

classNames(...classNames: ReadonlyArray<undefined | null | string | false | (string & { __TYPE__: Type })>): string & { __TYPE__: Type }

- Defined in packages/css/source/infrastructure/classNames.ts:6
Parameters
- Rest ...classNames: ReadonlyArray<undefined | null | string | false | (string & { __TYPE__: Type })>
Returns string & { __TYPE__: Type }

convertToHex

convertToHex(str: string): string

- Defined in packages/css/source/infrastructure/helpers.ts:75
Ensure a hexadecimal

Parameters
- str: string
Returns string

createCssEnv

createCssEnv(options?: Partial<CssEnv>): CssEnv

- Defined in packages/css/source/infrastructure/createCssEnv.ts:3
Parameters
- Default value options: Partial<CssEnv> = {}
Returns CssEnv

escape

escape(str: string): ClassName

- Defined in packages/css/source/infrastructure/helpers.ts:68
Escape a CSS class name.

Parameters
- str: string
Returns ClassName

generateCssHash

generateCssHash(ruleKey: string): CryptoEffects<CssEnv, string>

- Defined in packages/css/source/infrastructure/helpers.ts:115
Generate a SHA-1 of the ruleKey to produce a className

Parameters
- ruleKey: string
Returns CryptoEffects<CssEnv, string>

Const getCss

getCss(rules: Map<string, [(string & { __TYPE__: Type }) | (string & { __TYPE__: Type }), string & { __TYPE__: Type }]>): string & { __TYPE__: Type }

- Defined in packages/css/source/infrastructure/getCss.ts:6
Parameters
- rules: Map<string, [(string & { __TYPE__: Type }) | (string & { __TYPE__: Type }), string & { __TYPE__: Type }]>
Returns string & { __TYPE__: Type }

Const getCssSelector

getCssSelector(className: ClassName): CssSelector

- Defined in packages/css/source/infrastructure/getCssSelector.ts:6
Parameters
- className: ClassName
Returns CssSelector

Const hyphenate

hyphenate(s: string): string

- Defined in packages/css/source/infrastructure/helpers.ts:57
Parameters
- s: string
Returns string

it

it(does: string, what: (assertions: Assertions & VirtualTimerEnv) => PureEffect<any> | Effects<CssTestEnv, any>): Test

- Defined in packages/css/source/infrastructure/test-helpers.ts:23
Parameters
- does: string
- what: (assertions: Assertions & VirtualTimerEnv) => PureEffect<any> | Effects<CssTestEnv, any>
  - - (assertions: Assertions & VirtualTimerEnv): PureEffect<any> | Effects<CssTestEnv, any>
    - Parameters
      - assertions: Assertions & VirtualTimerEnv
      Returns PureEffect<any> | Effects<CssTestEnv, any>
Returns Test

Const media

media(query: MediaQuery, properties: NestedCssProperties): NestedCssProperties

- Defined in packages/css/source/media.ts:15
Parameters
- query: MediaQuery
- properties: NestedCssProperties
Returns NestedCssProperties

mergeObjects

mergeObjects(properties: ReadonlyArray<NestedCssProperties>): NestedCssProperties

- Defined in packages/css/source/infrastructure/helpers.ts:86
Merge together many NestedCssProperties

Parameters
- properties: ReadonlyArray<NestedCssProperties>
Returns NestedCssProperties

Const notAnd

notAnd(s: string): string

- Defined in packages/css/source/infrastructure/helpers.ts:59
Parameters
- s: string
Returns string

Const shouldNotAddPixels

shouldNotAddPixels(key: string): boolean

- Defined in packages/css/source/infrastructure/helpers.ts:43
Parameters
- key: string
Returns boolean

toArray

toArray<A>(value: A | keyof A[]): ReadonlyArray<A>

- Defined in packages/css/source/infrastructure/helpers.ts:61
Type parameters
- A
Parameters
- value: A | keyof A[]
Returns ReadonlyArray<A>

Const toPx

toPx(sOrN: string | number): string

- Defined in packages/css/source/infrastructure/helpers.ts:55
Parameters
- sOrN: string | number
Returns string

Const useClassName

useClassName(...properties: ReadonlyArray<undefined | null | false | NestedCssProperties>): Generator<Env<HookEnv & { classNameLength?: undefined | number; classNamePrefix?: undefined | string; rules: Rules; styleSheet: { textContent: string | null } } & CryptoEnv & CryptoFailure, any>, string & { __TYPE__: Type }, any>

- Defined in packages/css/source/infrastructure/useClassName.ts:32
Deterministically creates classNames for a series of objects that define the styles to be applied.

Parameters
- Rest ...properties: ReadonlyArray<undefined | null | false | NestedCssProperties>
Returns Generator<Env<HookEnv & { classNameLength?: undefined | number; classNamePrefix?: undefined | string; rules: Rules; styleSheet: { textContent: string | null } } & CryptoEnv & CryptoFailure, any>, string & { __TYPE__: Type }, any>

Const useKeyFrames

useKeyFrames(keyFrames: { from: CssProperties; to: CssProperties } | {}): Generator<Env<HookEnv & { classNameLength?: undefined | number; classNamePrefix?: undefined | string; rules: Rules; styleSheet: { textContent: string | null } } & CryptoEnv & CryptoFailure, any>, string & { __TYPE__: Type }, any>

- Defined in packages/css/source/infrastructure/useKeyFrames.ts:12
Parameters
- keyFrames: { from: CssProperties; to: CssProperties } | {}
Returns Generator<Env<HookEnv & { classNameLength?: undefined | number; classNamePrefix?: undefined | string; rules: Rules; styleSheet: { textContent: string | null } } & CryptoEnv & CryptoFailure, any>, string & { __TYPE__: Type }, any>

@typed/css

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

AnimationName

ClassName

Css

CssEnv

Type declaration

Optional Readonly classNameLength?: undefined | number

Optional Readonly classNamePrefix?: undefined | string

Readonly rules: Rules

Readonly styleSheet: { textContent: string | null }

textContent: string | null

CssSelector

CssTestEnv

FromToKeyFrame

Type declaration

Readonly from: CssProperties

Readonly to: CssProperties

GenerateAnimationName

Type parameters

E

Type declaration

Parameters

keyframes: KeyFrame

Returns Effects<E, AnimationName>

GenerateClassName

Type parameters

E

Type declaration

Parameters

Rest ...properties: ReadonlyArray<NestedCssProperties | null | undefined | false>

Returns Effects<E, ClassName>

GetClassNames

Type declaration

Parameters

Rest ...classNames: ReadonlyArray<string | ClassName | null | undefined | false>

Returns ClassName

GetCss

Type declaration

Parameters

rules: Rules

Returns Css

GetCssSelector

Type declaration

Parameters

className: ClassName

Returns CssSelector

KeyFrame

MediaQuery

Type declaration

Optional Readonly maxHeight?: number | string

Optional Readonly maxWidth?: number | string

Optional Readonly minHeight?: number | string

Optional Readonly minWidth?: number | string

Optional Readonly orientation?: "landscape" | "portrait"

Optional Readonly type?: "screen" | "print" | "all"

PercentageKeyFrame

Rule

Rules

VirtualTimerEnv

Type declaration

Readonly timer: VirtualTimer

Variables

Const AND_REGEX

Const CLASS_NAME_ESCAPE_REGEX

Const CLASS_NAME_ESCAPE_REPLACEMENT

Const CSS_PROPERTIES_WITHOUT_UNIT

Const DEFAULT_CLASS_NAME_LENGTH

Const DEFAULT_CLASS_NAME_PREFIX

Const HYPHENATE_REGEX

Const HYPHENATE_REPLACEMENT

Functions

Const classNames

Parameters

Rest ...classNames: ReadonlyArray<undefined | null | string | false | (string & { __TYPE__: Type })>

Rest ...classNames: ReadonlyArray<undefined | null | string | false | (string & { TYPE: Type })>

Returns string & { TYPE: Type }

rules: Map<string, [(string & { TYPE: Type }) | (string & { TYPE: Type }), string & { TYPE: Type }]>

Returns string & { TYPE: Type }

Returns Generator<Env<HookEnv & { classNameLength?: undefined | number; classNamePrefix?: undefined | string; rules: Rules; styleSheet: { textContent: string | null } } & CryptoEnv & CryptoFailure, any>, string & { TYPE: Type }, any>