JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › CSS issues preventing builds
Tagged: styles
- This topic has 3 replies, 2 voices, and was last updated 3 years, 2 months ago by admin.
-
AuthorPosts
-
September 16, 2021 at 3:51 pm #102206aconleyMember
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 both0%...100%
andFrom...To
, but these get combined so it looks like0%,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!September 16, 2021 at 5:41 pm #102209adminKeymasterHi,
How can we reproduce that? We have multiple demos and stackblitz samples which work fine without such errors.
Regards,
PeterSeptember 16, 2021 at 6:30 pm #102210aconleyMemberPeter,
I don’t get the errors when building for development, but whenng 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.September 17, 2021 at 6:07 am #102212adminKeymasterHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.