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

[tomer953]

yes same here downgrading to 16.3.1 works

[WynieCronje]

Seems like the css @layer primeng got introduced and broke importance of styles.

[sebastienchevriaupro]

It can be managed by adding this in the main css file : @layer base, primeng, app; base : for me it's a reset css (padding = margin = border = 0) primeng : the one coming with primeng app: specific css over primeng

[cetincakiroglu]

Could you please clear browser cache and try again

[tomer953]

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;
}

[SoyDiego]

I had the same problem and clearing the cache (Ctrl+F5 in Firefox or Ctrl+Shift+Delete in Chrome) fixed the problem.

[adri95cadiz]

I tried to clear cache, but it probably has to do with these things:

Seems like the css @layer primeng got introduced and broke importance of styles.

It can be managed by adding this in the main css file : @layer base, primeng, app; base : for me it's a reset css (padding = margin = border = 0) primeng : the one coming with primeng app: specific css over primeng

We use reset.css, prime-flex and global styles on top of primeng so probably it will have to do with that.

Tomorrow I will try these fixes and update if it works.

[adlaonmd]

I can't confirm for everyone but the default sidebar close icon moved from right to left. It causes styling issue on my end, especially in combination with custom header template.

Downgrading from 16.4.0/16.4.1 to 16.3.1 works. I found that there is something off with the CSS in the latest version.

I cannot send an image right now but I'll update again if needed.

[SoyDiego]

I don't know if is good idea but someone has created a new post in Discussions about some issues or bugs. Maybe we can replicate all in one place or is better in different posts? This is the post: https://github.com/orgs/primefaces/discussions/130

Thanks

[psarno]

Updating from 16.3.1 to 16.4.1 broke layout.

This is using the CSS and theme from the Cloudflare CDN.

Impacting all themes.

https://cdnjs.cloudflare.com/ajax/libs/primeng/16.4.1/resources/primeng.css

[kuhnlud]

Same here, I updated from PrimeNG 15 to latest version of 16, And many style has broke. I try to resolved it one by one, but It is annoying to see so much difference between two version.

[WynieCronje]

Maybe this should be reverted. And treated as a major update. Since it breaks for many users. Not something that is expected in a minor release

[kent-hervey]

Same here....

[bytebruno]

In my point of view this is a major update as well. Any updates on this topic?

[sebastienchevriaupro]

As I said earlier, you need to use CSS layers now if you want to put some CSS styles before Prime CSS ones

[bytebruno]

Your solution works for your scenario. What do you do if you have css imported on your angular.json related to other packages that doesn't use css layers? Maybe I'm missing something, but even if I "force" to apply layers in any imported css, I still lose the current style due to the specificity of css being applied to the scope of the css layer. Even if we decide to remove or refactor other dependencies to fix this, the truth here is that this update breaks the current styles and should be treated as a breaking change. Anyways, regardless the version number, we are not updating this until getting a clearer vision of what needs to be done to make this work with other dependencies.

[pete-mcwilliams]

angular.json styles seem to keep the ordering specified so might be able to specify primeng import after the import of the file containing the @layer layer1, layer2 line which needs to be before any other @layer. We moved the import inside an scss file to try to take control of layer ordering.

Current tailwind versions do not support layers as css layers, which caused us some issues. @import css in scss adds the css to top of output css files... primeng layers would be the first layer and adding css layer ordering to theme file for project would have no effect. We have worked around these issues pulling together some information from issues on tailwind etc. https://github.com/tailwindlabs/tailwindcss/discussions/6694#discussioncomment-4716568

I include our theme.scss which solves the layer ordering and tailwind missing layers, which might assist others working around the issue here. meta.load-css seems to keep the imports in correct order.

I would also classify this as a breaking change

@use 'sass:meta';

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

/**
 * Inject tailwind files inside layers so that primeng can be ordered correctly in the css layers. tailwind v4 may add layers and this will need to be looked at again.
 * https://github.com/tailwindlabs/tailwindcss/discussions/6694#discussioncomment-4716568
 */

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}
@tailwind utilities;
// not used yet but might be required in future @tailwind variants;

@import './app-base';

@include meta.load-css('../../../../../node_modules/primeng/resources/primeng.min');

@import './app-components';
@import './app-utilities';

[BeGj]

I'm using TailwindCSS(version 3.3.3) together with PrimeNg and after upgrading from 16.3.1 to 16.5.0 our styles got rekt. Tailwindcss is configured to us preflight/CSS-reset (https://tailwindcss.com/docs/preflight). p-input-text boxes, buttons and more are getting overwritten by Tailwindcss base.css.

