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

[jacobg]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] 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.

[reslear]

for Tailwindcss v4 works with ionic well, need replace in our css:

@import "tailwindcss";

to

/* https://tailwindcss.com/docs/preflight#disabling-preflight */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
/* https://github.com/ionic-team/ionic-framework/issues/30369 */
/* @import "tailwindcss/preflight.css" layer(base);*/
@import "tailwindcss/utilities.css" layer(utilities);

[aeharding]

I'd love to see this. I've been fighting with some CSS specificity changes due to https://github.com/stenciljs/core/pull/5926. With that change, all stencil component css is appended to the end of HEAD after my app's css file, and is therefore overridden. Before, stencil's css was injected in the middle and specificity was different.

Explicit layers would make this issue go away.

The worst part is, in dev, Vite will append my app's css in <style> in dev at the end (running after stencil's append at the end), so specificity is actually different in prod builds, vs dev!

In addition, CSS layer specificity is always lower than CSS defined without layers. So there's no way to write a layer (e.g., app css layer) that's higher than stencil component css specificity.