CSS class name update causing render issues

Issues
1

@chungwu did you just push an update compressing css class names? We are seeing render issues on our site… Not sure if it is related to this, but the top part of the following page:
https://www.sipsby.com/collections/holiday-market is from plasmic … injected into the HTML, and it is no longer rendering right…

This is the page for it in plasmic: https://studio.plasmic.app/projects/k5wi36LTCNmnJb5rh2sgis/-/PCP-Holiday-Market-Header?arena_type=page&arena=v1bYeRBzk7Rs

This is a bit urgent, as this is live on our site, and all of these collections are broken (and we have a sale going on)
https://www.sipsby.com/collections/tea-types
https://www.sipsby.com/collections/tea-format

2

Image 1: What it should look like (and did look like)
Image 2: What is live right now

I need to take these headers down now, as this is live, but if you want a reproduction I can give you access to our staging environment

image.png
image.png1289×487 62.7 KB

image.png
image.png1727×1541 246 KB

3

I think this is what happened…

We have a class name on a component… And we have custom CSS addressing this class name… However you have in the past appended wab_instance to this… You still do this in the editor, but it looks like you are now postfixing with “pi” instead…

  1. I would prefer to have the classname unaltered… so that might be a bug…
  2. But if not, is the “pi” stable?
    (I am all for class compression btw… )

image.png

image.png

image.png

4

I am sorry this caused an issue. Looks like the “class” attribute was and is wrong (there should be a space between simple-list and __wab_instance…). Is the issue that we screwed up the class attribute and so simple-list style is no longer being applied?

5

@chungwu I think that is the issue…

6

So the pi should also not be suffixed to the attribute then… Do you know what is causing it?

7

This is the location of the class that gets messed up (gets wab-instance)

image.png
image.png1133×711 110 KB

8

I also don’t think it always happens, so in my CSS I am looking for the classname + the classname suffixed

9

The component is here:
https://studio.plasmic.app/projects/k5wi36LTCNmnJb5rh2sgis/-/Collection-Header-Scroll-Container?arena_type=component&arena=YWwzNPp6_E

10

I think we’ve spotted the issue, will roll out a fix. Sorry about that

11

great! I have updated my code to be ok with pi and no suffix, and it looks fixed… Once you have deployed your fix it should still be correct on my end, and I’ll remove the _wab and pi suffix selectors

12

thank you for jumping on this @chungwu! :pray: