A JavaScript library for converting JavaScript objects to CSS.
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.
Install the library into your project directory using npm:
npm install js-object-to-css
Import the ObjectToCSS function from the library in a Node.js environment,
const { ObjectToCSS } = require('js-object-to-css/dist/bundle.js');
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>
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.
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;
}
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;
}