Distribute individual component CSS in npm

[Ne-Ne]

Hi Prime Team,

I'm submitting a ...

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Request:
I want to reduce the bundle size of my application. At the moment I am loading the components into the app perfectly fine. However, the styles are in a massive bloated file.

I cannot see anything on the roadmap about scoping the styles using style or styleurls within the @component

What is the motivation / use case for changing the behavior?
Small files on load, scope the styles to the component in question.

Angular version:
4.3

PrimeNG version:
4.0.3

TypeScript Language:
2.4.2

Many thanks,

Neil

[Ne-Ne]

@cagataycivici What do you think?

[cagataycivici]

We'll also make the individual css of components for 5.1.0-RC! so you can import what you require as well instead of whole css. PrimeNG is a suite so no plans to use style or styleURL which always caused problems for us due to view encapsulation. Still we may reconsider that in future, having said that publishing individual css of components will help your requirement, I'll also update the docs for this in detail in a section called smaller bundles :)

[Ne-Ne]

Thanks for your response @cagataycivici

Our internal suite of components uses:

import { ViewEncapsulation } from "@angular/core";

Then enforced via @Component:

encapsulation: ViewEncapsulation.None.

We found that you can turn off the encapsulation for each component, there are no overriding scoping issues. The benefits we drew at work are:

• Smaller bundle size
• On-demand styles
• No scoping styles issues
• Lower specificity range - due to no [_ngcontent-??]

Is this something that we can consider doing?

Many thanks.

[cagataycivici]

This is a huge change, we need to make sure backward compatibility such as premium themes and so on. First let me do add css to the distro and then test using styles or styleUrls.