Proposal: CSS nesting changes.

[wlvstv]

Purpose

Proposing the removal of nested child divs in the css output as described in #75

Change Summary

I've changed the code box structure to reflect a closing of the parent div and line items for the children. Additionally, I have added HTML Encoded < and > characters to the HTML output, though I can make this an additional PR if we think it's scope creep :). I have also removed the 'child' CSS class from the children divs to pretty up the output now that the CSS isn't nested. The child class was adding 40px left padding to simulate indentation in the parent CSS.

Additional Information

An example of the output code would be:
Before:

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  .div1 { grid-area: 1 / 1 / 4 / 5; }
  .div2 { grid-area: 2 / 5 / 3 / 6; }
  .div3 { grid-area: 2 / 5 / 4 / 6; }
}

After:

.parent {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 4 / 5; }
.div2 { grid-area: 2 / 5 / 3 / 6; }
.div3 { grid-area: 2 / 5 / 4 / 6; }

Additional Sceenshots of the before and after changes are attached! (Screenshots taken in Chrome v77.0.3865.90, with a res of 1920x920)

[sdras]

I'm unexcited about this change, but I'm overruled :) let's 🚢 it!

[wlvstv]

@sdras would you be interested in adding a selector for how one would want the output? It also kinda solves an issue I was facing around a ui component that addresses the ie compatibility issue. Maybe 3 options of vanilla css, Sass, or IE safe css? I can open up an issue for it :)