More testing with upgrading existing websites:
I have an issue with a grid layout that looks fine on the front end, exactly how it should, however in the builder, for the individual cell, my Element CSS of grid-column: span 4 is being overwritten by the cell’s default grid-column-start: and grid-column-end: auto.
Here is the custom Element CSS being used (on the containing Grid element):
@media screen and (min-width: 979px) {
$el > .x-cell {
grid-column: span 4;
}
}
Which is being overwritten by this styling:
.mcs54-0.x-cell {
grid-column-start: auto;
grid-column-end: auto;
grid-row-start: auto;
grid-row-end: auto;
justify-self: auto;
align-self: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
z-index: 1;
border: 0;
font-size: 1em;
}
I can make it work as expected again by adding more specificity with $el.x-grid > x.cell, but I’d rather not have to worry about this kind of specificity across all sites that will be upgraded.
Inspecting it further, I can see that on the front end, the custom Element CSS is being pulled in after the Cornerstone TSS:
Whereas in the builder, the custom Element CSS is being added to the HTML above the Cornerstone TSS:
So similar specificity is being overwritten.
Regardless of whether best practice would be to add a bit more specificity in my instance, the builder view and live view should behave the same in terms of loading of custom Element CSS and generated TSS.
Hope this helps sort it!