JS-Object-To-CSS

A JavaScript library for converting JavaScript objects to CSS.

Features

The JS Object to CSS library provides the following features:

1. Conversion of JavaScript objects to CSS.
2. Support for nested selectors.
3. The library includes a ObjectToCSS function that takes a JavaScript object representing CSS styles and converts it to a CSS string. Nested selectors are supported, allowing you to create hierarchical CSS structures easily.

Installation

Install the library into your project directory using npm:

npm install js-object-to-css

Node.js Environment

Import the ObjectToCSS function from the library in a Node.js environment,

const { ObjectToCSS } = require('js-object-to-css/dist/bundle.js');

Browser/Framework Environment

Import the ObjectToCSS function from the library in a Browser/Framework environment:

import { ObjectToCSS } from 'js-object-to-css/dist/bundle.js';

Alternatively, you can choose to import the package through an HTML script tag using the unpkg CDN:

<script src="https://unpkg.com/js-object-to-css@1.1.15/dist/bundle.js.js"></script>

Usage

To convert a JavaScript object to CSS, follow these steps:

1. Import the ObjectToCSS function from the library.

2. Create a JavaScript object representing the CSS styles.

3. Pass the object to the ObjectToCSS function to convert it to CSS.

The converted CSS code will be returned as a string that you can use in your project.

Basic code example:

const { ObjectToCSS } = require('object-to-css');

const obj = {
  '.container': {
    'display': 'flex',
    'justify-content': 'center',
    'align-items': 'center',
  },
  'h1': {
    'color': 'blue',
    'font-size': '24px',
  },
};

const style = ObjectToCSS(obj);

console.log(style);

The output CSS will be:

h1 {
  color: blue;
  font-size: 24px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Example with nested selectors:

const { ObjectToCSS } = require('js-object-to-css');

const obj = {
  '.container': {
    'display': 'flex',
    'justify-content': 'center',
    'align-items': 'center',
    '.nested': {
      'background-color': 'red',
      'color': 'white',
    },
  },
  'h1': {
    'color': 'blue',
    'font-size': '24px',
  },
};

const style = ObjectToCSS(obj);

console.log(style);

The output CSS will be:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .nested {
  background-color: red;
  color: white;
}

h1 {
  color: blue;
  font-size: 24px;
}