Angular ionic build: Cannot read property 'toLowerCase' of undefined postcss

Question

I'm trying to build my application, but I'm getting this error from Postcss.

Note: the file on '/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css' does not exist.

[error] TypeError: Cannot read property 'toLowerCase' of undefined
    at /srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1
    at hasInherit (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/canMerge.js:16:39)
    at Array.some (<anonymous>)
    at _default (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/canMerge.js:23:13)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:234:33
    at mergeRules (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/mergeRules.js:44:11)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:233:29
    at Array.forEach (<anonymous>)
    at Object.merge (/srv/http/r2-app/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:231:7)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/index.js:20:13
    at Array.forEach (<anonymous>)
    at /srv/http/r2-app/node_modules/postcss-merge-longhand/dist/index.js:18:23
    at /srv/http/r2-app/node_modules/postcss/lib/container.js:115:18
    at /srv/http/r2-app/node_modules/postcss/lib/container.js:74:18
    at Root.each (/srv/http/r2-app/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/srv/http/r2-app/node_modules/postcss/lib/container.js:71:17)
    at Root.walkRules (/srv/http/r2-app/node_modules/postcss/lib/container.js:113:19)

Version details

If you go to the location metioned (/srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1) does it show the object which is trying to call toLowerCase — , May 10 '21 at 19:50
I try, but this file "srv/http/r2-app/styles.e4dd05dfea4b7f17f938.css:50691:1" not even exists — Vitor Kevin, May 10 '21 at 20:43
I’m not sure which versions you need, but this type of error is indicative of a versioning error mismatch between what a library expects vs what it has. — Ben L, May 11 '21 at 02:47

score 3 · Answer 1 · answered Oct 08 '21 at 13:51

3

I was using angular metronic. I got the same error and after a long time I found the wrong code block and commented it. error fixed.

border-width: get($checkbox-config, types, accent, borderWidth) !important;

answered Oct 08 '21 at 13:51

karincayazilim

123
2
14

score 1 · Accepted Answer · answered Jun 06 '21 at 15:59

Build your application on local machine in development mode with "optimization": true set in your angular.json. This is needed for more convenient debugging.
Open your style.css file generated in the dist folder and inspect it for errors (in case you're developing in docker container, copy this file from the container to host).
When you find syntax errors like this: try to match the erroneous code in the generated style.css with your source code and fix the issue / issues there.

In my case the original code looked like this: where darker is a non-existing palette color which I changed to main (existing one) and that was the fix. Similar fix was for fill: !important.

score 1 · Answer 3 · answered Jul 08 '21 at 11:51

Angular has optimization flag in angular.json if you set it to true, minificaiton css also happens.

In my case it was very stupid mistake in tailwind.config.js and not in any css class. Ultimately Tailwind generates bunch of classes only

   grey: {
    50: '#d8d8d8',
    200: '#8d8d8d',
    300: '#3a3a3f',
    400: '#252b3d',
    500: '#242837',
    600: '#222434',
    700: '#1b1d29',
    800: '' --------------------> silly mistake which failed minifycss
  },

If you have tailwind integrated and can't find problem in css, check your tailwind config file :)!

Angular ionic build: Cannot read property 'toLowerCase' of undefined postcss

3 Answers3