Custom CSS Cascade Layers & Separate CSS Files Support

[koba04]

Hi, team👋 Thanks for all your great work!!!👏

Panda uses CSS Cascade Layers and we put all layers like

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

That totally makes sense, but I want to customize layers (@foundation, @component) exposing to an application as the following not to expose internal layers (reset, base, tokens, recipes, utilities) PandaCSS utilizes.

/* design-system.css */

/* This layer has styles for the global scope */
@layer design-system-foundation {
  @layer reset, base;
}

@layer design-system-component {
  @layer tokens, recipes, utilities;
}

And then, the application can use those layers like

@layer design-system-foundation, application-foundation design-system-component, application; 

The application doesn't have to know the internal layer structure and it brings us an abstraction that is useful to organize CSS architecture for the application.

ref. https://css-tricks.com/css-cascade-layers/#aa-managing-a-complex-css-architecture

This also enables us to have separate CSS files for specific layers.

/* foundation.css */
@layer reset, base;

Unfortunately, this doesn't work because Panda checks if @layer has all layers

https://github.com/chakra-ui/panda/blob/main/packages/core/src/context.ts#L358-L361

So I'd like to suggest to be able to define each CSS Cascade Layers like

• Nested Layers Support

/* design-system.css */

/* This layer has styles for the global scope */
@layer design-system-foundation {
  @layer reset, base;
}

@layer design-system-component {
  @layer tokens, recipes, utilities;
}

• Separate CSS Files Support

/* foundation.css */
@layer reset, base;

/* component.css */
@layer tokens, recipes, utilities;

Does this make sense?