Application styles broke after updating to primeng 16.4.0 from 16.3.1

[adri95cadiz]

Describe the bug

After updating to primeng 16.4.0 the styles for the p-button, p-menu and a p-card that I noticed were not working.

Apparently it's related to the primeng lara-light-blue theme, for the moment we have reverted to the version 16.3.1 until the issue is solved.

This issue is also apparent in the primeng.org as website is also looking broken

Environment

It's a enterprise Angular application with the latest versions of primeng and angular, and versions 0.13.3 of zone.js and 5.1.6 of typescript because the latest are not supported.

I have tried to reproduce the issue in stackblitz but the template is broken and i cannot make it work.

Reproducer

No response

Angular version

16.2.6

PrimeNG version

16.4.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17.1

Browser(s)

Chrome 116.0

Steps to reproduce the behavior

No response

Expected behavior

No response

[pbecker-entag]

We suffer from the same issue as our application still uses Bootstrap. We don't explicitly import this ourselves, so I am not quite sure how I would make Bootstrap use a layer. Without it, the specificity of rules gets ignored and I end up with borderless datatables:

As a result we will hold back on version 16.3.1 as well. I would be happy to put some sort of workaround in, but I don't understand how I could force Bootstrap's styling onto a layer.

[dagema1]

This is what worked for me, i imported the reset stylesheets into a layer.

@import url('tailwindcss/base.css') layer(tw-base);
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';
@import 'primeicons/primeicons.css';

/*@import url('tailwindcss/components.css') layer(tw-components);*/
/*@import url('tailwindcss/utilities.css') layer(tw-utilities);*/
@tailwind components;
@tailwind utilities;

[MussaratAziz]

by doing that some of the components styles works but its doesnt work for p-dropdown etc. Any idea why ? @dagema1

[MussaratAziz]

Also I have found a translation bug - in table filters overlay the selected value is not translated. (in both dropdowns) Issue can be found reproduced on demo website of the components: https://primeng.org/table#filter-menu

Thanks for pointing out.

[chainsaws-dev]

by doing that some of the components styles works but its doesnt work for p-dropdown etc. Any idea why ? @dagema1

I think that the cause may be the overriden styles of particular components if you have any. Basically, you have to use inspect page on your frontend and select in options "display layers" then you will see the styles which are in layers and the styles that are not.

This may help you understand your next steps: either to move styles to one file in a separate layer, defining the appropriate layer order with @layer

I had a lot of styles in components before, so I basically moved all of them into one file, normalized it and put all the instructions inside layer scope:

@layer app {

.myclass { ... } ... }

And in the main.css file I have left only @layer base, primeng, app

which defines the layers order (the latter - the more important)

I tried to import from files with setting layer in import, but it was not working for me. (@import url layer(layer-name);)

[MussaratAziz]

I think that the cause may be the overriden styles of particular components if you have any

i dont have any overridden styles for any particular components or p-dropdown :(

[admt1]

We suffer from the same issue as our application still uses Bootstrap. We don't explicitly import this ourselves, so I am not quite sure how I would make Bootstrap use a layer. Without it, the specificity of rules gets ignored and I end up with borderless datatables:

As a result we will hold back on version 16.3.1 as well. I would be happy to put some sort of workaround in, but I don't understand how I could force Bootstrap's styling onto a layer.

Same issue here

[MussaratAziz]

@cetincakiroglu any update or pointers please.

[c0deside]

To fix it, in the theme-base or designer folder, find the file _components.scss and wrap all its contents except, _mixins and _colors, with @layer primeng. For example:

@import '_mixins';
@import '_colors';

@layer primeng {
    @import '_common';

    // ...
    @import './components/input/_inputnumber';
    // ...
}

Also, if your theme has a _extensions.scss file, wrap all component classes with @layer primeng. After that, compile the main scss file of your theme into css.

[SoyDiego]

To fix it, in the theme-base or designer folder, find the file _components.scss and wrap all its contents except, _mixins and _colors, with @layer primeng. For example:

@import '_mixins';
@import '_colors';

@layer primeng {
    @import '_common';

    // ...
    @import './components/input/_inputnumber';
    // ...
}

Also, if your theme has a _extensions.scss file, wrap all component classes with @layer primeng. After that, compile the main scss file of your theme into css.

Yes, I explained something similar some posts above https://github.com/primefaces/primeng/issues/13757#issuecomment-1783057673

[MussaratAziz]

Also I have found a translation bug - in table filters overlay the selected value is not translated. (in both dropdowns) Issue can be found reproduced on demo website of the components: https://primeng.org/table#filter-menu

Thanks for pointing out.

Any Update @cetincakiroglu ?

[pbecker-entag]

@lvluxauji , @SoyDiego thanks for the explanation attempt, but unless I'm completely confused it doesn't match the situation we have. Our application just uses the Nova theme by including it in the angular.json file:

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova/theme.css",
              "src/styles/app.scss"
            ],

