Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #102206

    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-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)
    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
    @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.


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


    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.


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.