Issue with angular inlineCritical optimization

[ozavodny]

Hello.
Due to a issue in reworkcss/css#154, it is impossible to use Angular's inlineCritical optimization (angular/angular-cli#20760).

The ngrx-toastr code that causes this issue is located here

ngx-toastr/src/lib/toastr.css

Lines 114 to 129 in f2c4c42

	/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */
	.toast-info {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'/%3E%3C/svg%3E");
	}
	/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */
	.toast-error {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");
	}
	/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */
	.toast-success {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
	}
	/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */
	.toast-warning {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='576' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
	}

Would it be possible to try a different approach until the https://github.com/reworkcss/css library is fixed? By the looks of things there is a reworkcss/css#157 that fixes the issue, but I have no idea if or when it will be merged.

Thanks.

[loetscher]

Same issue here. As we use ngx-toastr within a frontend library, it took me some time to figure out what exactly the problem is.
I got the same error as mentioned in nrwl/nx#4381:

× Index html generation failed.

The workaround mentioned in nrwl/nx#4381 (comment) "fixed" the issue temporarly.

[loetscher]

I tried to provide a simple sandbox to reproduce this problem.
It looks like our problem is an interaction between ngx-toastr <-> ag-grid.

I created a small sample project https://github.com/loetscher/ngx-toastr-issue-ninehundred (angular starter with these two libraries)

The prod build of this project fails, but if I:

• remove ag-grid @include ag-theme-balham
  or
• move import statement for ngx-toastr at the end
  or
• remove import satement for for ngx-toastr
  or
• apply changes in fix: encode svg to Base64, prevent build optimizer error #901

everything works fine.

See https://github.com/loetscher/ngx-toastr-issue-ninehundred/blob/main/src/styles.scss

It looks like there is a problem in combination with those two projects.

Update:
Seems that the ag-grid mixin @mixin ag-icons-font-face() in node_modules\ag-grid-community\src\styles\ag-theme-base\sass\_ag-theme-base-mixin.scss is involved here.
If I remove this line src: ag-param(icons-data); in the @font-face part, the build works fine. Will open an issue on ag-grid and backlink to this one.

Update2:
Adding @debug ag-param(icons-data); to the icons font ag-icons-font-face mixing prints:

 url("data:application/font-woff;charset=utf-8;base64,d09GR.../Gj5g==") format("woff")

The definition is done in node_modules\ag-grid-community\src\styles\ag-theme-balham\sass\_ag-theme-balham-font-vars.scss

Update 3:
Looks like this issue should be fixed by
angular/angular-cli#20760, reworkcss/css#154.
The problem occurs as both libraries (ngx-toastr and ag-grid) uses url("...") in their css files. That is the explanation, why the error occurs only in combination (and "correct" order).
Workaround: angular/angular-cli#20760 (comment)