The problem we have is that the included Bootstrap styling does not use explicit layers, and the way I understand, CSS will always prefer elements in the anonymous layer over those in named layers, independent of their specificity. See the screenshot I posted last week, which shows the Bootstrap styles winning over the PrimeNG ones.

I think a possible solution for us might be to replace the direct inclusion in the angular.json with some indirection via our own stylesheet, where we import the Bootstrap styles into a named layer. I will have to find some time to play with that and test it properly.

I believe that that precedence the anonymous layer gets will make it hard for projects mixing PrimeNG with other libraries containing CSS that doesn't use layers, they all will need some workaround.

[klebermachado]

What is the possibility of adding a configuration flag to enable or disable the use of layers? This would certainly solve most of the problems.

[MussaratAziz]

What is the possibility of adding a configuration flag to enable or disable the use of layers? This would certainly solve most of the problems.

Excellent suggestion.

[admt1]

still broken and not a official response..

[MussaratAziz]

may be we need to discuss with them here https://github.com/orgs/primefaces/discussions/categories/primeng

[pbecker-entag]

I managed to find a workaround for our project.

The way we used to import the Bootstrap styling is as references in the angular.json file - multiple for the different targets. These reference node_modules/bootstrap/dist/css/bootstrap.min.css.

If I change these references to link to a project file (e.g. src/styles/bootstrap.css), and then have that file import the real stylesheet into a layer, then it works. The Bootstrap file needs to be imported before the PrimeNG styles to make sure its layer gets lower precedence - i.e. it needs to come earlier in the angular.json file.

The file itself just has one non-comment line like this:

@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);

I think that strategy should work for any external CSS files. Tested with PrimeNG 16.9.0.

[Abbasr7]

Unfortunately, this happened to me too, versions 16.4 and later have this problem and are not stable

[krunal-jethva-tark]

I managed to find a workaround for our project.

The way we used to import the Bootstrap styling is as references in the angular.json file - multiple for the different targets. These reference node_modules/bootstrap/dist/css/bootstrap.min.css.

If I change these references to link to a project file (e.g. src/styles/bootstrap.css), and then have that file import the real stylesheet into a layer, then it works. The Bootstrap file needs to be imported before the PrimeNG styles to make sure its layer gets lower precedence - i.e. it needs to come earlier in the angular.json file.

The file itself just has one non-comment line like this:

@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);

I think that strategy should work for any external CSS files. Tested with PrimeNG 16.9.0.

Hey, I was doing the same this and it worked for me but As I continued my development, I came across the issue that by default bootstrap's _utilities styles have !important so to remove that we need to do something like this:

styles.scss

$enable-important-utilities: false; // this prevents bootstrap from applying !important in utility classes.
@import "bootstrap/scss/bootstrap.scss";

What it will do is when angular compiles bootstrap.scss , since I have set a value $enable-important-utilities to false it will not generate _utilities with !important.

so, my question is how I can import bootstrap's scss as layer.

[BeGj]

For anyone having problems with TailwindCSS classes not being added to the build when using ng serve with VITE, see my reply here: https://github.com/primefaces/primeng/issues/14255#issuecomment-1887225435

[FrancoisJULIENNE]

WIth 16.3.1

@charset "UTF-8";
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "~primeng/resources/primeng.min.css";
@import "~primeng/resources/themes/md-light-indigo/theme.css";
@import "~primeicons/primeicons.css";
@import "primeng-custom-theme";

With @layer (>=16.4.0)

@charset "UTF-8";
@layer tw-base, primeng-custom, primeng, tw-components, tw-utilities;

@import "~tailwindcss/base.css" layer(tw-base);
@import "~tailwindcss/components.css" layer(tw-components);
@import "~tailwindcss/utilities.css" layer(tw-utilities);

