postcss doesn't encode spaces in svg-load urls for control icons
@andrewharvey is already working on this.
Since Feb 20, 2019.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.