How to avoid unlayered style's priority

[minsoo-web]

Hi, I'm trying to create a design-system package using panda.

I encountered a problem with the pandacss that I was using so well.
It was that the unlayered style defined in the app code had a higher priority than panda's @layer styles.

I am attaching the codesandbox link to check this.

How do I get priority regardless of the css of the people I use?

The first solution I thought of is to use the important keyword.
But I'm not sure this is the answer.

Should I adopt the CSS-in-JS method to provide an independent style regardless of my environment?

I'd appreciate it if you could give me your opinion.

[astahmer]

I think your case is similar to the one discussed in Panda's discord here so I'm going to paste the relevant part of the discussion for better search indexing:

---

Right now im using pandas with mantine v7. And it works well. But there is one issue. When overriding mantine styles with classNames prop, the styles are only applied if !important is used, which is kinda annoying. My question is, how can i make it so that i wont have to keep applying that !important? I tried adding another layer and importing mantine like

@layer reset, base, tokens, recipes, utilities, mantine;
@import "@mantine/core/styles.css" layer(mantine);

But no dice.

---

I encountered a similar issue where I had to use !important to make utilities function properly. Eventually, I discovered that I needed to import the index.css file before the CSS files of other libraries.

/* index.css */
@layer reset, base, tokens, recipes, utilities;

// options.tsx

// need to import index.css first!
import "./index.css";
import "@some.other.library.css";

[minsoo-web]

Thank you for your kind reply 🙇‍♂️

I think totally understand about your review's purpose.

But in my case is something different 😓

In case of user who use my design-system library (build by panda), He needs delete any tag selector.
Because, tag selector with no layer has bigger priority than layer css.

Example situation is below

/*  in app code (who installed my library)  */
/*  file name is index.css */
button {
  background-color: transparent;
}

// in app code
import "@my-library/styles.css";
import "./index.css";

const Foo = () => {
  return <>
     {/* this button's background is always transparent until index.css is imported */}
    <Button  variants="default" />
  </>
}

So, back to my question, if it is ok that using important keyword only for tag selector use case.

Or I wonder if the answer will be to use CSS-in-JS, which can prevent this situation itself.

[astahmer]

oh ok yeah, my bad. hm I guess this is fine to use !important in those cases yes ? @anubra266
but if you can avoid the situation entirely and just use @layers it would probably be even better I guess !

[anubra266]

@astahmer @minsoo-web I'd use !important in one off miniature styles but if it's going to be a lot of styles, I'd rather it's all encapsulated in a layer.

[minsoo-web]

Thank you guys. It was a great experience to learn a lot.

I will close this discussion.