best primeflex version to use

UI Components for Vue
Post Reply
colinbes
Posts: 8
Joined: 26 May 2021, 23:50

12 Oct 2021, 17:24

I am currently using primevue 3.8.0 and primeflex 2.0.0 in a vite-vue project.

If I try update primeflex to 3.0.0 then on running dev server and firing up browser I get scrolling console screen (scrolls for long period of time) showing messages like:

Code: Select all

[vite:css] variable --surface-0 is undefined and used without a fallback
1  |  .grid{display:flex;flex-wrap:wrap;margin-right:-0.5rem;margin-left:-0.5rem;margin-top:-0.5rem}.grid>.col,.grid>[class*=col]{box-sizing:border-box}.grid-nogutter{margin-right:0;margin-left:0;margin-top:0}.grid-nogutter>.col,.grid-nogutter>[class*=col-]{padding:0}.col{flex-grow:1;flex-basis:0;padding:.5rem}.col-fixed{flex:0 0 auto;padding:.5rem}.col-1{flex:0 0 auto;padding:.5rem;width:8.3333%}.col-2{flex:0 0 auto;padding:.5rem;width:16.6667%}.col-3{flex:0 0 auto
And, in addition css appears to be incorrect (specifically flex commands).

Reason I tried primeflex 3.0.0 is because it's mentioned on primevue but appears it's not necessarily supported yet so thought I'd ask on suggested version, should 3.0.0 work before I dug in more.

colinbes
Posts: 8
Joined: 26 May 2021, 23:50

16 Oct 2021, 20:46

Been digging in a little more - remember when prime flex 2.x everything works fine, changing to 3.x causes issues above.

The issue somehow seems to be related to using `postcss-css-variables` which I use extensively in my project.

My postcss.config.js files looks like the following:

Code: Select all

module.exports = {
  plugins: [
      // require('postcss-import'),
      require('postcss-nesting'),        
      require('postcss-css-variables'),
      require('postcss-color-mod-function')
  ]
}
If I comment out `postcss-css-variables` then I no longer see the css issue, pulling it back in the issue appear.

tugce.kucukoglu
Posts: 256
Joined: 23 Oct 2020, 09:28

05 Nov 2021, 16:40

Thanks for the feedback.

Only DataView component use PrimeFlex. The confusion fixed with this https://github.com/primefaces/primevue/issues/1435. And PrimeFlex 3 can be usable for the PrimeVue projects.

Best,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests