primefaces
Application styles broke after updating to primeng 16.4.0 from 16.3.1
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
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
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;
}
I had the same problem and clearing the cache (Ctrl+F5 in Firefox or Ctrl+Shift+Delete in Chrome) fixed the problem.
I tried to clear cache, but it probably has to do with these things:
Seems like the css
@layer primenggot 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.
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.
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
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
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.
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
In my point of view this is a major update as well. Any updates on this topic?
As I said earlier, you need to use CSS layers now if you want to put some CSS styles before Prime CSS ones
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.
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';
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?
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.
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!
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; }
any update on this issue? i tried above suggestions none worked for me. Thanks everyone
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.
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.
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.
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?
Guys read the responses above. U need to put ur CSS reset in a layer so it doesn't overwrite primeng.
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;