grips

grips copied to clipboard

Consider:

#box1 {
   color: red;
   font-weight: bold;
}

#box1, #box2 {
   color: green;
}

#box1 {
   background-color: blue;
   font-weight: normal;
}

Currently, the first #box1 ruleset would be "lost" (that is, not template renderable) because grips treats the selector as the template ID, and duplicate template IDs overwrite previous ones.

One solution would be to numerically index them to keep them separate and separately renderable. But that sucks, because then you have to know that and keep track of their order in your grips-css sheet, etc. Ugh.

The most workable solution is probably to handle this "lost" rule by dropping it verbatim (not as its own partial) into the #all template partial in the correct location. So, that might end up looking like this compilation:

{$: "#I2JveDEsICNib3gy" }#box1, #box2 {{$= @"#I2JveDEsICNib3gy_" $}}{$}
{$: "#I2JveDEsICNib3gy_" }
   color: green;
{$}


{$: "#I2JveDE=" }#box1 {{$= @"#I2JveDE=_" $}}{$}
{$: "#I2JveDE=_" }
   background-color: blue;
   font-weight: normal;
{$}


{$: "#all" }
#box1 {
   color: red;
   font-weight: bold;
}

{$= @"#I2JveDEsICNib3gy" $}

{$= @"#I2JveDE=" $}
{$}

This way, we preserve the "lost" rules without needing them to be individually renderable (you would have to re-render the whole stylesheet to re-render that "lost" part).

Note: This means any of the templating dynamics (like variables, embeds, nesting) of that "lost" ruleset also need to be merged into #all, so that they occur when the whole stylesheet file is rendered.