Line 68 of @material/theme/_mixins.scss crashes the production build

[adrianschmidt]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
npm run build fails with the following output:

$ npm run build

> pocketdragon@0.0.0-development build /Users/adrian_schmidt/GitHub/pocketdragon
> SASS_PATH=node_modules stencil build --prerender

[01:44.3]  @stencil/core v0.9.11 🏙
[01:44.4]  build, app, prod mode, started ...
[01:44.5]  transpile started ...
[01:44.5]  transpile finished in 16 ms
[01:44.5]  module map started ...
[01:44.6]  generate styles started ...
[01:44.8]  compile global style start ...
[01:44.8]  compile global style start ...
[01:44.8]  compile global style finish in 5 ms
[01:44.8]  compile global style finish in 4 ms
[01:44.8]  generate styles finished in 187 ms
[01:46.7]  module map finished in 2.19 s
[01:46.7]  generate bundles started ...
[01:46.7]  generate bundles finished in 26 ms
[01:46.7]  generate app files started ...
[01:47.3]  generate app files finished in 527 ms
[01:49.6]  prerendering started ...
[01:49.6]  prerender, started: /pocketdragon/ ...
[01:50.6]  prerendering started ...
[01:50.6]  prerender, started: / ...
[01:50.8]  prerender, finished: /pocketdragon/ in 1.23 s
[01:50.8]  prerendering failed in 1.23 s
[01:50.8]  prerender, finished: / in 262 ms
[01:50.8]  prerendering failed in 265 ms

[ ERROR ]  runtime console.error: /pocketdragon/
           Could not parse CSS stylesheet at exports.evaluateStylesheet
           (/Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:18:21)
           at HTMLStyleElementImpl._attach
           (/Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:23:5)
           at HTMLHeadElementImpl.insertBefore
           (/Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:230:22)
           at HTMLHeadElement.insertBefore
           (/Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/node_modules/jsdom/lib/jsdom/living/generated/Node.js:182:45)
           at insertStyles
           (/Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/dist/compiler/index.js:9476:18)
           at inlineComponentStyles
           (/Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/dist/compiler/index.js:9469:5)
           at
           /Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/dist/compiler/index.js:9964:17
           at Generator.next (<anonymous>) at
           /Users/adrian_schmidt/GitHub/pocketdragon/node_modules/@stencil/core/dist/compiler/index.js:9940:71
           at new Promise (<anonymous>),
           .mdc-dialog{display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;top:0;left:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;visibility:hidden;z-index:5;}.mdc-dialog__backdrop{background-color:rgba(0,0,0,.87);background-color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87));position:fixed;top:0;left:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;opacity:0;z-index:-1;}.mdc-dialog__surface{-webkit-box-shadow:0
           11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px
           rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0
           9px 46px 8px
           rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-background,#fff);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:calc(100%
           - 30px);min-width:640px;max-width:865px;-webkit-transform:translateY(150px)
           scale(.8);transform:translateY(150px)
           scale(.8);border-radius:2px;opacity:0;}.mdc-dialog[dir=rtl] .mdc-dialog__surface,[dir=rtl]
           .mdc-dialog
           .mdc-dialog__surface{text-align:right;}.mdc-dialog__header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:24px

[01:50.8]  build failed in 6.48 s

Expected behavior:
The build should complete without failures

Steps to reproduce:
Just run npm install and then npm run build.

Related code:

This is the offending line:

#{$property}: var(--mdc-theme-#{$style}, $value);

Other information:
Commenting this line in /node_modules/@material/theme/_mixins.scss makes the build pass.

[adrianschmidt]

Most likely related to ionic-team/stencil#741

Seems to be caused by a bug in jsdom. The following issue doesn't seem to be the exact same problem, but does give a similar error: jsdom/jsdom#2026