TS CSSVars - API Reference
TS CSSVars - API Reference
Table of contents
Interfaces
Type Aliases
Functions
Type Aliases
CssVars
Ƭ CssVars<T>: T extends `${string}–${string}:${string};${infer R}` ? VarKey<T> | CssVars<R> : VarKey<T>
Recursively extracts and joins the names of the css varriables from a string
Type parameters
| Name | Type |
|---|---|
T |
extends string |
Defined in
MergeVars
Ƭ MergeVars<T>: T extends [infer H, …(infer R)] ? H extends CssVarContext<infer T2> ? R extends NonEmptyArray<CssVarContext<string>> ? MergeVars<R> extends CssVarContext<infer T3> ? CssVarContext<`${T2}${T3}`> : never : H : never : never
Recursively merge all CssVarContext on an array into a single CssVarContext.
Type parameters
| Name | Type |
|---|---|
T |
extends NonEmptyArray<CssVarContext<string>> |
Defined in
NonEmptyArray
Ƭ NonEmptyArray<T>: [T, …T[]]
Helpful alias to define arrays which contain at leas one element.
Type parameters
| Name |
|---|
T |
Defined in
VarKey
Ƭ VarKey<T>: T extends `${string}–${infer K1}:${string};${string}` ? K1 : never
Extracts the name of a single css varriable from a string
Type parameters
| Name | Type |
|---|---|
T |
extends string |
Defined in
Functions
makeCssVars
▸ makeCssVars<T>(definitions): CssVarContext<T>
Creates a CssVarContext object with the passed css variable definitions.
This context contains the cssvar(..) function used to reference the css
variables from the context, the overwrite(..) function used to reassign
the value of css variables in the context, and the definitions value which
is the raw css variable definitions of the context.
Note: The css variable must start with -- for the type system to work.
Type parameters
| Name | Type |
|---|---|
T |
extends string |
Parameters
| Name | Type | Description |
|---|---|---|
definitions |
T |
a raw string including the css variable definitions |
Returns
a CssVarContext object for the defined css varibles
Example
const { cssvar, definitions, overwrite } = makeCssVars(`
--gap: 5%;
--nav-width: 500;
`);
const GlobalStyle = css`
:root {
${definitions}
\@media screen and (min-width: 480px) {
${overwrite("gap", "1%")};
${overwrite("nav-width", 200)};
}
}
nav > .container {
padding: ${cssvar("gap")};
width: ${cssvar("nav-width")}px;
}
`;
See
Defined in
mergeCssVars
▸ mergeCssVars<T>(...cssVars): MergeVars<T>
Merges two or more CssVarContext object into a single context. Usefull to
make the css variable definitions modular and use the all together from a
single place.
Type parameters
| Name | Type |
|---|---|
T |
extends NonEmptyArray<CssVarContext<string>> |
Parameters
| Name | Type | Description |
|---|---|---|
...cssVars |
T |
the CssVarContext objects to merge |
Returns
MergeVars<T>
a merged CssVarContext object
Example
export const baseCssVars = makeCssVars(`
--primary-color: red;
--secondary-color: blue;
`);
export const navCssVars = makeCssVars(`
--gap: 5%;
--nav-width: 500;
`);
export const mainCssVars = mergeCssVars(baseCssVars, navCssVars);