Repository files navigation

Stylis plugin that transforms CSS variable into static values for non-supported browsers.

• Install
• Usage
• How it works
• Limitations
• License

npm install --save stylis-plugin-css-variables

importStylisfrom'stylis';importcssVariablesPluginfrom'stylis-plugin-css-variables';conststylis=newStylis();stylis.use(cssVariablesPlugin());construles=stylis('',`.hello {        background: var(--bg, black);    }    `,);console.log(rules);// .hello {background:black;background: var(--bg, black);}

By default, this plugin will only run in environments thatdo 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 askipSupportedBrowsers option that can be passed:

stylis.use(cssVariablesPlugin({skipSupportedBrowsers:false}));

This plugin looks for anyvar() usage in the CSS declarations. Ifvar() 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

.hello {background:var(--bg, black);}

After

.hello {background: black;background:var(--bg, black);}

However, if there are no:root values or fallbacks, then no static value will be generated.

Nestedvar() is supported!

.hello {background:var(--bg,var(--black,var(--dark, black)));}

After

.hello {background: black;background:var(--bg,var(--black,var(--dark, black)));}

Automatic variable value retrieval is limited only to the:root scope.

MIT ©Q ✌️❤️