Prioritise panda-css styles over chakra-ui styles to progressively migrate a component library #2018

mayteio · 2024-01-16T22:25:27Z

mayteio
Jan 16, 2024

Context

We've developed a second generation component library using panda-css. Our first-gen uses @chakra-ui/react. We've got a monster app to migrate over, so we're trying to do this progressively by changing the components used on a feature-by-feature basis (replacing around 700 import { xyz } from "our-old-chakra-lib") progressively.

When I try to import components that use panda-css, the chakra-ui styles for selectors like button, I have to !important many styled-props like color.

Questions

Is there a way to make the import "./global.css" styles take priority over the chakra-ui styles that are injected in the <head /> tag of the page? Would ordering the imports after <head><link ... /></head>s generated by chakra-ui?
Has anyone done this before?
Can you offer any advice on a migration path here that won't leave us with 1000s of ! declarations?

Answered by mayteio

Jan 25, 2024

Hey thanks for the suggestions! @csstools/postcss-cascade-layers just worked automagically by adding it to the postcss.config.cjs alongside the panda plugin:

const path = require("path");

module.exports = {
  plugins: {
    "@pandacss/dev/postcss": {
      configPath: path.resolve(__dirname, "../../libs/styled-system/panda.config.ts"),
    },
    "@csstools/postcss-cascade-layers": {}
  },
};

Thanks so much!

View full answer

astahmer · 2024-01-17T00:08:14Z

astahmer
Jan 17, 2024
Maintainer

you can try using this postcss plugin to remove the @layer (and still emulate their specificity)
https://www.npmjs.com/package/@csstools/postcss-cascade-layers
on the ChakraProvider you can set resetCSS={false} to remove the global styles from Chakra that affects your whole app (or use the resetScope to specify a selector)
you could generate that CSS reset on your side and include it in the same @layer (reset) as Panda
https://gist.github.com/astahmer/1154453909b1d4b6b6ce06aad4eace89

btw, since you're coming from Chakra, here's a Panda preset that mirrors the base chakra theme, maybe that can help you migrate some parts
https://github.com/astahmer/crepe-ui/tree/main/packages/preset-chakra

2 replies

mayteio Jan 17, 2024
Author

Thanks @astahmer! Great info. I will go through each of these and report back on what was successful.

emulate - sounds complicated and prone to error
resetScope - sounds most promising. Add this, and add the class to every component (rather than reset at the page level). Does the chakra reset differ greatly from the panda reset?
I guess I can generate and diff the chakra reset against the panda reset

Thanks for the preset! We're already well down the rabbit hole, we probably should have started with that 🫠

mayteio Jan 25, 2024
Author

Hey thanks for the suggestions! @csstools/postcss-cascade-layers just worked automagically by adding it to the postcss.config.cjs alongside the panda plugin:

const path = require("path");

module.exports = {
  plugins: {
    "@pandacss/dev/postcss": {
      configPath: path.resolve(__dirname, "../../libs/styled-system/panda.config.ts"),
    },
    "@csstools/postcss-cascade-layers": {}
  },
};

Thanks so much!

Answer selected by mayteio

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Prioritise panda-css styles over chakra-ui styles to progressively migrate a component library #2018

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Prioritise panda-css styles over chakra-ui styles to progressively migrate a component library #2018

Uh oh!

Uh oh!

mayteio Jan 16, 2024

Context

Questions

Replies: 1 comment · 2 replies

Uh oh!

astahmer Jan 17, 2024 Maintainer

Uh oh!

mayteio Jan 17, 2024 Author

Uh oh!

mayteio Jan 25, 2024 Author

mayteio
Jan 16, 2024

Replies: 1 comment 2 replies

astahmer
Jan 17, 2024
Maintainer

mayteio Jan 17, 2024
Author

mayteio Jan 25, 2024
Author