Reuse Classes and Build Size

[slumtrimpet]

I suspect this is related to our project setup and not a primeflex bug at all, but I'll ask it here as I'm out of ideas on how to fix this in our project config.

Following the documentation at: https://www.primefaces.org/primeflex/setup. It states:

We are seeing our project's built CSS grow by approximately 400KB for each component where we are using that pattern.

The line @import 'primeflex/primeflex.scss'; fully duplicates the entire primeflex.scss in our built output.

Any idea if this is truly a result of this pattern being used or what we might be doing wrong?

[slumtrimpet]

One example of how we are actually using this might be useful.
Our components follow the pattern below.

Every component where we use this pattern increases our built project index.css by ~400KB.

<script setup lang="ts">
...
</script>

<template>
...
</template>

<style scoped lang="scss">
@import 'primeflex/primeflex.scss';

.header-block {
  @include styleclass('flex flex-column flex-1 px-2 py-0');
}
.header-lbl {
  @include styleclass('text-sm');
}
.header-val {
  @include styleclass('text-lg font-bold');
}
</style>

For what it's worth, I threw this question at SO as well: https://stackoverflow.com/q/76096761/2123176

[sandeshshrestha]

Going though same issue.

Angular 17
primeflex 3.3.1

// Does not work
// navigation.component.scss
@import 'primeflex/core/utils';

.navigation {
  @include styleclass('mx-auto px-3');
}

// Works but now the scss file is around 330KB
// navigation.component.scss
@import 'primeflex/primeflex.scss';

.navigation {
  @include styleclass('mx-auto px-3');
}

[MAN-Sendance]

This poses a notable challenge. While it would be immensely beneficial to find a resolution, it appears that this project has been abandoned.

[MAN-Sendance]

A solution to this would be a gamechanger!

[jgrinsted]

I'm facing this issue too. I'm using a paid PrimeVue template, so I'll try reaching out to support, but it looks like they're getting rid of sass for PrimeVue soon so this might have repercussions for PrimeFlex too?

[slumtrimpet]

For what it's worth, we chose to jump to PrimeVue unstyled mode + TailWind and are moving away from PrimeFlex.

Even with several hacky workarounds we implemented to address this issue, the move to unstyled + TailWind reduced our build size by 90% already and we are loving it.

And yes, that jump is certainly not trivial and we'll be working on the complete transition for months. It seems it will be worthwhile though.