mapbox / mapbox/mapbox-gl-js

postcss doesn't encode spaces in svg-load urls for control icons

Open
#7,896 5 comments 1 reaction 1 assignee View on GitHub

@andrewharvey is already working on this.

Since Feb 20, 2019.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

From commit d141026f3625ba11936e1b47ea784ed7c3cdc9a8, the url value of background-image properties is generated from postcss without the spaces of the url be encoded.

For example:
Before this commit, the css property for zoom in icon (+) was:
`background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");`

After this commit with postcss, the css property becomes:
`background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath style='fill:%23333333;' d='M 10 6 C 9.446 6 9 6.4459904 9 7 L 9 9 L 7 9 C 6.446 9 6 9.446 6 10 C 6 10.554 6.446 11 7 11 L 9 11 L 9 13 C 9 13.55401 9.446 14 10 14 C 10.554 14 11 13.55401 11 13 L 11 11 L 13 11 C 13.554 11 14 10.554 14 10 C 14 9.446 13.554 9 13 9 L 11 9 L 11 7 C 11 6.4459904 10.554 6 10 6 z'/%3E %3C/svg%3E");`

There are css minifiers like [rcssmin](https://github.com/ndparker/rcssmin), which is used by [django compressor](https://github.com/django-compressor/django-compressor), that remove spaces from the urls. Removing the spaces make the urls unreadable for the browsers, so icons are not rendered. There is [this issue](https://github.com/ndparker/rcssmin/issues/7) in rcssmin project about removing spaces that explains in the last two comments why spaces should be encoded to %20 by linking to [rfc2397](https://tools.ietf.org/html/rfc2397).

One possible solution is [postcss-inline-svg plugin](https://github.com/TrySound/postcss-inline-svg/) that offers an encoding option, however [by default](https://github.com/TrySound/postcss-inline-svg/blob/master/src/defaults.js#L1) it doesn't encode spaces, which means that a custom encode function should be passed as encoding option.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.