Handle Nested Selectors (CSS)

[TheJaredWilcurt]

After much consideration, and a few design revisions this is the solution for nesting I've come up with that seems to have the fewest "gotchas" (AKA: allows for supporting most any ). Previous attempts had smaller outputs, but caused many edge cases. I settled on retaining the original class names in the Markup, and embedding them in the atomized class to reduce styling outcomes that differ from source files.

/* input */
.cow .moo {
    margin: 4px;
}
.dog .woof {
    margin: 4px;
}
.vehicle .car .horn {
    margin: 4px;
}

/* verbose output */
.cow .rp____---CLASS_cow______-margin__--COLON4px { margin: 4px }
.dog .rp____---CLASS_dog______-margin__--COLON4px { margin: 4px }
.vehicle .car .rp____---CLASS_vehicle______-__---CLASS_car______-margin__--COLON4px { margin: 4px; }

Note: The class name encoding breakdown is:

• Atomic class prefix: rp__
• The first parent, encoded: __---CLASS_vehicle_
  • If this was a tag the __---CLASS_ would be be replaced with __---TAG_. Like .rp____---TAG_h1______-__---CLASS_car______-margin__--COLON4px
  • If this was an ID then the __---CLASS_ would be replaced. Like .rp____---ID_vehicle______-__---CLASS_car______-margin__--COLON4px
• An encoded space: _____-
• The second parent, encoded: __---CLASS_car_
• An encoded space: _____-
• The property name: margin
• The colon encoded: __--COLON
• The value encoded: 4px

So the un-encoded atomic class name .vehicle .car margin:4px gets encoded to rp____---CLASS_vehicle______-__---CLASS_car______-margin__--COLON4px.

/* uglified output */
.cow .rp__0 { margin: 4px }
.dog .rp__1 { margin: 4px }
.vehicle .car .rp__2 { margin: 4px; }

<div class="cow">
  <div class="moo"></div>
</div>
<div class="dog">
  <div class="woof"></div>
</div>
<div class="vehicle">
  <div class="car">
    <div class="horn"></div>
  </div>
</div>

<div class="cow">
  <div class="rp____--DOT_cow______-margin__--COLON4px"></div>
</div>
<div class="dog">
  <div class="rp____--DOT_dog______-margin__--COLON4px"></div>
</div>
<div class="vehicle">
  <div class="car">
    <div class="rp____--DOT_vehicle______-__--DOT_car______-margin__--COLON4px"></div>
  </div>
</div>

<div class="cow">
  <div class="rp__0"></div>
</div>
<div class="dog">
  <div class="rp__1"></div>
</div>
<div class="vehicle">
  <div class="car">
    <div class="rp__2"></div>
  </div>
</div>

classMap

{
  '.cow': ['.cow'],
  '.moo': ['.rp____---CLASS_cow______-margin__--COLON4px'],
  '.dog': ['.dog'],
  '.woof': ['.rp____---CLASS_dog______-margin__--COLON4px'],
  '.vehicle': ['.vehicle'],
  '.car': ['.car'],
  '.horn': ['.rp____---CLASS_vehicle______-__---CLASS_car______-margin__--COLON4px']
}

{
  '.cow': ['.cow'],
  '.moo': ['.rp__0'],
  '.dog': ['.dog'],
  '.woof': ['.rp__1'],
  '.vehicle': ['.vehicle'],
  '.car': ['.car'],
  '.horn': ['.rp__2']
}