Double quoted url() arguments are parsed incorrectly
nspire909 opened this issue · comments
Bug report
Actual Behavior
A change in the npm package swagger-ui-dist changed the quotes around its url() arguments in swagger-ui.css from single to double. For example:
v4.12.0
background:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" aria-hidden="true"><path fill="%23fff" fill-rule="evenodd" d="M4 12h4v1H4v-1zm5-6H4v1h5V6zm2 3V7l-3 3 3 3v-2h5V9h-5zM6.5 8H4v1h2.5V8zM4 11h2.5v-1H4v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V5H3v9h10v-2zM4 4h8c0-.55-.45-1-1-1h-1c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H5c-.55 0-1 .45-1 1z"/></svg>') 50% no-repeat;
v4.13.0
background:url("data:image/svg+xml; charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" aria-hidden=\"true\"><path fill=\"%23fff\" fill-rule=\"evenodd\" d=\"M4 12h4v1H4v-1zm5-6H4v1h5V6zm2 3V7l-3 3 3 3v-2h5V9h-5zM6.5 8H4v1h2.5V8zM4 11h2.5v-1H4v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V5H3v9h10v-2zM4 4h8c0-.55-.45-1-1-1h-1c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H5c-.55 0-1 .45-1 1z\"/></svg>") 50% no-repeat;
The second example fails with the following error:
./node_modules/swagger-ui-dist/swagger-ui.css - Error: Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/
cjs.js):
<css input>:34:8: Can't resolve '"data:image/svg+xml;charset=utf-8,<svg xmlns=/"http://www.w3.org/2000/svg/" width=/"16/" height=/"15/" aria-hidden=/"tr
ue/"><path fill=/"%23fff/" fill-rule=/"evenodd/" d=/"M4 12h4v1H4v-1zm5-6H4v1h5V6zm2 3V7l-3 3 3 3v-2h5V9h-5zM6.5 8H4v1h2.5V8zM4 11h2.5v-1H4v1zm9 1h1v2c-.
02.28-.11.52-.3.7-.19.18-.42.28-.7.3H3c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V5H3v9h10v-2zM4 4h8c0-
.55-.45-1-1-1h-1c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H5c-.55 0-1 .45-1 1z/"/></svg>"'
Expected Behavior
url() with double quoted arguments should be parsed without throwing an error
According to https://jigsaw.w3.org/css-validator/validator both versions of swagger-ui.css (v4.12.0 & v4.13.0) are valid.
Here are the parsing rules for url().
How Do We Reproduce?
https://github.com/nspire909/swagger-test
Run yarn to install deps. It should work fine with npm install too.
yarn build (or ng build) to build with swagger-ui.css v4.13.0 => fails
yarn build -c legacy or ( ng build -c legacy) to build with swagger-ui.css v4.12.0 => succeeds
If you try to yarn build again it will succeed. This is an issue with the angular cli cache. Please delete the angular cache with rm -rf .angular between each build to insure that it does a full build each time.
Please paste the results of npx webpack info here, and mention other relevant information
System:
OS: Windows Server 2016 10.0.14393
CPU: (8) x64 Intel(R) Xeon(R) CPU E5-2686 v4 @ 2.30GHz
Memory: 16.63 GB / 32.00 GB
Binaries:
Node: 16.16.0 - ~\Documents\Repos\v3-ibs-ui\tools\dependencies\node.EXE
Yarn: 1.22.17 - ~\Documents\Repos\v3-ibs-ui\tools\dependencies\yarn.CMD
Browsers:
Internet Explorer: 11.0.14393.2007
Packages:
tsconfig-paths-webpack-plugin: ^3.5.1 => 3.5.2
webpack-bundle-analyzer: ^4.1.0 => 4.5.0
webpack-cli: ^4.10.0 => 4.10.0
webpack-merge: ^5.8.0 => 5.8.0
Please open an issue in @angular/cli, we just postcss runner. Possible reasons:
- postcss plugin rewrites
url(...) - custom loader tries to resolve
dataURL, they should be ignore and inject into generated code vianew URL("data:...", import.meta.url)
postcss-loader don't touch your URLs, you can look at code and you will not find logic for this