ParserError when dividing a CSS variable by a negative number

Describe the bug

Dividing a CSS variable by a negative number yields a ParserError during production builds. Live preview works ok.

Which terms did you search for in User Guide?

ParserError, CSS variables

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from <snip>\create-react-app

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
  Binaries:
    Node: 15.5.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.46)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create a fresh react app with npx create-react-app --template typescript
2. Add the following css to App.css:

.App-logo {
  --size: -10px;
  width: calc(var(--size)/-2);
}

1. run npm run build

Expected behavior

The build should compile successfully, since live preview works as expected.

Actual behavior

PS C:\<snip>\cra> npm run build

> cra@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/App.css
ParserError: Syntax Error at line: 1, column 18

Etc

If either var(--size) is replaced by some constant, or the expression is rewritten as calc(-1/2 * var(--size)), the problem disappears.

[totymedli]

Problem and Error

I can confirm this. The following rules will cause an error during npm run build (react-scripts build)

--bs-gutter-y:0;
margin-top:calc(var(--bs-gutter-y)*-1)

The error is:

ParserError: Syntax Error at line: 1, column 25

BTW the rule is not in line 1 column 25, so it is totally misleading.

Solutions

• One solution is to change the operands just like OP suggested: margin-top:calc(-1*var(--bs-gutter-y))
• Alternatively, add a space before the -: margin-top:calc(var(--bs-gutter-y)* -1)

This code is from Bootstrap 5.0.2 which has the spaces (even in the minified version) so my assumption is that somewhere, the script minifies it again and removes the spaces. This could explain why it works in dev mode, where presumably there is no minification.

Also, check out this related Stack Overflow question.

[nex3]

Sass recently added additional features for calc() which includes more aggressively minifying whitespace in calc() expressions. Note that the problematic expression calc(var(--bs-gutter-y)*-1) is valid CSS. To quote Values and Units Level 4:

(The * and / operators can be used without white space around them.)

It seems like some other tool is parsing Sass’s output and choking on this valid CSS, which is likely a bug in that tool.