Panda classes overriden by non-layered CSS

[0ubbe]

Description

First of all, thanks for the fantastic work with this library, it is a great initiative 🙌🏽

I'm trying to migrate our Chakra application to Panda + Ark UI. We want to use RSC, and having to wait for Chakra to have real support for that eventually is an overkill for us 💀

Adding Panda to our NextJS app was painless following the docs. We also re-used Chakra's theme into Panda (with some minor adjustments).

The problem we're encountering, is that Chakra UI uses Emotion, which does a typical top-level CSS reset:

That ends up applying some styles to HTML native elements:

When we try to style a button in our app with Panda, we run into a specificity issue 😢

All Panda's utilities (and styles) are declared in layers; any top-level CSS easily overrides those.

While it is excellent Panda is using layers, it feels those can be easily, unintentionally overridden by external CSS from a framework or library...

It would be beneficial if we could make opt-in out of layers in Panda:

{
  useLayers: false
}

So that we can migrate existing apps with non-layered CSS out of our control easily. Our app is big, and if we aim to migrate out of Chakra to Panda we need to do it step-by-step.

Link to Reproduction

https://chakra-ui.com/getting-started/nextjs-guide

Steps to reproduce

1. Install Chakra UI with NextJS
2. Install Panda
3. Try to style a button via Panda in the NextJS app changing its background-color
4. See the styles not being applied due to specificity

JS Framework

NextJS

Panda CSS Version

0.19.0

Browser

Any

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

hey, there are a few solutions to choose from:

• you can scope the Chakra-UI css reset with <ChakraProvider resetScope=".some-scope">
• you can remove Panda CSS @layers with a postcss plugin https://www.npmjs.com/package/@csstools/postcss-cascade-layers
• IF your Panda styles are contained to a specific part of your app, not mixed with Chakra styles, (e.g a widget), you can make use of the shadow DOM to completely isolate the styling, with react it's as easy as wrapping your component with react-shadow

I don't think removing layers would "just work" due to how the CSS is currently generated (it's not deterministically generated in the ideal order = the same as the one provided by the @layers), this is addressed in #1544 but even then I'm not sure it would still behave 100% correctly, that's why I recommend using the postcss plugin linked above if you really need to remove layers, since it emulated the layers specificities by adding things in the selector

all that being said, I don't feel like this is really a Panda issue but rather an outside source spreading global styles that should instead be scoped somehow, hopefully here this is easily possible with Chakra resetScope

[0ubbe]

Thanks for the thorough answer 🙏🏽 🙇🏽 . I'll give a go to the proposed solutions and let you know how it went 🙌🏽

[likeben]

You can add a hook to remove the css layer at-rule of the final CSS

hooks: {
  "cssgen:done": ({ artifact, content }) => {
    if (artifact === "styles.css") {
      return content.replace("@layer utilities", "body");
    }
  },
},

[JuhG]

Running into this, I think a better solution is to put the styles on the global space, outside of any layers. We write our main CSS with Panda, these are not "utilities", these are the app level code we want to ship. I don't see any reason to lower specificity on them. Any global CSS coming from a random package being able to overwrite them seems wrong. But also nesting it under body introduces another set of issues :)

A better solution is just removing the layer. I would love a first party solution, something like:

{
  layers: {
    utilities: false,
  },
}

But asking on discord core team didn't seem like the idea.

Here's out solution, based on recommendation from @astahmer.

Create a helper that moves all styles out of utilities layer:

const removeUtilitiesLayer = (css: string) => {
  const root = postcss.parse(css);

  root.walkAtRules("layer", (atRule) => {
    if (atRule.params === "utilities") {
      const parent = atRule.parent;

      const nodes = atRule.nodes;
      if (nodes) {
        nodes.forEach((node) => {
          parent.insertBefore(atRule, node.clone());
        });
      }

      atRule.remove();
    }
  });

  return root.toString();
};

Use it in your panda config:

{
  hooks: {
    "cssgen:done": ({ artifact, content }) => {
      if (artifact === "styles.css") {
        content = removeUtilitiesLayer(content);
      }
      return content;
    },
  },
}