CSS issues preventing builds

[aconley]

I’m referencing smart.default.css in the angular.json file for my Angular project, as described in the docs, and I’m finding that the build fails because of several problems in that file, which come from the styles for various components:
smart.fileupload.css
.smart-file.smart-pause:before (background color is invalid, using only 5 hex positions, like #f0030 instead of #f00300)
@-webkit-keyframes error (several background colors are invalid, like above)
smart.querybuilder.css
Has @charset attribute, which ends up in the middle of the smart.default.css file, but should only be at the beginning of a file
smart.progressbar.css
@keyframes stripes (defines both 0%...100% and From...To, but these get combined so it looks like 0%,From...100%,To which is invalid)
The workaround is to fix these problems manually in the smart.default.css file in the node_modules folder, but that is not something I should have to do. Please let me know if these will be fixed in the next release.
Thanks!

[admin]

Hi,
How can we reproduce that? We have multiple demos and stackblitz samples which work fine without such errors.
Regards,
Peter

[aconley]

Peter,
I don’t get the errors when building for development, but when ng build runs against the production configuration, it finds those errors in the stylesheets.
All I have to look at is the NPM package. For example, if I open node_module/smart-webcomponents-angular/source/styles/components/smart.fileupload.css, I can see that the @-webkit-keyframes error styles only have 5 characters in their background-color definitions, which is invalid. Looking at the corresponding source/styles/default/scss/smart.fileupload.scss file, the colors are defined in RGBA format, but whatever processor you use to build the CSS file is converting the RGBA format (#ff000015) to some sort of short hex notation for the first 6 characters (#f00) with the alpha added to the end (#f0015).
You can pretty easily reproduce this:
ng new smarttest
cd smarttest
ng add smart-webcomponents-angular
ng build
You’ll have to increase the budget size in angular.json from 1mb to something like 3mb because the smart.default.css file is so big. If you build again after fixing the budget, you should see something like the following error:
× Index html generation failed.
undefined:1:727615: missing '{'
In my case, that location was the progressbar keyframes problem. I manually fixed that, then built again, found the next problem.

[admin]

Hi aconley,
Thanks for the feedback. From the next version, these CSS errors will be resolved.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts