https://github.com/itsjonq/stylis-plugin-css-variables
🔄 Transforms CSS variable into static values for non-supported browsers
https://github.com/itsjonq/stylis-plugin-css-variables
css-in-js css-variables plugin stylis variables
Last synced: 11 months ago
JSON representation
🔄 Transforms CSS variable into static values for non-supported browsers
- Host: GitHub
- URL: https://github.com/itsjonq/stylis-plugin-css-variables
- Owner: ItsJonQ
- License: mit
- Created: 2020-07-22T01:34:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T17:14:18.000Z (about 3 years ago)
- Last Synced: 2025-03-31T01:04:46.393Z (12 months ago)
- Topics: css-in-js, css-variables, plugin, stylis, variables
- Language: JavaScript
- Homepage: https://github.com/ItsJonQ/stylis-plugin-css-variables
- Size: 4.29 MB
- Stars: 8
- Watchers: 0
- Forks: 2
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stylis-plugin-css-variables
[](https://travis-ci.org/ItsJonQ/stylis-plugin-css-variables)
[](https://codecov.io/gh/ItsJonQ/stylis-plugin-css-variables)
[](https://badge.fury.io/js/stylis-plugin-css-variables)
> Stylis plugin that transforms CSS variable into static values for non-supported browsers.
## Table of contents
- [Install](#install)
- [Usage](#usage)
- [How it works](#how-it-works)
- [Limitations](#limitations)
- [License](#license)
## Install
```
npm install --save stylis-plugin-css-variables
```
## Usage
```js
import Stylis from 'stylis';
import cssVariablesPlugin from 'stylis-plugin-css-variables';
const stylis = new Stylis();
stylis.use(cssVariablesPlugin());
const rules = stylis(
'',
`.hello {
background: var(--bg, black);
}
`,
);
console.log(rules);
// .hello {background:black;background: var(--bg, black);}
```
## How it works
By default, this plugin will only run in environments that **do not support CSS variables**. For the web, that typically means IE11 and below. It will not generate various for browsers like Chrome, Safari, or Firefix.
If you need this to always run, there is a `skipSupportedBrowsers` option that can be passed:
```js
stylis.use(cssVariablesPlugin({ skipSupportedBrowsers: false }));
```
This plugin looks for any `var()` usage in the CSS declarations. If `var()` is found, it will attempt to retrieve the value from `:root`. If the CSS variable value is not available, it will attempt to use the provided fallback.
If a fallback is found, the static value will be prepended before the original CSS declaration:
**Before**
```css
.hello {
background: var(--bg, black);
}
```
**After**
```css
.hello {
background: black;
background: var(--bg, black);
}
```
However, if there are no `:root` values or fallbacks, then no static value will be generated.
Nested `var()` is supported!
```css
.hello {
background: var(--bg, var(--black, var(--dark, black)));
}
```
**After**
```css
.hello {
background: black;
background: var(--bg, var(--black, var(--dark, black)));
}
```
## Limitations
Automatic variable value retrieval is limited only to the `:root` scope.
## License
MIT © [Q](https://jonquach.com) ✌️❤️