PrimeVue v4 issue with styling and wrapper components. #2158

MonkFox · 2024-06-17T15:44:31Z

MonkFox
Jun 17, 2024

Describe the Issue

I have custom components that utilize PrimeVue's native components in a separate npm package.

The site and the package both reference the same 4.0.0-rc-1 PrimeVue versions (/themes too).

I'm doing this because I have multiple sites that serve different functions, but are used by the same user base, so I want to keep the UI consistent.

I'm running into an issue where if I do not import and render the PrimeVue components hidden (v-show="false") that are used in my separate package in the site's App.vue, then the corresponding PrimeVue's component's <style data-primevue-style-id="[COMPONENTTYPE]-variables"/> are not written to the head tag.

For Example:

  //App.vue
  
  <template>
  //Native PrimeVue components
  //If this isn't here, style variables for these components don't exist in <head>
  
  <InputText v-show="showDefaultComps"></InputText>
  <ToggleSwitch v-show="showDefaultComps"></ToggleSwitch>
  <DataTable v-show="showDefaultComps"></DataTable>
  <Paginator v-show="showDefaultComps"></Paginator>
  <Dropdown v-show="showDefaultComps"></Dropdown>
  <Select v-show="showDefaultComps"></Select>
  <Popover v-show="showDefaultComps"></Popover>

  <Tabs v-show="showDefaultComps">
    <TabList>
      <Tab value="0"></Tab>
    </TabList>
    <TabPanels>
      <TabPanel value="0"> </TabPanel>
    </TabPanels>
  </Tabs>

  //Component that uses component-lib wrapper components, containing PrimeVue native components.
  
  <EquipmentMain v-if="component == 'EquipmentMain'"></EquipmentMain>
  </template>

I thought that having this in place would work as a hacky work-around, but when I started testing the updatePreset() function that is called subsequently in the ThemeSwitcher.vue, a lot of the semantic css classes are removed and no longer exist (--p-form-field-background for example).

This what I'm seeing when the app is initially loaded:

This is after changing the theme ( calling updatePreset() )

Is there a way to force all of the primitive, sematic and component classes/tokens to be created regardless of actual use in the application?
Or is there something I'm doing incorrectly when using my wrapper components from a npm package?

PrimeVue version
4.0.0-rc-1

Language
Vue/Typescript

Build / Runtime
Vite

vieira-brz · 2024-06-17T19:56:07Z

vieira-brz
Jun 17, 2024

You've hit upon a tricky aspect of how PrimeVue handles its CSS styles, and it's definitely related to how it dynamically injects styles based on component usage.

Understanding the Problem:

PrimeVue uses a clever technique to only inject the CSS styles needed for components that are actually used in your application. This is a performance optimization, but it creates a few challenges:

Dynamic Injection: Styles are injected into the <head> tag when a PrimeVue component is rendered. If a component is never rendered, its CSS won't be injected.
Semantic Token Dependency: Some styles, like --p-form-field-background, depend on other components being rendered to establish the necessary CSS variables and styles. This is where the issue arises when you're using components within a separate npm package.

Why Your Approach Isn't Working:

While hiding components with v-show="false" might seem like a hack, it doesn't fully fool PrimeVue's style injection mechanism. Here's why:

Component Life Cycle: Even if a component is hidden, it goes through its lifecycle (created, mounted, etc.). This might still trigger some internal style registration.
Style Dependency: The removal of styles you observe could be related to other components within your custom components. If those components aren't rendered, they might be removing styles that your other components rely on.

Potential Solutions:

Force Style Injection: There's no official way to force PrimeVue to inject all styles regardless of usage. However, you could try these techniques:
- Early Loading: Import the core PrimeVue CSS file directly in your main app's index.html. This will ensure that all the base styles are loaded. You can then use the PrimeVue theme as usual.
- Global Style Import: If your custom component library is primarily for UI elements, you could import a global CSS file containing all the core PrimeVue styles. This will guarantee that all styles are available.
Component Registration: Make sure your custom components are properly registered with PrimeVue. This involves making sure that the custom components extend the required classes or implement the necessary interfaces from PrimeVue.
Custom Theme: You could consider creating a custom theme that includes all the styles from your custom component package. This might require more upfront effort but gives you complete control over styles and ensures consistency across your apps.
PrimeVue's Theme Switcher: Instead of relying on the built-in PrimeVue theme, you could use its Theme Switcher component to load different themes dynamically. This would allow you to inject all the necessary styles when needed.
Re-evaluate Custom Components: Consider if you really need to create custom components or if you can achieve the same results by using PrimeVue's existing components with custom styles.

Additional Considerations:

Style Dependency: Carefully analyze the CSS dependencies within your custom components to understand why styles might be disappearing when components are not rendered.
Performance: While forcing style injection will ensure all styles are present, it might impact performance, especially on large applications.

Debugging Tips:

Inspect the <head>: Use your browser's developer tools to inspect the <head> tag and see which PrimeVue styles are being injected.
Analyze CSS Dependencies: Examine your CSS code to understand how styles are defined and used.
Test with Simple Components: Create a basic component in your custom package that uses a few PrimeVue components. Test if its styles are correctly injected.

