ng build --prod breaks with an error in css

[gvsakhil]

🐞 bug report

Description

When I run ng build --prod I get an issue:

🔥 Exception or Error

92% chunk asset optimization optimize-css-webpack-pluginAn unhandled exception occurred: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 100% - $icon-size-xl - 1
^.........^
See "/private/var/folders/rr/l3g7t6150l34y62qrtttjyfc0000gn/T/ng-5EAXR6/angular-errors.log" for further details.

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.1

Anything else relevant?
My package.json
"dependencies": {
"@angular-devkit/schematics": "^9.0.1",
"@angular/animations": "~9.0.0",
"@angular/cdk": "^9.0.0",
"@angular/common": "~9.0.0",
"@angular/compiler": "~9.0.0",
"@angular/core": "~9.0.0",
"@angular/forms": "~9.0.0",
"@angular/platform-browser": "~9.0.0",
"@angular/platform-browser-dynamic": "~9.0.0",
"@angular/router": "~9.0.0",
"angularx-qrcode": "^2.1.0",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"ngx-bootstrap": "^5.1.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.0.0",
"primeicons": "^2.0.0",
"primeng": "^9.0.0-rc.4",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},

My log file
[error] JisonLexerError: Lexical error on line 1: Unrecognized text.

Erroneous area:
1: 100% - $icon-size-xl - 1
^.........^
at /Users/akhilgrandhi/Documents/apocfrontend/styles.73840fd418084795d475.css:17:225980
at Object.parseError (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:1164:15)
at Object.lexer_parseError [as parseError] (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:2297:44)
at Object.lexer_next [as next] (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:3292:22)
at Object.lexer_fastLex [as fastLex] (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:3367:18)
at fastLex (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:1567:27)
at Parser.parse (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:1641:30)
at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/lib/transform.js:30:30
at walk (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/walk.js:19:7)
at ValueParser.walk (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/index.js:18:3)
at transformValue (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/lib/transform.js:24:50)
at _default (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/lib/transform.js:59:100)
at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/index.js:25:51
at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:135:18
at Rule.each (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:101:16)
at Rule.walk (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:131:17)
at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:148:24

[marfehr]

This should fix your issue

100% - #{$icon-size-xl} - 1

[gvsakhil]

ok thanks I found it in my styles.scss and fixed it @marfehr

[alan-agius4]

Closing as this seems to have been a user issue.

[alan-agius4]

Reopening as we should display a more actionable error.

[cedricremond]

I had a problem that seems related. The error shown was (only in prod mode):

ERROR in Parse error on line 1: 

^
Expecting "CALC", "LPAREN", "SUB", "NUMBER", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "expression", "math_expression", "value", "function", "css_value", got unexpected end of input

It was due to an empty calc() in a scss file, I had to comment out all my scss files and test them one by one as the error was not explicit.

[gvsakhil]

Its better to atleast show in which file we have the error so that it helps the user to solve it quickly. I made a global search in vscode and I found the error

[arthurspa]

I have the same problem:

[error] JisonParserError: Parse error on line 1: 
- var(--spac...
--^
Expecting "ADD", "SUB", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "dimension", got unexpected "FUNCTION"
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\styles.9988a5427a55852a23cc.css:3125:3
    at Parser.parseError (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\parser.js:1200:15)
    at Parser.parse (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\parser.js:1716:30)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\lib\transform.js:33:30
    at walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-value-parser\lib\walk.js:7:16)
    at ValueParser.walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-value-parser\lib\index.js:18:3)
    at transformValue (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\lib\transform.js:24:50)
    at _default (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\lib\transform.js:66:100)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\index.js:27:32
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:135:18
    at Rule.each (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:101:16)
    at Rule.walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:131:17)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:148:24
    at Root.each (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:101:16)
    at Root.walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:131:17)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\index.js:23:9
    at initializePlugin (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\cssnano\dist\index.js:31:51)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I found out that it's due to CSS custom properties @space-small: var(--space-small);.
It only happens when building with --prod. I'm using LESS.
Note: I need to use css var().

[arthurspa]

I found the error. However it's not easy because even if the build is set to verbose I had no idea where the problem was. Please, improve the log stack trace where the problem happened.

[vigneshbarani24]

Got a similar issue. Please do improve where exactly the issue is so it gets easier to fix them up.

( * 1.25) + ...
--^
Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "math_expression", "function", "dimension", "number", got unexpected "MUL"
See "C:\Users\SVIGNE~1\AppData\Local\Temp\ng-waUyAW\angular-errors.log" for further details.`

[WiharlleyWill]

1 - Hi. I had some warnings like: Nebular Theme: nb-theme () cannot find value for key radius for corporate theme.

1 - FIX: found the problem on my login.component.scss and removed the scss. After that I managed to compile and go up to production.

2 - But now I had to load resource: the server responded with a status of 404 () problem with dlist updloaded. If I fix I will edit this.

2 - FIX: I just remove <base href="/"> in my index.html.

[shubham-beri]

For all those who are using Argon Angular Template (not the dashboard one)
You will have to fix this in multiple lines.

Before: 100% - $icon-size-xl - 1
After 100% - #{ $icon-size-xl } - 1

wherever curly braces are not there
_icon.scss file that is present in

assets/custom/vendor/_icon.scss

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}