css4ify

A simple tool to convert CSS to JSON and JSON to CSS.

• 🌲 Uses csstree to parse CSS
• 🚀 ESM support
• 🤘 TypeScript support
• 🔮 CSS 4 features supported like CSS Nesting and modern pseudoselectors
• 📦 Bundled with Bun
• 📎 Lightweight

Usage

npm install css4ify

Convert CSS to JSON

import { jsonify } from 'css4ify';

const json = jsonify(`
  .foo {
    color: red;
  }
  .bar {
    color: blue;

    &:hover {
      color: green;
    }
  }
`);

It will return:

{
  ".foo": {
    "color": "red"
  },
  ".bar": {
    "color": "blue",
    "&:hover": {
      "color": "green"
    }
  }
}

Convert JSON to CSS

import { stringify } from 'css4ify';

const css = stringify({
  ".foo": {
    "color": "red"
  },
  ".bar": {
    "color": "blue",
    "&:hover": {
      "color": "green"
    }
  }
});

It will return:

.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:

/* 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:

/* This will work */
.foo {
  color: red;
  background-color: blue;
  &:hover {
    color: green;
  }
}

Development

To install dependencies:

bun install

To run:

bun run src/index.ts

This project was created using bun init in bun v1.0.20. Bun is a fast all-in-one JavaScript runtime.