Has anyone else got this issue and may solve it?

[pete-mcwilliams]

I'm using TailwindCSS(version 3.3.3) together with PrimeNg and after upgrading from 16.3.1 to 16.5.0 our styles got rekt. Tailwindcss is configured to us preflight/CSS-reset (https://tailwindcss.com/docs/preflight). p-input-text boxes, buttons and more are getting overwritten by Tailwindcss base.css.

Has anyone else got this issue and may solve it?

tailwind is not in layers primeng is, primeng styles will be overwritten by anything not in layers, check my suggestion to solve your issue immediately above your post.

[BeGj]

I'm using TailwindCSS(version 3.3.3) together with PrimeNg and after upgrading from 16.3.1 to 16.5.0 our styles got rekt. Tailwindcss is configured to us preflight/CSS-reset (https://tailwindcss.com/docs/preflight). p-input-text boxes, buttons and more are getting overwritten by Tailwindcss base.css. Has anyone else got this issue and may solve it?

tailwind is not in layers primeng is, primeng styles will be overwritten by anything not in layers, check my suggestion to solve your issue immediately above your post.

Thanks for the reply. I've tried wrapping the tailwindcss base in a layer, but the problem persists. For instance is the .p-inputtext class overwritten by tailwindcss base "[type='text']" selectors.. making all input boxes completely white and squared.

edit: Using vela-orange theme btw!

[BeGj]

Alright, so I solved it on my end. Inspired by @pete-mcwilliams reply above and this link https://css-tricks.com/css-cascade-layers/

Here's my styles.css (manually copied over by writing so I apologize for any typos):

@layer tw-base, primeng, tw-components, tw-utilities;

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

// other imports in between here such as openlayers...

@import 'customized-primeng-theme.css';
@import '../../node_modules/primeng/resources/primeng.min.css';
@import '../../node_modules/primeicons/primeicons.css';

For some reason it worked with @import(../../node_modules/tailwindcss/base.css) layer(tw-base); and not with @layer tailwind-base { @tailwind base; }

[MussaratAziz]

any update on this issue? i tried above suggestions none worked for me. Thanks everyone

[pete-mcwilliams]

Not much to go on Mussarat, in chrome inspect click on the primeng layer, you should see some ordering of the layers in your app. as shown in image... primeng should not be the only one or be at the top if you are using tailwind, generally layer specificity changes the order of your css which is what you have to work through.

[1c3f0x84]

any update on this issue? Can't upgrade version :(

[adlaonmd]

Just my own update for this one. Turns out the @layer primeng messes with the normalize.css that I use. I decided to just get rid of it and I don't have any issues with the layouts anymore.

There's also some few changes like the outlined button not being styled using the class anymore but with a [outlined]="true" property. Other than that, everything seems good.

I also use the dynamic theme switching and I don't see any issues with it.

[admt1]

Same here with Saga Blue theme

[Romi1122]

Have the same issue. It seems like the importance of stylesheets from the node modules switched.

In my case, a p-datatable got the style first from "theme.css" of my primeng theme nova, then from "_reboot.scss" from bootstrap. After updating 16.3.1 to 16.4.0<, the style of "_reboot.scss" is more important than the style of "theme.css", so the table lost border settings.

[joshnarwold]

Similar issue here. My team is upgrading from 14.2 to 16.4.

Previously, the base theme styles in the node_modules → primeng folder couldn't seem to be overridden except by using greater specificity in the theme.

Now, the Designer/theme styles for .p-button are overridding the much more specific selector .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up styles from the base CSS, so the up and down arrows in my InputNumber component have rounded corners all the way around instead of just in the top right and bottom right corners of the field.

The inspector in Chrome shows all my theme styles at the top and then the base CSS as falling under some other layer: "Layer primeng".

I had the person working on this switch the version to 16.0.2 (this was recommended a couple places online), but we're still facing the same issue. Any other ideas?

[BeGj]

Guys read the responses above. U need to put ur CSS reset in a layer so it doesn't overwrite primeng.

[1c3f0x84]

THX @BeGj @pete-mcwilliams Solved it. Changes from:

@tailwind base; @tailwind components; @tailwind utilities;

To:

@layer tailwind-base { @tailwind base; }

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

[admt1]

My angular.json looks like this and still not working >16.0.2, my problem is boostrap styles: "styles": [ "src/styles/styles.scss", "node_modules/primeng/resources/themes/saga-blue/theme.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/primeflex/primeflex.css", "node_modules/primeicons/primeicons.css" ],

