@rysh/json-to-css

@rysh/json-to-css

Overview

@rysh/json-to-css is a powerful package that converts JSON objects into minified CSS code. This tool is designed to streamline the process of generating CSS from JSON structures, making it easier to manage styles programmatically.

Installation

To install the package, use npm or yarn:

npm install @rysh/json-to-css

or

yarn add @rysh/json-to-css

Usage

Below are examples demonstrating how to use @rysh/json-to-css in your project.

Basic Usage

import jsonToCss from "@rysh/json-to-css";

const css = jsonToCss({
  'background-color': '#fff',
  'color': '#000',
  'h1': {
    'font-weight': 'bold',
    '&.primary': {
      'color': '#12850f',
      '&:hover': {
        'background-color': '#ccc',
      }
    }
  }
}, '#app');

console.log(css);

CommonJS Usage

For CommonJS environments, you can use require:

const jsonToCss = require("@rysh/json-to-css");

const css = jsonToCss({
  'background-color': '#fff',
  'color': '#000'
}, '#app');

console.log(css);

Output

The resulting CSS will be:

#app{
    background-color:#fff;
    color:#000
}
#app h1{
    font-weight:bold
}
#app h1.primary{
    color:#12850f
}
#app h1.primary:hover{
    background-color:#ccc
}

The generated CSS is minified, removing all unnecessary spaces, commas, and semicolons.

Handling Multiple Selectors

@rysh/json-to-css also supports selectors separated by commas:

import jsonToCss from "@rysh/json-to-css";

const css = jsonToCss({
  'h1, h2, h3, h4, h5, h6': {
    'font-weight': 'bold',
    '&.none': {
      'display': 'none',
    }
  }
}, '#app');

console.log(css);

Output

The resulting CSS will be:

#app h1,h2,h3,h4,h5,h6{
    font-weight:bold
}
#app h1.none,h2.none,h3.none,h4.none,h5.none,h6.none{
    display:none
}

Media Queries

@rysh/json-to-css supports media queries within the JSON structure:

import jsonToCss from "@rysh/json-to-css";

const css = jsonToCss({
  '.container': {
    'margin': '0 auto',
    '@media only screen and (max-width: 600px)': {
      'max-width': '768px',
    }
  }
}, '#app');

console.log(css);

Output

The resulting CSS will be:

#app .container{
    margin:0 auto
}
@media only screen and (max-width: 600px){
    #app .container{
        max-width:768px
    }
}

Combining Functions

You can mix various features to achieve the desired effect, giving you the flexibility to define complex styles using a straightforward JSON structure.

Error Handling and Invalid Input

The jsonToCss function expects a plain JavaScript object as its first argument (value). If value is null or undefined, the function will throw a TypeError. For other non-object primitive types (like strings, numbers, or booleans) or arrays, the function will gracefully return an empty CSS string, as these inputs cannot be meaningfully converted to CSS rules.

Example of expected behavior for invalid inputs:

import jsonToCss from "@rysh/json-to-css";

// These will throw a TypeError
try {
  jsonToCss(null as any, 'body');
} catch (e) {
  console.error(e); // TypeError: Cannot convert undefined or null to object
}

// These will return an empty string
console.log(jsonToCss('string' as any, 'body')); // ""
console.log(jsonToCss(123 as any, 'body'));    // ""
console.log(jsonToCss([] as any, 'body'));      // ""

License

This package is licensed under the MIT License.

Contributions

Contributions, issues, and feature requests are welcome. Feel free to check the issues page if you have any suggestions or find any bugs.

Author

Created by rysh.

This README file provides a comprehensive guide to using @rysh/json-to-css. If you have any further questions or need additional examples, please refer to the documentation.