search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.18k stars 808 forks source link

SurveyJS production build not working with CSS optimization #3552

Open bruno-lopez opened 2 years ago

bruno-lopez commented 2 years ago

Are you requesting a feature, reporting a bug or asking a question?

Bug

What is the current behavior?

Angular project with survey-angular and survey-analytics dependencies is not building with CSS optimization.

What is the expected behavior?

Project should build fine when using CSS optimization.

How would you reproduce the current behavior (if this is a bug)?

Using the survey-angular and survey-analytics dependencies in an angular project with the following styles defined in the angular.json:

"./node_modules/survey-angular/modern.min.css",
"./node_modules/survey-creator/survey-creator.min.css",
"./node_modules/survey-analytics/survey.analytics.min.css",
"./node_modules/survey-analytics/survey.analytics.tabulator.min.css",
"./node_modules/tabulator-tables/dist/css/tabulator.min.css"

Is causing an issue when building the project with optimization: true. Workaround is to disable the inlineCritical: false optimization for CSS. The problem could be related to some base64 images defined in the CSS as mentioned in this comment: https://github.com/angular/angular-cli/issues/20804#issuecomment-841682270. What I've identified is that the project builds fine without the /node_modules/survey-angular/modern.min.css and /node_modules/survey-analytics/survey.analytics.tabulator.min.css files.

Specify your

tsv2013 commented 2 years ago

Thank you for the info. We'll investigate the case.

opolo commented 2 years ago

Same issue here. Dont know how long issue has been there. We just tried this week to checkout this lib to see if we should settle on it :)

tsv2013 commented 2 years ago

I've just checked the https://github.com/surveyjs/surveyjs_angular_cli repo, it has optimization setting here https://github.com/surveyjs/surveyjs_angular_cli/blob/master/angular.json#L80 and it builds ok for me.

Can you share a minimal sample illustrating the issue?

bruno-lopez commented 2 years ago

Could you please try with the following css files in the angular.json file?

"./node_modules/survey-angular/modern.min.css",
"./node_modules/survey-creator/survey-creator.min.css",
"./node_modules/survey-analytics/survey.analytics.min.css",
"./node_modules/survey-analytics/survey.analytics.tabulator.min.css",
"./node_modules/tabulator-tables/dist/css/tabulator.min.css"

Also we're using Angular 12 that might also be related.

tsv2013 commented 2 years ago

Just have checked

              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/survey-angular/survey.min.css",
              "node_modules/survey-angular/modern.min.css",
              "node_modules/survey-analytics/survey.analytics.min.css",
              "node_modules/survey-analytics/survey.analytics.tabulator.min.css",
              "node_modules/survey-analytics/survey.analytics.datatables.min.css",
              "node_modules/survey-creator/survey-creator.min.css",

in same angular.json file of the mentioned repo - everything builds ok for me

bruno-lopez commented 2 years ago

@tsv2013 I've been taking a look to this issue again and I can confirm it is related to Angular. Looks like using the angular version 12.2.8 fails during the CSS optimization. After testing with angular versions 12.2.13 and 13.0.2 the issue is gone.