Package Exports

css-vars-from-json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (css-vars-from-json) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

css-vars-from-json

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

· Homepage · Report Bug / Request Feature ·

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,

{
    "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.

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