Slotify css

Wrap all applicable selectors of an css sheet into ::slotted brackets. With a focus on being fast and having a small bundlesize (3.6kB).

Limitations / Prerequestites

This library is intended to be used as a on the fly compiler running on the frontend. Hence bundle size is of primary concern, not creating a 100% spec compliant compiler nor it being particularly lenient on syntax variations. As such it assumes the input css to be precompiled, thus without unnecessary spaces between css combinators (e.g.: not div > p nor div, h1) and stripped of comments. Additionally all caveats of the used lexer css-simple-parser are carried through, which are only partially solvable by precompilating.

Installation

 $ npm i slotify-css

Usage

import slotifyCss from "slotify-css"

const slottedCss = slotifyCss(sourceCss)

Example

Note that the output will not always be correctly indented, unlike shown below.

div h1 {
  color: red;
}

:host(:focus-within:not(.valid)) div h1 {
  color: red;
}

@media (max-with: 700px) {
  div>h1,:root h1.big~p {
    color: red;
  }
}

::slotted(div h1) {
  color: red;
}

:host(:focus-within:not(.valid)) ::slotted(div h1) {
  color: red;
}

@media (max-with: 700px) {
  ::slotted(div>h1),:root ::slotted(h1.big~p) {
    color: red;
  }
}

Contribute

All feedback is appreciated. Create a pull request or write an issue.