css-vars-ponyfill

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

• Documentation
• Demo (CodePen)

Features

• Client-side transformation of CSS custom properties to static values
• Live updates of runtime values in both modern and legacy browsers
• Transforms
  ,
  , 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
  and
  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

• Create a Github issue for bug reports, feature requests, or questions
• Follow @jhildenbiddle for announcements
• Add a ⭐️ star on GitHub or ❤️ tweet to support the project!

License

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

Copyright (c) John Hildenbiddle (@jhildenbiddle)