https://github.com/onmax/css4ify
Converts CSS to JSON
https://github.com/onmax/css4ify
css-nesting css-to-js csstree
Last synced: about 2 months ago
JSON representation
Converts CSS to JSON
- Host: GitHub
- URL: https://github.com/onmax/css4ify
- Owner: onmax
- Created: 2024-03-04T10:01:45.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T11:19:01.000Z (3 months ago)
- Last Synced: 2025-03-23T22:21:23.159Z (about 2 months ago)
- Topics: css-nesting, css-to-js, csstree
- Language: TypeScript
- Homepage:
- Size: 173 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# css4ify
A simple tool to convert CSS to JSON and JSON to CSS.
- 🌲 Uses [`csstree`](https://github.com/csstree/csstree) to parse CSS
- 🚀 ESM support
- 🤘 TypeScript support
- 🔮 CSS 4 features supported like CSS Nesting and modern pseudoselectors
- 📦 Bundled with [Bun](https://bun.sh)
- 📎 Lightweight
## Usage
```bash
npm install css4ify
```
Convert CSS to JSON
```javascript
import { jsonify } from 'css4ify';
const json = jsonify(`
.foo {
color: red;
}
.bar {
color: blue;
&:hover {
color: green;
}
}
`);
```
It will return:
```json
{
".foo": {
"color": "red"
},
".bar": {
"color": "blue",
"&:hover": {
"color": "green"
}
}
}
```
Convert JSON to CSS
```javascript
import { stringify } from 'css4ify';
const css = stringify({
".foo": {
"color": "red"
},
".bar": {
"color": "blue",
"&:hover": {
"color": "green"
}
}
});
```
It will return:
```css
.foo {
color: red;
}
.bar {
color: blue;
&:hover {
color: green;
}
}
```
## Missing features
> This project is in early stages and may not support all CSS features. You can help by opening an issue or a pull request.
> CSS Nesting is NOT supported when there is properties after the nested selector. For example:
```css
/* This will not work */
.foo {
color: red;
&:hover {
color: green;
}
background-color: blue;
}
```
To solve it, just move the properties to be before the nested selector:
```css
/* This will work */
.foo {
color: red;
background-color: blue;
&:hover {
color: green;
}
}
```
## Development
To install dependencies:
```bash
bun install
```
To run:
```bash
bun run src/index.ts
```
This project was created using `bun init` in bun v1.0.20. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.