js-object-to-css v1.1.15
JS-Object-To-CSS
A JavaScript library for converting JavaScript objects to CSS.
Features
The JS Object to CSS library provides the following features:
- Conversion of JavaScript objects to CSS.
- Support for nested selectors.
- 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:
Import the ObjectToCSS function from the library.
Create a JavaScript object representing the CSS styles.
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;
}
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago