ng build fails with: 2 rules skipped due to selector errors: .form-floating>~label -> Did not expect successive traversals

[karimib]

I am experiencing an Issue after upgrading from bootstrap 5.2.3 to5.3.0in an angular16.1.3project.
When running ng build -c=prod these warnings appear.

⠋ Generating index html...2 rules skipped due to selector errors:
  .form-floating>~label -> Did not expect successive traversals.
  .form-floating>~label -> Did not expect successive traversals.

I cannot provide more details about the project.
Since we don't use any .form-floating in our code my guess is that the warnings come from the bootstrap file: bootstrap.css where on line 2600 as well as on line 2616 there are definitions of .form-floating > label

Does anyone know:

1. What the problem is ?
2. How this problem can be fixed without suppressing the warnings ?

Thanks in advance

[holumyne]

add the following to angular.json file between "configurations": and "budgets":

"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},

[karimib]

Thanks ! In the meantime I found a solution by setting "inlineCritical" to "false" (as you also mentioned in your reply)

[uweDuesing]

Is this still a valid fix for Angular 18?
I am running into the same issue, but adding those lines breaks the angular.json?

[woeterman94]

This is not a valid solution.
He copied it from here: https://stackoverflow.com/questions/76798190/i-get-error-form-floatinglabel-in-ng-build
But it will disable optimization in Production.

[mohdabdullah7646]

This is not a valid solution. He copied it from here: https://stackoverflow.com/questions/76798190/i-get-error-form-floatinglabel-in-ng-build But it will disable optimization in Production.

You are right, and if you found any solution kindly share for angular v-19 also. I am getting these type of warnings while building.

[eneajaho]

Beasties package added a fix for this https://github.com/danielroe/beasties/releases/tag/v0.3.3.

If using npm:

//  package.json
"overrides": {
    "beasties": "^0.3.3"
}

for pnpm:

"pnpm": {
	"overrides": {
		"beasties": "^0.3.3"
	}
}