dkirchhof/rescript-css-vars

rescript-css-vars

How to use

1. Define a record or object with all css variables.

type colors = {
  fg: string,
  bg: string,
}

type fontSizes = {
  normal: string,
  big: string,
}

type theme = {colors: colors, fontSizes: fontSizes}

2. Use the make function to set all values.

let (values, vars) = CssVars.make({
  colors: {
    fg: "black",
    bg: "white",
  },
  fontSizes: {
    normal: "1rem",
    big: "1.5rem",
  },
})

3. Inject the values string e.g. into the :root pseudo class.

:root {
  ${values}
}

4. Use the vars record / object to get a css var.

body {
  color: ${vars.colors.fg};
}

Example output:

:root {
  --colors-fg: white;
  --colors-bg: black;
  --fontSizes-normal: 1rem;
  --fontSizes-big: 1.5rem;
}

body {
  color: var(--colors-fg);
}