Css-vars-from-json NPM

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,

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

can be used as,

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

Install

NPM:

yarn add css-vars-from-json

Usage

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

Svelte example

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>

Run tests

yarn run test

🤝 Contributing

Contributions, issues and feature requests are welcome!

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

Commit messages

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.