Find edge cases around selectors to show warning/error messages for

[TheJaredWilcurt]

Some code cannot be atomized in a manner that produces identical results as the input styles.

For example this input:

.cow { padding: 8px }
.dog { padding: 8px }

.cow h1 { margin: 2px }
.dog h1 { margin: 20px }

<div class="cow"><h1>2px</h1></div>
<div class="dog"><h1>20px</h1></div>

Will output this:

.rp__padding__--COLON8px { padding: 8px }
.rp__padding__--COLON8px h1 { margin: 2px }
.rp__padding__--COLON8px h1 { margin: 20px }

.rp__0 { padding: 8px }
.rp__0 h1 { margin: 2px }
.rp__0 h1 { margin: 20px }

<div class="rp__0"><h1>2px</h1></div>
<div class="rp__0"><h1>20px</h1></div>

Which would result in both h1's having the same 20px margin, where as the input had them being different.

There are likely other instances like this that can be documented, detected, and logged as errors with instructions that explain why that selector cannot be reliably atomized.

[TheJaredWilcurt]

Perhaps any selector containing a class and non-class could be atomized to a name that includes those details:

.cow { padding: 8px }
.dog { padding: 8px }
.cow h1 { margin: 2px }
.dog h1 { margin: 20px }

.rp__padding__--COLON8px { padding: 8px }
.rp__margin__--COLON2px___--h1 h1 { margin 2px }
.rp__margin__--COLON20px___--h1 h1 { margin 20px }

.rp__0 { padding: 8px }
.rp__1 h1 { margin 2px }
.rp__2 h1 { margin 20px }

<div class="cow"><h1>2px</h1></div>
<div class="dog"><h1>20px</h1></div>
<div class="rp__padding__--COLON8px rp__margin__--COLON2px___--h1"><h1>2px</h1></div>
<div class="rp__padding__--COLON8px rp__margin__--COLON20px___--h1"><h1>20px</h1></div>
<div class="rp__0 rp__1"><h1>2px</h1></div>
<div class="rp__0 rp__2"><h1>20px</h1></div>

Similarly

h1 .cow { margin: 2px }
h1 .rp__margin__--COLON2px { margin: 2px }

.cow p span i { margin: 2px }
.rp__margin__--COLON2px___--p___--span___--i p span i { margin: 2px }

.cow p [href*="pdf"]:after { margin: 2px }
.rp__margin__--COLON2px___--p__--OPENSQUAREBRACKEThref__--ASTERISK__--EQUAL__--DOUBLEQUOTEpdf__--DOUBLEQUOTE__--CLOSESQUAREBRACKET_---after [href*="pdf"]:after { margin: 2px }
.rp__0 [href*="pdf"]:after { margin: 2px }

This should eliminate most un-atomizable situations, though there will undoubtably be more which we should watch out for, detect and warn the user about. Though this may require extensive testing to be proactive or waiting on bug reports reactively.