Skip to content

Double quoted url() arguments are parsed incorrectly #595

Closed
@nspire909

Description

@nspire909

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

swagger-api/swagger-ui#8116

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions