Generates css custom properties (variables) from json or javascript object.
npm install css-vars-from-json
路
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,
``json`
{
"font": {
"family": {
"primary": "Inter"
}
}
}
can be used as,
`css`
p {
font-family: var(--font-family-primary);
}
`sh`
yarn add css-vars-from-json
`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;"
`
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`)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_