css-vars-from-json

Generates css custom properties (variables) from json or javascript object.

·
Homepage
·
Report Bug / Request Feature
·

Table of Contents

- About
- Installation
- Usage
- Test
- Contact
- Contributing
- License

About

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,

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

can be used as,

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

Install

$3

`sh
yarn add css-vars-from-json
`

Usage

`js
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;"
`

$3

ThemeProvider.svelte

`html



`

App.svelte

`html





Hi


`

Run tests

`sh
yarn run test
`

🤝 Contributing

Contributions, issues and feature requests are welcome!


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

$3

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.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Distributed under the MIT License.

---

_This README was generated with ❤️ by readme-md-generator_