# js-object-to-css

> convert JavaScript objects to CSS

Latest version **1.1.15** (published 2023-06-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install js-object-to-css
pnpm add js-object-to-css
yarn add js-object-to-css
bun add js-object-to-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.15 |
| Published | 2023-06-11 |
| First published | 2023-05-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 250.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rory-velthuis |

## Links

- npm: https://www.npmjs.com/package/js-object-to-css
- Repository: https://github.com/RoryVelthuis/JS-Object-To-CSS
- Homepage: https://github.com/RoryVelthuis/JS-Object-To-CSS#readme
- Issues: https://github.com/RoryVelthuis/JS-Object-To-CSS/issues
- npm.io page: https://npm.io/package/js-object-to-css

## Dependencies (1)

- [css](https://npm.io/package/css.md) ^3.0.0

## Recent versions

- 1.1.15 (latest) — 2023-06-11
- 1.1.13 — 2023-06-11
- 1.1.12 — 2023-06-11
- 1.1.11 — 2023-06-11
- 1.1.10 — 2023-06-11
- 1.1.9 — 2023-06-11
- 1.1.8 — 2023-06-11
- 1.1.7 — 2023-06-11
- 1.1.6 — 2023-06-11
- 1.1.5 — 2023-06-11
- 1.1.4 — 2023-06-11
- 1.1.3 — 2023-06-11
- 1.1.2 — 2023-06-11
- 1.1.1 — 2023-06-11
- 1.1.0 — 2023-06-11
- … 2 more at https://npm.io/package/js-object-to-css/versions

## README

# 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;
}
```

---
_Source: https://npm.io/package/js-object-to-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._