Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by Avatar admin 3 days, 19 hours ago.

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

    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
    Avatar
    admin
    Keymaster

    Hi,

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

    Regards,
    Peter

    #102210
    Avatar
    aconley
    Participant

    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
    Avatar
    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.