[Popover] Unreasonable complex selectors with duplicate classes generated

[Westbrook Johnson]

spectrum-css/components/popover/index.css

Lines 319 to 346 in 3c7de5e

 /* right, left, start, end popover position with tip default to pointing right ▷ */ 
 &.spectrum-Popover--left, 
 &.spectrum-Popover--left-bottom, 
 &.spectrum-Popover--left-top, 
 &.spectrum-Popover--right, 
 &.spectrum-Popover--right-bottom, 
 &.spectrum-Popover--right-top, 
 &.spectrum-Popover--start, 
 &.spectrum-Popover--start-top, 
 &.spectrum-Popover--start-bottom, 
 &.spectrum-Popover--end, 
 &.spectrum-Popover--end-top, 
 &.spectrum-Popover--end-bottom { 
   .spectrum-Popover-tip { 
     /* swap height and width for vertical triangle */ 
     inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); 
     block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); 
     inset-block: 0; 
   } 
  
   /* left popover with tip pointing right ▷ */ 
   &.spectrum-Popover--left, 
   &.spectrum-Popover--left-bottom, 
   &.spectrum-Popover--left-top { 
     .spectrum-Popover-tip { 
       inset-inline: 100% auto; 
     } 
   } 

This will generate selectors like .spectrum-Popover--withTip.spectrum-Popover--left.spectrum-Popover--left .spectrum-Popover-tip wherein the spectrum-Popover--left is duplicated.

Can this be smoothed out? It creates additional difficult when processing the output downstream.

[Patrick Fulton]

Tracking this in Jira via CSS-750