Angular 9 Production build Error - Expected a pseudo-class or pseudo-element

Question

Angular9 Project, ng serve is working fine but when I do production build the following error:

chunk {} runtime.5d6d7c5bcca533f7263c.js (runtime) 1.46 kB [entry] [rendered] chunk {1} main.d2b72f349c71c888a662.js (main) 128 bytes [initial] [rendered] chunk {2} polyfills.283e8bcde8bca38df4ea.js (polyfills) 130 bytes [initial] [rendered] chunk {3} polyfills-es5.47231a2d33c3f2286472.js (polyfills-es5) 83.1 kB [initial] [rendered] chunk {4} styles.c5b7147fccf47beb83b4.js (styles) 483 kB [initial] [rendered] chunk {scripts} scripts.6786fa7c6c013a08a688.js (scripts) 808 kB [entry] [rendered] Date: 2020-03-02T20:18:43.460Z - Hash: 266c3c73c2b8a9576a9b - Time: 64655ms

ERROR in Expected a pseudo-class or pseudo-element.

Need help in finding the reason.

Answer 1

My solution was:

1. Manually "apply" the fix from this PR https://github.com/angular/angular-cli/pull/19568/files to this file

node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\optimize-css-webpack-plugin.js line 69

2. Now, the error message should display the actual file where the error appeared

In my case i had somehow an invalid? character in a simple stylus rule

.formfield
    padding-left 0
    padding-right 10px
    width 100%

I had to replace all whitespaces infront of the "width 100%". I was only able to find this by removing styles from my file until i found the one causing this error.

I hope that this will help someone, even if the post is already a few years old.