In spite of the very application-specific sounding title, I'm hopeful this is really a more generic VITE / SCSS question that some guru can help translate and share some knowledge with me.
We are using PrimeFlex in our project and following the documented pattern that states:
Reuse Classes
Commonly used class blocks can be merged as a single class to be reused using the styleclass mixin. Import the utils from primeflex/utils to be able to create your own classes based on PrimeFlex classes. Here is how to create a class called mybutton with the built-in features.
@import 'primeflex/primeflex.scss';
.mybutton {
@include styleclass('bg-blue-500 text-white hover:bg-blue-600 border-round transition-colors transition-duration-150 p-3 border-none');
}
So... following my interpretation of that text, our resulting VUE component files look roughly like this:
<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>
We like this pattern in theory as it lets us combine and overload PrimeFlex helper classes into block-specific consolidated classes... but we are finding that for each component where we use this pattern, we increase the size of our VITE-built main index.css file by the size of the entire PrimeFlex CSS file (~400KB).
Our main index.css has quickly grown to over 10MB and is obviously out of hand.
Any recommendation on how we can use the suggested @import and @include styleclass(...) pattern without blowing up our build size?
I do notice in the documentation linked above that they then go on in the next section to recommend using something like PurgeCSS to reduce production build size in general. They don't explicitly relate the class reuse pattern with the need to use PurgeCSS, but perhaps one does necessitate the other?
I hate to pull another tool into our stack until I know for sure it's truly required and there is no better answer in pure SCSS syntax or VITE config magic.
