Convert JSON To CSS Variables With JavaScript

Preview:

Description:

A small JSON to CSS converter that allows you to define design tokens like colors, fonts, and spacing in JSON and convert them into CSS for use in your stylesheets.

It bridges the gap between dynamic data structures and styling and is useful in cases where you need to theme a website dynamically or manage styles in a more structured and maintainable way.

How to use it:

1. Include the main script jsonToCssVar.js on the page.

<script src="/jsonToCssVar.js"></script>

2. Converts JSON object to CSS variables using the convert() method.

jsonToCssVar.convert({
  json = {}, // your JSON here
  cssIndent = '  ',
  cssPrefix = '--',
  cssSelector = ':root',
})