Remember: PrimeVue's style injection mechanism is a balance between performance and flexibility. You might need to experiment with different techniques to find the best solution for your specific use case.

Let me know if you have any further questions or would like more code examples!

2 replies

savonbeldi Oct 6, 2024

Could you please explain solution 2 in more details? I'd like to see an example for e.g. Button.

johnwc Nov 4, 2024

Remember: PrimeVue's style injection mechanism is a balance between performance and flexibility. You might need to experiment with different techniques to find the best solution for your specific use case.

PrimeVue's style injection is not performant at all and is not for performance, it is for controlling. So that you can dynamically create a prefixed styles on-the-fly so to only affect your own components. If it was for performance, it would be pre-built, minified, and hosted within a CDN for you to add to your header; so that it is pulled once and cached locally. And any site that uses the style benefit from it already being pulled and cached in your browser.

Can you please give examples of your solutions, showing that they are viable solutions and not something someone is chasing down that is not proven to be correct.

MonkFox · 2024-06-20T12:47:11Z

MonkFox
Jun 20, 2024
Author

Thanks for the reply @vieira-brz !

I've tried a lot of the things you have suggested, but to no avail.

In the end, the only thing that really worked for me was pre-loading all of the controls that I utilize in my control library, in my main app's App.vue. I just slapped a v-show="false" so that they rendered, but so that they were hidden.
This was the only way I could get all of the --p-inputtext-* and etc to generate in the head section.
Because while the PrimeVue components utilized in my control library would render, the top-level PrimeVue mechanism controlling the variable/style generation didn't detect them.

For applying the theme dynamically, I force a reload of the page after the user chooses another palette. Kind of lame, but it works.

Maybe there's a way to provide/inject some sort of 'theme' service from PrimeVue into my control library, but as of now I haven't found any examples of that.

Thanks again!

0 replies

savonbeldi · 2024-10-06T16:49:52Z

savonbeldi
Oct 6, 2024

@MonkFox I have been stuck with this problem for a couple of hours now... Did you manage to find a real solution?

0 replies

MonkFox · 2024-10-07T13:20:11Z

MonkFox
Oct 7, 2024
Author

@savonbeldi
No, I wasn't able to. That's just part of the project setup for now. Just to be clear/reiterate, my custom components are in a VUE component library, and the library is an artifact on Azure Devops.

If my component code is local to the dependent project, things work as expected. It's when the components are referenced from the package that styling breaks.

Reuseable, custom components integrating PrimeVue components seems pretty logical to me. Reuseable grid toolbars, module/page/section headers, custom DataGrid components with specific behavior and OData protocol, for example.

In regard to the styling mechanism, this seems to not be supported out of the box with versions 3.45.0+.

If you're able to solve this somehow, I would love to be notified.

Thanks

0 replies

mertsincan · 2024-10-07T16:08:25Z

mertsincan
Oct 7, 2024
Maintainer

Hi @MonkFox,

Do you use @primevue/nuxt-module?

1 reply

MonkFox Nov 6, 2024
Author

@mertsincan
No, I'm not using that package currently.

cristinafernandez1234 · 2024-10-09T13:49:33Z

cristinafernandez1234
Oct 9, 2024

Thanks @vieira-brz for the possible solutions provided. I am interested in the solution 1 that you provided, but I didn't get it right yet.

My case is similar that the one in the discussion, custom components that use PrimeVue's native components in a separate npm package. The styles are shown well in the Storybook project where the PrimeVue is installed but not in the projects where the npm package is installed. The problem is that all component variables are missing (example <style type="text/css" data-primevue-style-id="button-variables"> for Button component is not located in the projects), but primitive-variables, semantic-variables, global-variables, global-style, base and button-style styles are well placed in the <head>.

We found a very manual workaround, copying all the variables component by component in Storybook, put them in an CSS file and export it along with the library, but there should be a more maintenable way to do it, I opened a discussion about this some months ago, just in case it helps: https://github.com/orgs/primefaces/discussions/2436#discussioncomment-10272692

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PrimeTek

PrimeVue v4 issue with styling and wrapper components. #2158

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 6 comments 3 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

PrimeTek

PrimeVue v4 issue with styling and wrapper components. #2158

MonkFox Jun 17, 2024

Replies: 6 comments · 3 replies

vieira-brz Jun 17, 2024

savonbeldi Oct 6, 2024

johnwc Nov 4, 2024

MonkFox Jun 20, 2024 Author

savonbeldi Oct 6, 2024

MonkFox Oct 7, 2024 Author

mertsincan Oct 7, 2024 Maintainer

MonkFox Nov 6, 2024 Author

cristinafernandez1234 Oct 9, 2024

MonkFox
Jun 17, 2024

Replies: 6 comments 3 replies

vieira-brz
Jun 17, 2024

MonkFox
Jun 20, 2024
Author

savonbeldi
Oct 6, 2024

MonkFox
Oct 7, 2024
Author

mertsincan
Oct 7, 2024
Maintainer

MonkFox Nov 6, 2024
Author

cristinafernandez1234
Oct 9, 2024