@import "~primeng/resources/primeng.min.css";
@import "~primeng/resources/themes/md-light-indigo/theme.css";
@import "~primeicons/primeicons.css";
@import "primeng-custom-theme"; /* add @layer primeng-custom { your primeng custom scss imports } */

THX @BeGj !

[rodrigodan]

I also had this problem. And apparently this problem was solved exactly today on January, 18nd. Yesterday I had tried in the version 17.3.3 and 16.4.0 and didn't work. When I downgrated to the 15.4.0 it worked. When It was today, I tried it again and it worked also in the version 17.3.3.

Apparently, the problem in the lib was that the theme.css from 'node_modules/primeng/resources/themes/lara-light-blue/theme.css', was conflicting with something. Another thing that they updated was the p-menubar.

The directive [model], was something that was not part of the p-menubar. With their correction, it's now working. And in the end of the day, I think it's more trustworthy, to run your application in production in the downgrated version, than in the 16.4.0 or 17

[francoisrob]

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
...

~Primeng docs - CSS Layer - Tailwind

[andykurz]

I managed to find a workaround for our project. The way we used to import the Bootstrap styling is as references in the angular.json file - multiple for the different targets. These reference node_modules/bootstrap/dist/css/bootstrap.min.css. If I change these references to link to a project file (e.g. src/styles/bootstrap.css), and then have that file import the real stylesheet into a layer, then it works. The Bootstrap file needs to be imported before the PrimeNG styles to make sure its layer gets lower precedence - i.e. it needs to come earlier in the angular.json file. The file itself just has one non-comment line like this:

@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);

I think that strategy should work for any external CSS files. Tested with PrimeNG 16.9.0.

Hey, I was doing the same this and it worked for me but As I continued my development, I came across the issue that by default bootstrap's _utilities styles have !important so to remove that we need to do something like this:

styles.scss

$enable-important-utilities: false; // this prevents bootstrap from applying !important in utility classes.
@import "bootstrap/scss/bootstrap.scss";

What it will do is when angular compiles bootstrap.scss , since I have set a value $enable-important-utilities to false it will not generate _utilities with !important.

so, my question is how I can import bootstrap's scss as layer.

Any ideas i have the same problem.

[krunal-jethva-tark]

I managed to find a workaround for our project. The way we used to import the Bootstrap styling is as references in the angular.json file - multiple for the different targets. These reference node_modules/bootstrap/dist/css/bootstrap.min.css. If I change these references to link to a project file (e.g. src/styles/bootstrap.css), and then have that file import the real stylesheet into a layer, then it works. The Bootstrap file needs to be imported before the PrimeNG styles to make sure its layer gets lower precedence - i.e. it needs to come earlier in the angular.json file. The file itself just has one non-comment line like this:

@import "../../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);

I think that strategy should work for any external CSS files. Tested with PrimeNG 16.9.0.

Hey, I was doing the same this and it worked for me but As I continued my development, I came across the issue that by default bootstrap's _utilities styles have !important so to remove that we need to do something like this: styles.scss

$enable-important-utilities: false; // this prevents bootstrap from applying !important in utility classes.
@import "bootstrap/scss/bootstrap.scss";

What it will do is when angular compiles bootstrap.scss , since I have set a value $enable-important-utilities to false it will not generate _utilities with !important. so, my question is how I can import bootstrap's scss as layer.

Any ideas I have the same problem.

Despite many efforts, we haven’t yet found a solution to this issue.Currently, the application I was developing consists of a simple 2-3 page UI for handling secondary admin-related tasks. And my team and client were primarily concerned with functionality rather than the UI. So, I overlooked the fact that _utilities comes with the !important flag and tried to develop very simple UI.

And in main project where there's some complex UI and component. Our team has decided to not update prime-ng version until we found some solution, Since our main application is quite stable and doesn't need latest features.

So, my suggestion is do the same. P.S. I have not gone through a feature prime-ng is offering in versions after 16.4.0

[ThoSap]

If this documentation is not sufficient for the community needs then the PrimeTek team needs to improve this documentation: https://primeng.org/guides/csslayer

[saiful-70]

Looks like same issue #14255 You can try this solution

[Triskae]

Same issue here When using the solution above, it works partially, everything seems to work fine except for responsive classes in tailwind.... When I use xl:flex for example, the style appears in the browser code inspector, but the UI does not update accordingly, can you confirm that you have also this problem @francoisrob ?

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
...

~Primeng docs - CSS Layer - Tailwind

[BeGj]

Same issue here When using the solution above, it works partially, everything seems to work fine except for responsive classes in tailwind.... When I use xl:flex for example, the style appears in the browser code inspector, but the UI does not update accordingly, can you confirm that you have also this problem @francoisrob ?

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
...

~Primeng docs - CSS Layer - Tailwind

https://github.com/primefaces/primeng/issues/13757#issuecomment-1887226811 / https://github.com/primefaces/primeng/issues/14255#issuecomment-1887225435 Is it the same as this issue i mentioned above? 🤔

[francoisrob]

Same issue here When using the solution above, it works partially, everything seems to work fine except for responsive classes in tailwind.... When I use xl:flex for example, the style appears in the browser code inspector, but the UI does not update accordingly, can you confirm that you have also this problem @francoisrob ?

This worked for me on "primeng": "^17.5.0" Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
...

~Primeng docs - CSS Layer - Tailwind

To me everything works including responsive utilities. I'm using tailwind@3.4.1 and primeng@17.5.0

[Triskae]

Same issue here When using the solution above, it works partially, everything seems to work fine except for responsive classes in tailwind.... When I use xl:flex for example, the style appears in the browser code inspector, but the UI does not update accordingly, can you confirm that you have also this problem @francoisrob ?

This worked for me on "primeng": "^17.5.0" Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
...

~Primeng docs - CSS Layer - Tailwind

#13757 (comment) / #14255 (comment) Is it the same as this issue i mentioned above? 🤔

Exactly the same, working now, thank you very much !!

Maybe the primeng version need to be changed to match this comment, since the problem seems to be introduced by vite right ?

Thank you very much !

[mylifeandcode]

Current version of PrimeNG is 17.9 at the time I'm writing this, and the issue still remains. Not all of us are using Tailwind, so the Tailwind-specific approaches above don't apply.

[mjsprengers]

I solved it like this:

@layer tailwind, primeng;
@layer tailwind {
  @import "./tailwind/theme";
  @tailwind base;
}
@layer primeng {
  @import "primeng/resources/primeng";
}
...
@tailwind components;
@tailwind utilities;

The theme contains our designer ngprime components (e.g. tags)

[leogouveia]

Hi there, Currently the company I work for is using Firefox version 81 and it's not compatible with @layers, so everything is broken. It would be nice if there was a way to use a retro-compatible theme without @layers. Unfortunately, some companies stick with old stuff (even if it's broken and has multiple security holes).

[tomavic]

Hi there, Currently the company I work for is using Firefox version 81 and it's not compatible with @layers, so everything is broken. It would be nice if there was a way to use a retro-compatible theme without @layers. Unfortunately, some companies stick with old stuff (even if it's broken and has multiple security holes).

Indeed! This needs to be explained in the documentation as it will be the direct way to customise your theme.

[tomavic]

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

This worked for me for v16.x and v17.x This setup will give tailwind high specificity as well as include the primeng theme files.

[MykhayloZelisko]

My working configuration for v17.x with style=scss. It doesn't work without @layer primeng wrapper

@use "sass:meta";

@layer default, primeng;

@layer default {    // my custom styles
  @include meta.load-css("reset");
  @include meta.load-css("fonts");
}

@layer primeng {
  @include meta.load-css("primeng/resources/themes/lara-light-blue/theme.css");
  @include meta.load-css("primeng/resources/primeng.css");
}

[silvelo]

This worked for me on "primeng": "^17.5.0"

Prepended in my styles.css:

@layer tailwind-base, primeng, tailwind-utilities;
@import 'primeng/resources/themes/mdc-light-indigo/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}
...

~Primeng docs - CSS Layer - Tailwind

This work for me with angular@^17,primeng@^17 and tailwind@^3.4, now the problem is with cloudflare and auto minify, this utility trim white spaces of layer css properties, causing them to break styles. The solution for now is to disable the option in cloudflare.

[GitStorageOne]

Doesn't work

Angular 17.3.6   
PrimeNG 17.15.0   
Bootstrap v5.3.3   
Firefox 125.0.2  

angular.json

"styles": ["src/assets/test.css"]

test.css

@layer bootstrap-reboot, primeng;
@import "../../node_modules/bootstrap/dist/css/bootstrap-reboot.min.css" layer(bootstrap-reboot);

@import "primeng/resources/primeng.min.css";
@import "primeng/resources/themes/lara-dark-blue/theme.css";

From browser I can see, that resulting CSS includes layers:

@layer bootstrap-reboot, primeng;

/* node_modules/bootstrap/dist/css/bootstrap-reboot.min.css */
@layer bootstrap-reboot {
  /*!
   * Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
   * Copyright 2011-2024 The Bootstrap Authors
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
  :root,
  [data-bs-theme=light] {
    --bs-blue:#0d6efd;
AND SO ON
@layer primeng {
  .p-component,
  .p-component * {
    box-sizing: border-box;
  }
  .p-hidden {
    display: none;
  }
AND SO ON

[johnscott999]

I had this issue with a fresh stack blitz angular instance: Working Demo

I tried using layers, and preflight was still getting prioritized over prime ng. when I opened up the generated CSS from the angular build, I found the layer declarations were getting set above the order declaration.

global_styles.css

/* Add application styles & imports to this file! */
@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

output.css

 @layer primeng {
  /* rules here */
 }

 @layer tailwind-base, primeng, tailwind-utilities

 @layer tailwind-base {
   /* rules here */
 }

because layers are ordered in the order they are declared in, and the ordered layer statement is at the bottom of the output, that statement does not change the order of the layer. I suspect if putting the layer statement above the import statements was valid CSS, that would fix the problem, but that's invalid css.

fix was to split the global_styles.css doc into two, one to declare the layers and order them, then the second to modify the layers with their respective rules:

layers.css

@layer tailwind-base, primeng, tailwind-utilities;

global_styles.css

@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

finally, I had to add the new CSS file to the angular.json architect.build.options.styles

// ...
"options" : {
  // ...
  //            vvvvvvvvvvvvvvvvvv <- add this, make sure it's before the global styles so it gets declared first
  "styles": ["src/css-layers.css", "src/global_styles.css"],
  // ...

[JacobSiegle]

Not sure if mentioned anywhere but sounds like it will be a config option in v18 - https://www.reddit.com/r/Angular2/comments/1cvn2zp/comment/l4s7llk/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

[liorstezki]

Please add an option to use PrimeNG without layers. We're using both Bootstrap and PrimeNG, and the layers are breaking many of our styles.

[ThoSap]

@liorstezki I think that is the plan for PrimeNG v18.0.0, see the PrimeVue implementation: https://v4.primevue.org/theming/styled/#csslayer https://primeng.org/roadmap

[IreneTepe]

Please add an option to use PrimeNG without layers. We're using both Bootstrap and PrimeNG, and the layers are breaking many of our styles.

Same!

[pferrariog]

The styling issues solved in my case by removing css reset code I have, something like:

// css reset
* {
  font-size: 16px;
  padding: 0;
  margin: 0;
}

you put this in styles.css?

im having problem with this base border that i can't override in styles.css

[kkeld]

Not sure if mentioned anywhere but sounds like it will be a config option in v18 - https://www.reddit.com/r/Angular2/comments/1cvn2zp/comment/l4s7llk/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button

Oh. My. God.

This is a very crucial information that needs to be declared on their website, not on Reddit geez...

[atamansv]

Hi there, Currently the company I work for is using Firefox version 81 and it's not compatible with @layers, so everything is broken. It would be nice if there was a way to use a retro-compatible theme without @layers. Unfortunately, some companies stick with old stuff (even if it's broken and has multiple security holes).

Same. We are limited by Chrome 79, and objectevely there are at least 2% of browsers that don't support @layerhttps://caniuse.com/css-cascade-layers Currently unable to find a way to polyfill in an angular project

[cagataycivici]

How about we do an update that offer a theme.css with no layers. So each team has two modes; theme.css theme-nolayer.css.

Please note that, in v18 everything is reactive and dynamic, there is no theme.css and cssLayer is just a config as in.

https://primevue.org/theming/styled/#options

[JacobSiegle]

@cagataycivici that would be great as temp solution. Would be very interested in using that fix or just primeng 18, whichever lands first.

[skappler]

How about we do an update that offer a theme.css with no layers. So each team has two modes; theme.css theme-nolayer.css.

Please note that, in v18 everything is reactive and dynamic, there is no theme.css and cssLayer is just a config as in.

https://primevue.org/theming/styled/#options

This would be highly appreciated. Can you give us an estimation on when there will be either this fix or v18?