[pete-mcwilliams]

suspect bootstrap does not set up layers so you will need to do that, similar to tailwind examples above, you will also need to specify which order the layers are used in. maybe @layer bootstrap, primeng at top of your theme.scss.

https://css-tricks.com/css-cascade-layers

[IvanNovikov-mobdev]

Seems like the css @layer primeng got introduced and broke importance of styles.

Maybe this should be reverted. And treated as a major update. Since it breaks for many users. Not something that is expected in a minor release

Your solution works for your scenario. What do you do if you have css imported on your angular.json related to other packages that doesn't use css layers? Maybe I'm missing something, but even if I "force" to apply layers in any imported css, I still lose the current style due to the specificity of css being applied to the scope of the css layer. Even if we decide to remove or refactor other dependencies to fix this, the truth here is that this update breaks the current styles and should be treated as a breaking change. Anyways, regardless the version number, we are not updating this until getting a clearer vision of what needs to be done to make this work with other dependencies.

Totally agree with @WynieCronje and @bytebruno. We have Angular project with custom theme for primeng. This theme is based on css specificity. After update our theme broke. Seems like adding @layer primeng was breaking change and must be realized in v17.0.0 (if still needed), not in v16.4.0. Even if you wrap in layers your “app” styles and “primeng” theme styles, you face problems in places where app and primeng styles overlaps. And in general, using layers forces the library user to also use layers, which does not seem like good practice. If the layers remain, then you need to update the documentation for creating themes.

[WynieCronje]

I raised this in the discord chat to reach library authors.

They brushed it off. Maybe more people should make noise in the discord channel

PrimeLand Discord

[andykurz]

My angular.json looks like this and still not working >16.0.2, my problem is boostrap styles: "styles": [ "src/styles/styles.scss", "node_modules/primeng/resources/themes/saga-blue/theme.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/primeng/resources/primeng.min.css", "node_modules/primeflex/primeflex.css", "node_modules/primeicons/primeicons.css" ],

We have the same problem

[mnhock]

We run into this issue as well.

[SoyDiego]

Hi, I will explain a solution that I did yesterday. First, my project was using primeng-sass-theme generator (to change the colors) with Tailwind Theme and primeng 16.0.2 If i'm not wrong. Yesterday I have updated to 16.5.1.

In my primeng-sass-theme I had a file extensions.scss where Primetek team said:

/* Customizations to the designer theme should be defined here */

There I had all my CUSTOM things of the components

When I updated primeng-sass-theme and primeng to 16.5.1 and I added the new changes in the extensions.scss files, all my custom code was OUTSIDE the @layer primeng. When I compiled the code I had a lot of broken styles but the app compiled. After a long time researching how to solve it, I moved my custom code INSIDE @layer primeng (I continue talking about the file extensions.scss) and I compiled again (all the theme.scss) and works perfectly everything, my custom code, primeng, and everything.

Another problem that I found was in the buttons. I was using button link, (p-button-link class) and I changed in my code to <p-button [link]="true"/> and that's it. Everything was working good.

Again, I don't know if this solution is for everyone. I'm only writting my case and how it solved. Hope it help! :)

[MussaratAziz]

@SoyDiego thanks for explaining really well, but it didnt work for me.

[andykurz]

When can we expect a statement? This issue is 1 month old.

[chainsaws-dev]

Have the same problem but it is somehow worse. My styles for tables and inputs became completely broken after update. This problem still persists in latest version 16.6.0 example1 example2 only when you rollback to 16.3.1 - styles return to normal. example1 example2

[WynieCronje]

When can we expect a statement? This issue is 1 month old.

Maybe ask this same question in the Discord Channel.

PrimeLand Discord

[IvanNovikov-mobdev]

When can we expect a statement? This issue is 1 month old.

@andykurz I received this answer in Discord in primeng channel but would like to wait for a conclusion in this issue

yes, css layers implementation breaking and one of the most important changes we've recently made but it's not a change you should avoid. You can see our video about it https://www.youtube.com/watch?v=EPRUy0lvgBA

[MussaratAziz]

When can we expect a statement? This issue is 1 month old. i dont think so it will be addressed.

[MussaratAziz]

@layer tailwind-base { @tailwind base; }

Not much to go on Mussarat, in chrome inspect click on the primeng layer, you should see some ordering of the layers in your app. as shown in image... primeng should not be the only one or be at the top if you are using tailwind, generally layer specificity changes the order of your css which is what you have to work through.

