@instructure/postcss-themeable-styles

---

category: packages

postcss-themeable-styles

     

For use with @instructure/babel-plugin-themeable-styles, converts CSS variables into ES template tokens:

Given:

/* style.css */
.root {
  background: var(--background);
  color: var(--color);

  &:hover {
    background: var(--hoverBackground);
    color: var(--hoverColor);
  }
}

Output:

/* style.css */
.root {
  background: ${theme.background};
  color: ${theme.color};

  &:hover {
    background: ${theme.hoverBackground};
    color: ${theme.hoverColor};
  }
}

Installation

yarn add --dev @instructure/postcss-themeable-styles

Usage

postcss([ require('@instructure/postcss-themeable-styles') ])