· Homepage · Report Bug / Request Feature ·

• About
• Installation
• Usage
• Test
• Contact
• Contributing
• License

This small utility generates a style string with css custom properties (variables) from an javascript object or json string.

It is useful, if you have a styled theme defined as json object and want to use it in your css.

For example,

{ "font": { "family": { "primary": "Inter"	}	} }

can be used as,

p { font-family: var(--font-family-primary); }

yarn add css-vars-from-json

import cssVars from 'css-vars-from-json'; const theme = cssVars({ colors: { primary: 'red', secondary: { __default: 'blue', // base value, will be rendered as --colors-secondary: blue light: 'lightblue', }, }, shadows: { main: 'box-shadow: 1px 1px black', }, font: { family: { primary: 'Arial', }, }, }); document.body.setAttribute('style', theme); console.log(theme); // => "--colors-primary: red;--colors-secondary: blue;--colors-secondary-light: lightblue;--shadows-main: box-shadow: 1px 1px black;--font-family-primary: Arial;"

ThemeProvider.svelte

<script> import { theme } from './my-design-system'; import generateCSSVariables from 'css-vars-from-json'; const style = generateCSSVariables(theme); </script> <div {style}> <slot /> </div>

App.svelte

<script> import ThemeProvider from './ThemeProvider.svelte'; </script> <ThemeProvider> <h1>Hi</h1> </ThemeProvider> <style> h1 { color: var(--color-primary);	} </style>

yarn run test

Contributions, issues and feature requests are welcome!

1. Check issues
2. Fork the Project
3. Create your Feature Branch (git checkout -b feat/AmazingFeature)
4. Test your changes yarn run test
5. Commit your Changes (git commit -m 'feat: add amazingFeature')
6. Push to the Branch (git push origin feat/AmazingFeature)
7. Open a Pull Request

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.

Give a ⭐️ if this project helped you!

Distributed under the MIT License.

This README was generated with ❤️ by readme-md-generator