Tagged: 

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

    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!

    #102209
    admin
    Keymaster

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

    #102210
    aconley
    Member

    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.

    #102212
    admin
    Keymaster

    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/

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