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 <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

• 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)