@pete-mcwilliams @1c3f0x84 this is what currently i have in styles.css

@layer tw-base {
    @tailwind base;
}

@layer primeng {
    @import '~primeicons/primeicons.css';
    @import '~primeng/resources/primeng.min.css';
    @import '~primeng/resources/themes/bootstrap4-light-blue/theme.css';
}

@layer tw-components {
    @tailwind components;
}

@layer tw-utilities {
    @tailwind utilities;
}

still my application isnt working as it was working in 16.3 Any help or pointer will be appreciated. Thanks

[pete-mcwilliams]

Your layer ordering looks fine. Is that your complete styles.css do you have styles you are applying to primeng components from tailwind, normally after importing tailwind components and prior to utilities, we found we had to add some of those to the primeng layer. Do you have styling in the components of your app, perhaps there is some layering required there?

I'm not sure I will be able to help you further it will probably be down to your specific implementation now rather than a generic approach.

[bytebruno]

I spent some time today on this issue and found a way of "fixing" this for my scenario. In my case I have boostrap imported on my angular.json together with primeng styles. As I described before, my issue is that bootstrap and primeng styles overlaps in different places due to css specificity and of course, this stopped working since the introduction of primeng layer. Since we are thinking of removing bootstrap soon and don't have time now to refactor everything that was broken, I've found a short-term solution for us.

• I removed the bootstrap css import from angular.json
• In my styles.scss I imported bootstrap css inside primeng layer (now that everything is inside the same context, the css overlapping works as before).

The code looks like this:

@use 'sass:meta';

@layer primeng {
  @include meta.load-css(
    '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
  );
}

As I said, it's a temporary solution that worked for our current context. @Romi1122 @andykurz @IvanNovikov-mobdev I don't know if this can help you somehow, I'm just tagging you because I saw that you can have the same problem as mine due to bootstrap/own styles overlapping behavior.

[MussaratAziz]

Your layer ordering looks fine. Is that your complete styles.css do you have styles you are applying to primeng components from tailwind, normally after importing tailwind components and prior to utilities, we found we had to add some of those to the primeng layer. Do you have styling in the components of your app, perhaps there is some layering required there?

I'm not sure I will be able to help you further it will probably be down to your specific implementation now rather than a generic approach.

@pete-mcwilliams Yes that's the complete css no css styling in the components. Thanks

[fastlockel]

This is a real breaking change for angular !

You can no longer import other css in angular.json since they will have NO LAYER.

In angular.json I had to import a new "import.css" file .... just to add my imports (formely in angular.json):

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

/ already have layers / @import url('/node_modules/primeng/resources/primeng.min.css'); @import url('/node_modules/primeng/resources/themes/nova/theme.css');

@import url('/node_modules/primeflex/primeflex.css') layer(primeng); @import url('/node_modules/primeicons/primeicons.css') layer(primeng);

angular.json now uses "import.css" to import what it requires.

We can NOT add the @layer tag to specify layer order in existing angular css : it il removed by angular compilation

Workaround : create a second "layer.cs"s file with just the layer order:

@layer bootstrap, pdf-viewer, primeng, fds;

Then import "layer.css" from index.html file

<!DOCTYPE html>

Seems to work but then you need to check every single page with great attention for any component moved or changed !

---

Solution : primeng should use @layers OPTIONALLY !

[chainsaws-dev]

Would like to add to my previous comment. I have been fixing this migration issue for a couple of days now and have found out that it involves not only layering problem. In my project I have made three layers: @layer base, primeng, app

in app layer I override styles for primeng components so they better fit on the pages of my application. After applying layer fix (putting unlayered styling into layers) I have found out that all the classes that were used for styling buttons are no more working and the buttons (p-button) is displayed with default styling exept colours.

So in order to make my application compatible with new version I have to fix all the html templates for all my components with buttons replacing button classes with corresponding attribute notation which is the new way of telling the library how to style buttons.

Old way: ` <p-button id="add-btn" [label]="'Add' | translate" icon="pi pi-plus" styleClass="p-button-sm p-button-raised p-button-text mr-2" (onClick)="OpenNew()" [disabled]="!IsAdmin()"

`

New way: ` <p-button id="add-btn" [label]="'Add' | translate" icon="pi pi-plus" [text]="true" [raised]="true" size="small" styleClass="mr-2" (onClick)="OpenNew()" [disabled]="!IsAdmin()"

`

[chainsaws-dev]

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