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

Answer 1

1. Build your application on local machine in development mode with "optimization": true set in your angular.json. This is needed for more convenient debugging.

2. 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).

3. 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.

Answer 2

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;

Answer 3

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 :)!