JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<textarea rows="10" cols="100" id="input">
div.test {
  font-size: 16px;
  color: red;
  p {
    Here's a bunch of content, cool!
    span {
      text-decoration: underline;
      Here's a thing.
    }
  }
  div.test {
    font-size: 22px;
    color: purple;
    Testing some class inheritance and inline HTML: <a href="#">LINK!</a>
  }
}

div.test {
  Testing some text without style in the beginning.
}
    
div {
  table {
    special|table|format
    seperated|by|`|`
  }
}
        
</textarea>
<textarea rows="10" cols="100" id="output"></textarea>

JavaScript

var input = document.getElementById("input").value;
var HTMLOutput = "";
var styleOutput = "";

// Closures
while (input.indexOf("{") !== -1) {
  var element = input.substr(0, input.indexOf("{")).trim();
  var elementClass = element.indexOf(".");
  if (elementClass) {
  	// Class
    var elementClassName = element.slice(elementClass+1, element.length);
    element = element.slice(0, elementClass);
    element += ' class="' + elementClassName + '"';
  }
  HTMLOutput += startElement(element);
  input = input.slice(input.indexOf("{")+1);
  if (input.indexOf(';')) {
  	// Style

  }
}

function startElement(element) {
	return "<" + element + ">";
}

function closeElement(element) {
	var startedElement = startElement(element);
  return startedElement.substr(0, 1) + "/" + startedElement.substr(1);
}

document.getElementById("output").value = HTMLOutput;