unnestcss

A library for un-nesting CSS.

Installation

npm install unnestcss

Getting Started

import { unnest } from "unnestcss";

const { unnest } = require("unnestcss");

General nesting rules

unnest(`
.root {
  --level: 1;
  .nest {
    --level: 2;
  }
}
`);

.root {
  --level: 1;
}
.root .nest {
  --level: 2;
}

Nesting rules for :host

unnest(`
:host {
  --level: 1;
  &:hover {
    --level: 2;
  }
}
`);

:host {
  --level: 1;
}
:host(:hover) {
  --level: 2;
}