Custom CSS section scoping fails

[tim_tairli]

Short description of issue

Custom CSS section scoping fails

Link to Shopify Store

link to my test store https://bbkmarket.myshopify.com/

Reproduction steps

Install Spoke theme.
On a product page-> Product information section add Custom CSS:

.product-info-wrap-content {
  outline: 2px dashed red;
}

Important part is the class name.

See that rule does not apply because the code is converted into this – note there is no space before dot:

 #shopify-section-template--20035149791286__main-product.product-info-wrap-content {outline: 2px dashed red;} 

Additional info

Initial problem in a different store: Create a three column Product Template for Spoke/Athens Theme

Reproduction in my test store (preview pass: ivuisi): https://bbkmarket.myshopify.com/products/donation?_ab=0&_fd=0&_sc=1&key=55f0a0ec211007861e980938621b61462898a927e0a3cb873c87a04dd1bbda00&preview_theme_id=148107165750

Screenshots below – error/expected.

Somehow, my attempt to replicate it in Dawn failed (using custom liquid block in product section, so not exactly the same).
Produces code with space, as expected:

 #shopify-section-template--17855221727286__main .product-info-wrap-content {outline: 2px dashed red;}

Link to failed replication in Dawn – https://bbkmarket.myshopify.com/products/donation

But should theme actually matter for this?
This style element should be independent of theme (unless they do filter content_for_layout or something similar, of course.
Can’t confirm as my Spoke is trial)

What type of topic is this

Troubleshooting
Bug report

Upload screenshot(s) of issue

[Paige-Shopify]

Hi @tim_tairli,

I looked into this and it appears to be related to the class applied to the parent section. I was also able to reproduce the behavior in Horizon, so you’re right that the theme shouldn’t matter for this type of issue. This may be related to how we parse Custom CSS.

Thanks for reporting this. We’re looking into a fix and will post an update here once it’s resolved.