@instructure/postcss-themeable-styles - npm Package Compare versions

Comparing version 4.0.0-beta.0 to 4.0.0

package.json

		{
		"name": "@instructure/postcss-themeable-styles",
		"version": "4.0.0-beta.0",
		"version": "4.0.0",
		"description": "PostCSS plugin for themeable component styles",
		@@ -5,0 +5,0 @@ "author": "Instructure, Inc. Engineering and Product Design",

README.md

		@@ -0,1 +1,5 @@
		---
		category: packages
		---

		## @instructure/postcss-themeable-styles
		@@ -8,6 +12,46 @@

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

		Given:

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

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

		Output:

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

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


		### Installation

		```sh
		npm install @instructure/postcss-themeable-styles
		yarn add --dev @instructure/postcss-themeable-styles
		```

		### Usage

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

Fixed alerts