yarn build fails on line one no matter what's in there

Question

I have a react project bootstrapped with create-react-app and came across a build error I can't really get a hang off it.

The project includes two css files, one index.css the second is overrides.css which is also the file the compiler complains about. Both included in index.js.

Now when I run yarn build in my project directory, I get the following compiler error:

maxi@tuerkasten:~/projects/calendar-ui$ yarn build
yarn run v1.22.10
warning package.json: No license field
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/overrides.css
ParserError: Syntax Error at line: 1, column 15


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
maxi@tuerkasten:~/projects/calendar-ui$

This is what overrides.css looks now:

.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column.no-padding {
  padding: 0;
  min-height: 14vh;
}

/* @todo: find a way to solve this more elegant */
.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column.no-min-height {
  min-height: 5vh;
  font-weight: 700;
  padding: 5px;
}

/* calendar days without month */
.calendar-day.notfirstday {
  width: 30.08px;
  height: 30.08px;
}

.ui.menu:not(.vertical) .right.item.no-padding-margin {
  margin: 0 !important;
  padding: 0 !important;
}

.ui.container.backend-container {
  margin-left: calc(var(auto)+200px) !important;
  margin-top: calc(var(auto)+50px) !important;
}

/* remove require asterisk */
.ui.form .required.field > .checkbox.remove-require:after {
  content: '';
}

The strange thing is, no matter what I do on line one in overrides.css, the error remains the same and the development server yarn start is just running fine.

Answer 1

Seems like the compiler does not like no whitespaces in css calc functions.

I've just changed this

.ui.container.backend-container {
  margin-left: calc(var(auto)+200px) !important;
  margin-top: calc(var(auto)+50px) !important;
}

to that

.ui.container.backend-container {
  margin-left: calc(var(auto) + 200px) !important;
  margin-top: calc(var(auto) + 50px) !important;
}

and the compiler is fine