Function: 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

• T extends string

Parameters

• definitions: T

a raw string including the css variable definitions

Returns

CssVarContext<T>

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

lib/makeCssVars.ts:105