Variant override not having an effect in production

We are having some issues with the page “Home Next” in

ISSUE: the copy under the header in the top hero has a left-align in “Tablet (Landscape)”, but it does not translate over through SSR… See rendered page here:
REASON: Looks like the css rule for .HomeNext__text__uy756 is being written twice! And this causes the second instance to override the responsive version… (see picture). The responsive code is only present once though

Additional info
• The text we are trying to left-align is in a slot of a component…
• There is another instance of that component on the page, but for the other component the similar text is not left-aligned… Could it be that there is a name-clash here between the two components, and the css rule for the second is overwriting the first?
Please fix. We are trying to get a new version of our main landing-page out, and this is holding it up! @yang

(unrelated: If stuff on a page has responsive overrides, and you copy it to another part of the page, the overrides disappear)


Hi @rear_vole, sorry I was unavailable - we’re taking a look now

When you just load this page in a brand new Next.js project do you see the same issue? (I couldn’t repro this:

Are you by any chance injecting the same CSS twice across multiple PlasmicRootProviders?

@yang I was using some older npm packages (react-loader). Working on upgrading them to see if it makes a difference. I should not be injecting CSS multiple times. These both come from the same CSS blob.

I will try with updated packages and let you know if I see anything different

@yang upgrading did not help. I can clearly see that this is a name-clash of some sort.
We have a component that is instantiated twice on the page. Within it, in a slot, some text is left-aligned in one instance, and centered in the other. Both texts get the same class HomeNext__text__uy756:

text 1

<div class="plasmic_default__all plasmic_default__div __wab_text HomeNext__text__uy756">Join the only <span class="plasmic_default__all plasmic_default__span" style="font-style: italic;">truly</span> personalized tea club to discover your new favorites or shop now to explore thousands of premium top-rated teas, and hundreds of the world's best tea brands.</div>

text 2

<div class="plasmic_default__all plasmic_default__div __wab_text HomeNext__text__uy756">Looking for the best gift for the tea lover in your life? You're in the right place.</div>

These items have styles set independently, and styles are emitted for each of them, but their styles are assigned to the same class-name. I am using version 1.0.170 of loader-react for the above

Is codegen different for loader-nextjs and loader-react? I can see in the example you pointed to above that they get different class-names…

I can try it with codegen as well, I don’t believe that they should be any different since loader just uses codegen behind the scenes

I do think I generally saw the same CSS classes being duplicated in your page though, not just for a single component, but globally

aha… so you are seeing something weird…

I am simply doing this:

//BUG: As of 2022-03-26, a loader is required even though we are passing in data
export const PLASMIC = initPlasmicLoader({
  projects: [
      id: meta.projectId,
      token: ''            //API token should not be necessary, as we are not fetching anything.. See BUG note above
  // Fetches the latest revisions, whether or not they were unpublished!
  // Disable for production to ensure you render only published changes.
  preview: false,

//Register landing page components

//BUG: As of 2022-03-26, plasmic puts web-rendered components in the pageData.bundle.modules.browser. When rendering on server-side these
//     need to be in *.server. Move the components over, but also make sure to not break if they fix this
pageData.bundle.modules.server = [...pageData.bundle.modules.server, ...pageData.bundle.modules.browser];

export const Content = () => (
  <PlasmicRootProvider prefetchedData={pageData} loader={PLASMIC}>
    <PlasmicComponent projectId={meta.projectId} component={meta.path} />

based on data fetched like this:

pageData[page.path] = await PLASMIC.maybeFetchComponentData(page.path);

@yang ^

@yang I think the CSS duplication you are referring to above is due to me including multiple pre-rendered plasmic pages in one overarching HTML page (there are some other outstanding questions related to how to reduce the duplication). This is not causing the problem referred to here though.

I just did a new experiment. Updating the color of the 2nd block to red also makes the first block red in the rendered output (but not in the editor.). However, this time the color error also shows up in the plasmic preview… (project, page “Home Next”)

There is clearly something wrong here. I made a change to a slot item inside a component, and a slot item in another component took on the same style…

The slot contents were copied from the first component, and it looks like in some way, that copied an attribute (e.g. a hash) that made the two texts share CSS name. When I deleted the 2nd block and recreated it, they are no longer connected, and it is no longer overriding the first…

So: I think I have a solution for now, but there is a very clear and obvious bug waiting for you in the project mentioned above. Details
• Hero Split Image (first module)
◦ Slot
:black_small_square:︎ stack
• header
• text (this gets CSS overridden from the one below)
• …
• …
• Hero Split Image (second module)
◦ Slot
:black_small_square:︎ stack
• header
• text (css on this overrides css on the one above. I.e. make this green, and the one above becomes green)
• …
The error does not show in the editor, but it shows in the preview and in rendered error. The error is present both with and without hydration

Thanks for the helpful added details, taking a look

I’m trying unsuccessfully to repro this - I’m probably not understanding what is being referred to by “blocks”

Here is a screenshot from the editor

And here is one from preview

Are you seeing the delta when you view this project in teh editor?

If you go to the highlighted node marked below, and change its color, then the top copy also changes color when viewed in preview

(thank you for looking)

This…doesn’t seem to be happening for me :open_mouth: Here’s another video, is it OK if I try this on the original project? (I was trying on a copy, but just in case that makes a difference)