Hi team, we adopted an existing Plasmic setup that integrates landing pages and component into next.js applications. After deploying some unrelated changes to our test environment, we noticed that some ui components that rely on plasmic color tokens are not displayed properly. It seems like the .plasmic_tokens class that defines the plasmic token css variables is missing in the <style> tag that is loaded into the page. In our production environment (to which we have not deployed lately) this class exists and the UI works fine.
Could you help us getting to the root of this?
Hi, yes we can take a look, can you share the plasmic project URL, and also the live deployed URL where the problem is happening?
Hi Yang, thanks for looking into it! We have a couple of projects for different landing pages and it’s happening for all of them. I’ll send you the details via DM.
Hello again, I think I got to the core of this issue now. Apparently, lately the plasmic class names are being minified. Could someone confirm if this is a change that was made in plasmic recently?
In our dom, the classes that previously looked all like this:
class="plasmic_default__all plasmic_default__div root_reset_fGkRH6KwFVx5gsJEbLnzjW plasmic_default_styles plasmic_mixins plasmic_tokens BrandHeader__root__tnlyZ"
now look like this:
class="ρd__all ρd__div ρr-fGkRH ρdss ρmns ρtns ρtnlyZ"
The relevant minified class names now all start with the special character ρ (small greek letter rho).
The problem for us was that our frontend relied on the plasmic_tokens class name. Because the same frontend code is used with multiple plasmic projects that have different branding/theming each, some of our react component styles also referenced plasmic tokens which are defined in the plasmic_tokens class. Because the element where all those plasmic classes are automatically added does not wrap the page content, the plasmic_tokens class was manually added to the react root component which made the token css variables available to all our components. Adding the new ρtns class name there resolves the issue.
My questions now are:
• Can we expect this classname to be stable or might this change anytime?
• What is the recommended way to make plasmic tokens available in the full frontend?
These class changes were mentioned in the last announcement. I had my own issues at the time with a project that also relied on a certain class convention.
I noticed recently that despite these changes, some elements or built-in components still have the old class structure.
Maybe the Plasmic team can help provide more insight as to why this may be.
Sorry this caused issues; you can expect the new class names to be stable for the foreseeable future.
We don’t have an official way yet for using the plasmic tokens outside of the plasmic tree… 