Topic: MDB4 with Angular12 css skipped rules
Dear Support!
I added MDB to a newly created project. The app also uses SSR when the build process goes to write the following error to the console:
- Generating index html...
8 rules skipped due to selector errors:
.custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(es)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(pl-PL)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(fr)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(in)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(zh)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(de)~.custom-file-label -> unmatched pseudo-class :lang
.custom-file-input:lang(ru)~.custom-file-label -> unmatched pseudo-class :lang
Index html generation complete.
Best regards, Zsombor
@Karman40 You can try to override mixins responsible for this warning before Bootstrap/MDB styles are compiled. To do that, add this code to the styles.scss file and remove Bootstrap and MDB styles imports from angular.json. In the next update, we will add proper flags to the mixins variables to make it easier to override.
$custom-file-text: () !important;
@import '~ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap';
@import '~@angular/cdk/overlay-prebuilt.css';
@import '~ng-uikit-pro-standard/assets/scss/core/overlay';
@import '~ng-uikit-pro-standard/assets/scss/core/bootstrap/functions';
@import '~ng-uikit-pro-standard/assets/scss/core/bootstrap/variables';
@import '~ng-uikit-pro-standard/assets/scss/core/bootstrap/rfs';
@import '~ng-uikit-pro-standard/assets/scss/core/mixins';
@import '~ng-uikit-pro-standard/assets/scss/core/colors';
@import '~ng-uikit-pro-standard/assets/scss/core/variables';
$custom-mdb-file-text: () !important;
@import '~ng-uikit-pro-standard/assets/scss/core/global';
@import '~ng-uikit-pro-standard/assets/scss/core/helpers';
@import '~ng-uikit-pro-standard/assets/scss/core/typography';
@import '~ng-uikit-pro-standard/assets/scss/core/masks';
@import '~ng-uikit-pro-standard/assets/scss/core/waves';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/forms';
@import '~ng-uikit-pro-standard/assets/scss/core/variables-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/social-buttons-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/msc/forms-pro';
@import '~ng-uikit-pro-standard/assets/scss/core/directives';
@import '~ng-uikit-pro-standard/assets/scss/msc';
@import '~ng-uikit-pro-standard/assets/scss/msc-pro';
Karman40 priority commented 2 years ago
@Arkadiusz Idzikowski I upgraded to the next version and restored it to the original import, but the error still exists.
10 rules skipped due to selector errors: [dir=ltr] .ck.ck-form__row>:not(.ck-label)+* -> Cannot read properties of undefined (reading 'type') [dir=rtl] .ck.ck-form__row>:not(.ck-label)+* -> Cannot read properties of undefined (reading 'type') .custom-file-input:lang(en) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(es) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(pl-PL) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(fr) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(in) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(zh) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(de) ~ .custom-file-label -> unmatched pseudo-class :lang .custom-file-input:lang(ru) ~ .custom-file-label -> unmatched pseudo-class :lang
Arkadiusz Idzikowski staff commented 2 years ago
@Karman40 Did you upgrade to the latest (v13.0.0) MDB4 Angular version and updated Angular dependencies to v13 as well?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB4 12.0.0
- Device: Web
- Browser: NodeJS
- OS: WIN10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
@Karman40 Please take a look at the answer I added in this thread, it looks like the same problem: https://mdbootstrap.com/support/angular/angular-12-production-build-warning-mdb4-12/
Karman40 priority commented 3 years ago
@Arkadiusz Idzikowski Thanks for the help. The app doesn't use the "custom file input" item, so I can ignore it, right?
Karman40 priority commented 3 years ago
@Arkadiusz Idzikowski Although I don't use that item, SSR prints this error to the console every time the page is retrieved ...
Arkadiusz Idzikowski staff commented 3 years ago
@Karman40 It's only a warning so it should not cause any problems in your app, especially if you don't use the custom Bootstrap file input component. The warning is displayed in the console in dev mode or also in the production build?
Did you try the solution that I suggested?
Karman40 priority commented 3 years ago
@Arkadiusz Idzikowski The error message also comes in production mode in SSR app (not just during the build process)
I didn't try because other ccs files will be excluded from optimization.
Arkadiusz Idzikowski staff commented 3 years ago
@Karman40 This is not something we can fix on our end because these are Bootstrap 4 styles and it looks like Angular CLI incorrectly recognize the
langselector as deprecated. We will take a closer look at that and check if there is a workaround that you could use in your project.Karman40 priority commented 2 years ago
@Arkadiusz Idzikowski Were you able to find any progress on the matter?
Arkadiusz Idzikowski staff commented 2 years ago
@Karman40 We are still looking for a workaround for this problem. It looks like these styles were not changed in the new Bootstrap 4 version, we still need to check if something was changed in the latest Angular CLI versions.
Karman40 priority commented 2 years ago
@Arkadiusz Idzikowski Were you able to find any progress on the matter?