search

axa-ch-webhub-cloud / pattern-library

AXA CH UI component library. Please share, comment, create issues and work with us!
https://axa-ch-webhub-cloud.github.io/plib-feature/develop
126 stars 18 forks source link

Multiple instances of a components cause multiple CSS appends to document head #1727

Closed LucaMele closed 4 years ago

LucaMele commented 4 years ago

IS: Multiple component make multiple entries in the head SHOULD: for one component always and only one css should be rendererd in the head tag. Issue relys in NO Shadow. example: https://www.acc.axa.ch/de/rechner/rechtsschutzversicherung.html#/start

INFO: This has nothing to do with the possibility of having multiple versions of the component. 1 HTML = 1 JS = 1 CSS. This must be there as is a constraint of custom element itself. Once we have done a multiversion stratgey, we will most likly end up in having CE Names like this: axa-button-1-1-1. Here again rule apply: 1 HTML = 1 JS = 1 CSS. Therefore the fix in no-shadow dom is also in the best intrest of Versioning and multi tenant.

markus-walther commented 4 years ago

A bit of analysis results in this picture: https://github.com/axa-ch/patterns-library/blob/695f83063d06e377e65a92f31b2df7124355837f/src/utils/inline-styles.js#L33 controls CSS attachment.

It relies on a module-scoped map of reference counts per component which gets updated as component instances are added.

If proper ES6 modules are used, this should result in <= 1 module per page. In that case, the above updating will work.

However, the test URL from the RSV pod shows 10 instances of the inline-styles module in https://www.acc.axa.ch/etc/clientlibs/axa/hub/podrsv.ef6208ce361e84cf5cd22e0419fbde70.js alone.

This needs further investigation and may be enough to explain the issue.

markus-walther commented 4 years ago

Further investigation showed that this was not the root cause of the issue.

Rather, the rollup build instructed its SASS plugin to always insert the transformed CSS into the document head - whereas in our situation it should only be the components that apply CSS as they wish (sometimes attaching under head, sometimes inside of ShadomDOM, sometimes to closest ShadowRoot). Setting insert:false solved the duplication.

LucaMele commented 4 years ago

@markus-walther insert false makes css inline instead of external.... removing that will most likely end up in having no css at all

LucaMele commented 4 years ago

And please, every build change must be deeply discussed with me as there i so much know how involved that i built up in the last 3 years