feat: allow specifying a css layer for ionic component styles to go in

[jacobg]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Please add ability to specify a css cascade layer for Ionic components (Vue or any framework) to use for styling. Although you can import the core styles into a layer like this:

@import '@ionic/vue/css/core.css' layer(ionic);

But the component-specific styles are importing indirectly via the component (e.g., Vue/Vite), so there is no way to currently specify a layer for them.

Describe the Use Case

Tailwind v4 added native css cascade layers. So if Ionic components style without a layer, then Ionic always overrides private application styles using tailwind. If Ionic were to specify a layer, then it would enable the ability to override the styles.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[christian-bromann]

@jacobg thanks for raising the issue.

We've discussed this within the team and trying to identify the root problem here. Would you be open to create a minimal reproducible example that outlines the issue at hand to give us a better idea of what we are dealing with. This will also help use to get a better sense whether this should be something we should add to Stencil (the underlying component architecture) or Ionic Framework. Thanks!

[jacobg]

@christian-bromann thanks for the quick reply and open this to adding this. OK, I'll work on an example soon.