Search code examples
angularionic-frameworksasspostcsscssnano

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

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 enter image description here

Solution

    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: enter image description here 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: enter image description here 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.