Production build has optimization set to true, which, among other things, inlines styles that it considers to be critical, see https://angular.io/guide/workspace-config#styles-optimization-options. As a result, styles containing color definitions are inlined (they become part of index.html inside the <style></style> tag) but are also inside the linked style.css file.
I was wondering if the style redundancy is the expected result of the build process (why are the styles that have been inlined not removed from the style.css file to remove the redundancy and also to reduce the file size), so I've opened an issue for this in the angular-cli repo.
For now, as a fix, I make sure that the getCpsColors func returns unique colors by filtering the result (it adds additional computation complexity, but as the number of all colors is ~250 and we don't expect to be adding thousands of colors it doesn't affect the runtime).
We've decided to solve this by turning off the inlineCritical build option as this would also solve the issue without slowing FCP time in our case (tested with the Lighthouse), another benefit is that we'll notice if someone accidentally introduces new color having the same name as some of the existent colors.
Production build has
optimizationset to true, which, among other things, inlines styles that it considers to be critical, see https://angular.io/guide/workspace-config#styles-optimization-options. As a result, styles containing color definitions are inlined (they become part ofindex.htmlinside the<style></style>tag) but are also inside the linkedstyle.cssfile.I was wondering if the style redundancy is the expected result of the build process (why are the styles that have been inlined not removed from the style.css file to remove the redundancy and also to reduce the file size), so I've opened an issue for this in the angular-cli repo.
For now, as a fix, I make sure that thegetCpsColorsfunc returns unique colors by filtering the result (it adds additional computation complexity, but as the number of all colors is ~250 and we don't expect to be adding thousands of colors it doesn't affect the runtime).We've decided to solve this by turning off the
inlineCriticalbuild option as this would also solve the issue without slowing FCP time in our case (tested with the Lighthouse), another benefit is that we'll notice if someone accidentally introduces new color having the same name as some of the existent colors.