Invalid CSS: @media declarations should not include CSS variables

[NealEhardt]

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug

What is the current behavior?

All the CSS files provided with survey-core contain an invalid media query:

@media only screen and (min-width: calc(125 * var(--sjs-base-unit, var(--base-unit, 8px)))) {
  ...
}

The problem: CSS variables are not allowed in @media declarations.

ParcelJS gives the following error when I try to import any of the survey-core CSS files:

🚨 Build failed.

@parcel/transformer-css: Unexpected token Colon

  /🦄/node_modules/survey-core/defaultV2.fontless.css:3464:34
    3463 | }
  > 3464 | @media only screen and (min-width: calc(125 * var(--sjs-base-unit, var(--base-unit, 8px)))) {
  >      |                                  ^
    3465 |   .sd-progress__text {
    3466 |     margin-left: 5%;

I tested this with Parcel version 2.8.3 and latest 2.9.2.

What is the expected behavior?

The provided CSS files should only contain valid CSS. ParcelJS should be able to compile them.

How would you reproduce the current behavior (if this is a bug)?

You can find the invalid CSS in survey-core on NPM and here https://surveyjs.io/DevBuilds/survey-core/defaultV2.css

Provide the test code and the tested page URL (if applicable)

n/a

Specify your

• browser: n/a
• browser version: n/a
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: 1.9.91

[angushuman]

Hi - I am having the same issue with no workaround to date. Any ideas?

[NealEhardt]

Yes, we are working around this with Parcel's "error recovery" option. We added this to our package.json:

"@parcel/transformer-css": {
  "/* comment */": "errorRecovery needed for SurveyJS's CSS, which contains errors",
  "errorRecovery": true
},

Now the build failure has been downgraded to a warning.

This adds noise to our build output and makes it possible for us to accidentally deploy more invalid CSS. I'm disappointed that the SurveyJS team has not yet taken the simple, common-sense step of removing the invalid CSS!

[angushuman]

Thank you for your swift response. This workaround is somewhat helpful. Much appreciated.