truecar-css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers

Usage no npm install needed!

<script type="module">
  import truecarCssVarsPonyfill from 'https://cdn.skypack.dev/truecar-css-vars-ponyfill';
</script>

README

css-vars-ponyfill

NPM Build Status Codacy Codecov License: MIT jsDelivr Tweet

A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.

Features

  • Client-side transformation of CSS custom properties to static values
  • Live updates of runtime values in both modern and legacy browsers
  • Transforms <link>, <style>, and @import CSS
  • Transforms relative url() paths to absolute URLs
  • Supports chained and nested var() functions
  • Supports var() function fallback values
  • Supports web components / shadow DOM CSS
  • Watch mode auto-updates on <link> and <style> changes
  • UMD and ES6 module available
  • TypeScript definitions included
  • Lightweight (6k min+gzip) and dependency-free

Limitations

  • Custom property declaration support is limited to :root and :host rulesets
  • The use of var() is limited to property values (per W3C specification)

Browser Support

IE Edge Chrome Firefox Safari
9+ 12+ 19+ 6+ 6+

Contact

License

This project is licensed under the MIT License. See the MIT LICENSE for details.

Copyright (c) John Hildenbiddle (@jhildenbiddle)