JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

JavaScript

const raw = `
.notice {
  width: 90%;
  justify-content: center;
  border-radius: 1rem;
  border: black solid 2px;
  background-color: #ffc107;
  color: black;
  padding: 1rem;
  .notice-heading:before {
    content: "!";
  }
  &[active] { font-size: 0 }
  [hidden] { display: none }
  &.warning {
    background-color: #d81b60;
    border-color: #d81b60;
    color: white;
    .warning-heading:before {
      content: "! ";
    }
  }
  &.success {
    background-color: #004d40;
    border-color: #004d40;
    color: white;
    .success-heading:before {
      content: "✓ ";
    }
  }
}

`;

let SEMICOLON = 59; /* ; */
let CLOSEBRACES = 125; /* } */
let OPENBRACES = 123; /* { */
let NEWLINE = 10; /* \n */
let CARRIAGE = 13; /* \r */
let TAB = 9; /* \t */
let AT = 64; /* @ */
let SPACE = 32; /*   */
let AND = 38; /* & */

function unnest(SELECTOR_PLACEHOLDER, str) {
  let i = 0,
    out = "",
    char = 0,
    context = "",
    activeSelector = SELECTOR_PLACEHOLDER;

  str = activeSelector + "{" + str; //  + "}"; // leave this off on purpose so we don't have to remove it

  while (i < str.length) {
    char = str.charCodeAt(i);
    switch (char) {
      // replace `&` with the active selector
      case AND:
        context += context + activeSelector;
        break;

      // I can't explain this in writing :-/ Anyone?
      case SEMICOLON:
        out += context + str[i];
        context = "";
        break;

      // whatever is in the context is a selector at this point
      case OPENBRACES:
        out +=
          (out.length ? "}" : "") +
          (activeSelector = context.trim()) + // having trouble explaining why this trim works.
          str[i];
        context = "";
        break;

      // hit wall and write what we have in context
      // we dump our net that we've been dragging behind us
      case CLOSEBRACES:
        out += context + str[i];
        context = "";
       ...