Astro & Panda: Entry layers

[thejackshelton]

I'm using the installation guide below:
https://panda-css.com/docs/installation/astro

In step #5 it mentions the following.

Configure the entry CSS with layers

Add this code to an index.css file imported in the root component of your project.

@layer reset, base, tokens, recipes, utilities;

I'm not sure if there's really any root component for an Astro project. I put it in global.css inside of the styled-system directory. Would that be alright?

Not being able to style things in random parts of my website due to scoped styles was a major pain point for me. For example, I would use a poctcss media query variable plugin, only for it to work within that one page (even with is:global). I had to end up removing the plugin.

[thejackshelton]

Another thing, how does panda handle vendor prefixes? Does it use something like stylis?

[anubra266]

@thejackshelton You might be looking for this
#1154

[thejackshelton]

Oh this is great. I'm currently working on a real world project with Astro, Panda, and Storyblok. I haven't started on a second page yet, and didn't realize that it didn't add the base styles previously.

Looking to upgrade to that asap!

[thejackshelton]

@anubra266 can I use autoprefixer with Astro?

[anubra266]

The astro plugin already adds autoprefixer

[thejackshelton]

The new one? Or the old one, because my styles are broken on iOS

[thejackshelton]

This is the website for reference, still very new but building it right now https://website-8u6.pages.dev

[anubra266]

The old one