[Linear Progress] SCSS build broken because of inline SVG

[Akkora]

Hello

There seems to be an issue with the scss build of the linar progress component.
I followed the getting started section and also the linear progress readme.

As soon as I add the linear-progress scss, the build will fail.

I tried adding the linear progress scss in two different ways:

Option 1:

@use '@material/linear-progress';

@include linear-progress.core-styles;

Option 2:

@use '@material/linear-progress/mdc-linear-progress';

Problematic position in code

Once the inline svg data uri is removed, the build works as expected:

material-components-web/packages/mdc-linear-progress/_linear-progress-theme.scss

Line 96 in fc539db

url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='color-value-for-svg'/%3E%3C/svg%3E"),

Additional Logs

ERROR in ./main.scss                                                                      
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):                           
SyntaxError: unknown: Unexpected token (5:400)                                                           
  3 | import ___CSS_LOADER_API_IMPORT___ from "../../node_modules/css-loader/dist/runtime/api.js";       
  4 | import ___CSS_LOADER_GET_URL_IMPORT___ from "../../node_modules/css-loader/dist/runtime/getUrl.js";
> 5 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL("data:image/svg+xml,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 x=%270px%27 y=%270px%27 enable-background=%27new 0 0 5 2%27 xml:space=%27preserve%27 viewBox=%270 0 5 2%27 preserveAspectRatio=
%27none slice%27%3E%3Ccircle cx=%271%27 cy=%271%27 r=%271%27 fill=%27%23e6e6e6%27/%3E%3C/svg%3E", import.meta.url);
    | 
                                                                                                  ^
  6 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
  7 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
  8 | // Module
    at pp$5.raise (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:4454:13)
    at pp.unexpected (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:1761:8)
    at pp$3.parseExprAtom (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:3627:50)
    at pp$3.parseExprSubscripts (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:3494:19)
    at pp$3.parseMaybeUnary (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:3474:19)
    at pp$3.parseExprOps (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:3404:19)
    at pp$3.parseMaybeConditional (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:3381:19)
    at pp$3.parseMaybeAssign (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:3344:19)
    at pp$3.parseExprListItem (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:4312:16)
    at pp$3.parseExprList (/home/jakob/projects/onv-keycloak/node_modules/babylon/lib/index.js:4300:20)

Your Environment:

Software	Version(s)
material-components-web	14.0.0
Node	v18.12.1
webpack	5.75.0