[Bug] : Warnings when Font-Face declaration contains inline SVG

[Neunerlei]

Describe the bug
I'm using cssnano not directly, but as a dependency through "css-minimizer-webpack-plugin". I'm getting warnings like this, after upgrading a project from webpack 4 to webpack 5 (which is probably not related, and only occurs because I updated the dependencies):

Css Minimizer Plugin: cssnano: webpack://./web/typo3conf/labor/th_bingen/Resources/Public/frontend/src/Blocks/Text/Text.sass:84:2: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: . 

Css Minimizer Plugin: cssnano: webpack://./web/typo3conf/labor/th_bingen/Resources/Public/frontend/src/Blocks/Text/Text.sass:84:2: Error in parsing SVG: Text data outside of root node.
Line: 0
Column: 776
Char: � 

I have noticed, that there is a v 5.0.0 release candidate for "postcss-svgo" which might fix the problem? But I haven't tested that.
I'm currently running "postcss-svgo" v4.0.3

To Reproduce
As it is part of a larger project, I can't really provide an easy way to reproduce the problem, but bear with me.
My Font Face is written in SASS and looks like this:

@font-face
  font-family: "Frutiger W02"
  src: url("./fonts/frutiger/c0437327-872b-44d3-9b52-751e84305492.eot?#iefix")
  src: url("./fonts/frutiger/c0437327-872b-44d3-9b52-751e84305492.eot?#iefix") format("eot"), url("./fonts/frutiger/ff61de76-a5aa-4823-8283-8870f6ead91f.woff2") format("woff2"), url("./fonts/frutiger/aeef60c0-dd15-47cc-92c9-06bfe0e4f739.woff") format("woff"), url("./fonts/frutiger/02a32b9b-6c09-4eec-b1e8-5c8eab46ad43.ttf") format("truetype"), url("./fonts/frutiger/36821cc4-6377-4512-b5d3-83237c8af441.svg#36821cc4-6377-4512-b5d3-83237c8af441") format("svg")
  font-weight: 400
  font-style: italic

Which gets processed by "sass-loader" and "post-css-loader" to look like this:

@font-face {
  font-family: Frutiger W02;
  src: url(../assets/ae7f2599-6eeb-410b-a437-6e4076d50df0-d02e72d9894c064e9eb9.eot?#iefix);
  src: url(
        ../assets/ae7f2599-6eeb-410b-a437-6e4076d50df0-d02e72d9894c064e9eb9.eot?#iefix
      )format("eot"),
    url(
          ../assets/63d143f6-cb1a-4ac1-84e8-3b44e0d43633-64d1ade622f847d9272c.woff2
        )format("woff2"),
      url(
            ../assets/caf95f82-4dfa-44de-ac49-ff581b4e57d6-2adf588ee4cd33789fc1.woff
          )format("woff"),
        url(
              ../assets/738ae911-83f9-4a53-b851-c411e18393a5-2da03feb309f982c59e5.ttf
            )format("truetype"),
          url(
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjQwIiB5PSI0MCIgZm9udC1mYW1pbHk9IkZydXRpZ2VyIExUIFcwMiA2NiBCb2xkIEl0YWxpYyIgZm9udC1zaXplPSIzMCIgZmlsbD0iIzkzMyI + QUJDREVGR0hJSktMTU5PUFFSU1RVVldYWVogYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXogQcOBw4DDgsOEw4XDg8OGIEPDhyBEw5AgRcOJw4jDisOLIEkgw40gw4wgw44gw48gTsORPC90ZXh0Pjx0ZXh0IHg9IjQwIiB5PSI4MCIgZm9udC1mYW1pbHk9IkZydXRpZ2VyIExUIFcwMiA2NiBCb2xkIEl0YWxpYyIgZm9udC1zaXplPSIzMCIgZmlsbD0iIzkzMyI + T8OTw5LDlMOWw5XDmMWSIFPFoCBVw5rDmcObw5wgWcOdxbggWsW9IMOeIGHDocOgw6LDpMOlw6PDpiBjw6cgZMOwIGXDqcOow6rDqyBpIMSxIMOtIMOsIMOuIMOvIG7DsSBvw7PDssO0w7bDtcO4xZMgc8Whw58gdcO6w7nDu8O8IHnDvcO/IHrFvjwvdGV4dD48dGV4dCB4PSI0MCIgeT0iMTIwIiBmb250LWZhbWlseT0iRnJ1dGlnZXIgTFQgVzAyIDY2IEJvbGQgSXRhbGljIiBmb250LXNpemU9IjMwIiBmaWxsPSIjOTMzIj7DviAxMjM0NTY3ODkwIMK9IMK8IMK + ICUg4oCwICTCosKjwqXGkuKCrMKkIOKAoCDigKEgwqcgwrYgIyBefsK1ICvDl8KxICZsdDsgPSAmZ3Q7IMO3wqwgIcKhP8K/ICZxdW90OyAmYW1wOyAmYXBvczsgKiDCsCAuICwgOiA7ICgpIFsgXCBdIHt9IC8gfDwvdGV4dD48dGV4dCB4PSI0MCIgeT0iMTYwIiBmb250LWZhbWlseT0iRnJ1dGlnZXIgTFQgVzAyIDY2IEJvbGQgSXRhbGljIiBmb250LXNpemU9IjMwIiBmaWxsPSIjOTMzIj7CpiBfIOKAmiDigJ4g4oCmIOKAueKAuiDCq8K7IOKAmCDigJkg4oCcIOKAnSDigKIgwq0gLSDigJMg4oCUIEAgwqkgwq4g4oSiIMKqwrogwrnCssKzIMK0IGAgy4Ygy5wgwqggwq8gwrcgwrg8L3RleHQ + PC9zdmc + #8765918d-2ee9-4afc-b11e-20c4a924ec45
            )format("svg");
  font-weight: 700;
  font-style: italic;
}

When "css-minimizer-webpack-plugin", in turn "cssnano" and "postcss-svgo" starts to parse the code, it will detect this as "svg" block, because this cirteria is met.

url(../assets/c0437327-872b-44d3-9b52-751e84305492-616754b85283b89c41bd.eot?#iefix) format("eot"), url(../assets/ff61de76-a5aa-4823-8283-8870f6ead91f-394f8d10ebc8e2f4ef61.woff2) format("woff2"), url(../assets/aeef60c0-dd15-47cc-92c9-06bfe0e4f739-72d06ace359f0e724dc4.w
off) format("woff"), url(../assets/02a32b9b-6c09-4eec-b1e8-5c8eab46ad43-6b24c6e92acee29bb4e9.ttf) format("truetype"), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjQwIiB5PSI0MCIgZm9udC1mYW1pbHk9IkZydXRpZ2VyTFRXMDItNTZJdGFsaWMiIGZvbnQ
tc2l6ZT0iMzAiIGZpbGw9IiM5MzMiPkFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaIGFiY2RlZmdoaWprbG1ub3BxcnN0dXZ3eHl6IEHDgcOAw4LDhMOFw4PDhiBDw4cgRMOQIEXDicOIw4rDiyBJIMONIMOMIMOOIMOPIE7DkTwvdGV4dD48dGV4dCB4PSI0MCIgeT0iODAiIGZvbnQtZmFtaWx5PSJGcnV0aWdlckxUVzAyLTU2SXRhbGljIiBmb250LXNpemU9IjMwIiBmaWxsPS
IjOTMzIj5Pw5PDksOUw5bDlcOYxZIgU8WgIFXDmsOZw5vDnCBZw53FuCBaxb0gw54gYcOhw6DDosOkw6XDo8OmIGPDpyBkw7AgZcOpw6jDqsOrIGkgxLEgw60gw6wgw64gw68gbsOxIG/Ds8Oyw7TDtsO1w7jFkyBzxaHDnyB1w7rDucO7w7wgecO9w78gesW+PC90ZXh0Pjx0ZXh0IHg9IjQwIiB5PSIxMjAiIGZvbnQtZmFtaWx5PSJGcnV0aWdlckxUVzAyLTU2SXRhbGljIiBmb
250LXNpemU9IjMwIiBmaWxsPSIjOTMzIj7DviAxMjM0NTY3ODkwIMK9IMK8IMK+ICUg4oCwICTCosKjwqXGkuKCrMKkIOKAoCDigKEgwqcgwrYgIyBefsK1ICvDl8KxICZsdDsgPSAmZ3Q7IMO3wqwgIcKhP8K/ICZxdW90OyAmYW1wOyAmYXBvczsgKiDCsCAuICwgOiA7ICgpIFsgXCBdIHt9IC8gfDwvdGV4dD48dGV4dCB4PSI0MCIgeT0iMTYwIiBmb250LWZhbWlseT0iRnJ1
dGlnZXJMVFcwMi01Nkl0YWxpYyIgZm9udC1zaXplPSIzMCIgZmlsbD0iIzkzMyI+wqYgXyDigJog4oCeIOKApiDigLnigLogwqvCuyDigJgg4oCZIOKAnCDigJ0g4oCiIMKtIC0g4oCTIOKAlCBAIMKpIMKuIOKEoiDCqsK6IMK5wrLCsyDCtCBgIMuGIMucIMKoIMKvIMK3IMK4PC90ZXh0Pjwvc3ZnPg==#36821cc4-6377-4512-b5d3-83237c8af441) format("svg")

The problem, seems to be, that will now iterate over all url() definitions and automatically assume that each of them is an inline svg definition. Which leads to svgo passing even non svg-paths to the processor. The processor detects that it is not an svg and throws the warning.

../assets/042dbf9e-2448-4b39-b168-9cb05b6f9caa-c885fdacc3ddd6f4f6bc.eot?#iefix
../assets/5aac362b-4b86-455a-9f13-b0ddb989bd4a-98c5a1633c62902d160e.woff2
../assets/5aac362b-4b86-455a-9f13-b0ddb989bd4a-98c5a1633c62902d160e.woff2
../assets/1f657ad3-264f-470e-a3ec-88ea91a2f691-49c28dd6b37a4538f8d8.woff
../assets/1f657ad3-264f-470e-a3ec-88ea91a2f691-49c28dd6b37a4538f8d8.woff
../assets/1c1113aa-6ac3-4fd8-bceb-f959da35f142-4bcff7bcb244ed8c536a.ttf
./assets/1c1113aa-6ac3-4fd8-bceb-f959da35f142-4bcff7bcb244ed8c536a.ttf

The issue seems to be introduced by the commit that removed "is-svg"

Expected behavior
Some fallback should be implemented, that detects if a url is actually an svg or not.
I assume executing another one of those blocks inside the loop would fix the problem, without causing issues:

if (!dataURI.test(svg)) {
return;
}

As a quick fix, I added /Css Minimizer Plugin: cssnano/ to the webpack filter warnings plugin

Screenshots
If applicable, add screenshots to help explain your problem. (from cssnano-playground)

Desktop (please complete the following information):

• CSSNANO Version 4.1.10 and 4.1.11
• System:
  OS: Windows 10 10.0.19042
  CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Memory: 22.90 GB / 47.85 GB
  Binaries:
  Node: 14.5.0 - C:\Program Files\nodejs\node.EXE
  npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
  Managers:
  pip3: 19.2.3 - C:\Python38\Scripts\pip3.EXE
  Utilities:
  Git: 2.21.0. - C:\Program Files (x86)\Git\cmd\git.EXE
  FFmpeg: 4.3.2 - C:\ProgramData\chocolatey\bin\ffmpeg.EXE
  Virtualization:
  Docker: 19.03.5 - C:\Program Files\Docker\Docker\Resources\bin\docker.EXE
  SDKs:
  Windows SDK:
  AllowAllTrustedApps: Disabled
  Versions: 10.0.18362.0
  Languages:
  Python: 3.8.3 - C:\Python38\python.EXE
  Browsers:
  Chrome: 89.0.4389.114
  Edge: Spartan (44.19041.423.0), Chromium (89.0.774.68)
  Internet Explorer: 11.0.19041.1

@labor/th-bingen@1.0.1 W:\work\th_bingen\website_relaunch\typo\app\src
+-- @labor-digital/asset-building@9.0.0-rc.5
| -- css-minimizer-webpack-plugin@1.3.0 | -- cssnano@4.1.11 deduped
`-- cssnano@4.1.11 <- Installed manually to test if 4.1.11 fixes the issue

[alexander-akait]

PR welcome

[Neunerlei]

I would, but I don't know if this is still an issue with 5.0.0-rc2

[alexander-akait]

I think this problem on both versions, i.e. rc and 4

[ludofischer]

It is still a bug on master and so on 5.0.0-rc2. I have opened #1043 to fix this.
I am surprised that the issue also occurred on 4.1.10 since that was before removing is-svg. Apparently that is-svg check did not catch this case either.

[Neunerlei]

@ludofischer

True, I spend a bit of time to investigate this. The problem indeed, only occurs if 4.1.11 is used.

We bundle our webpack logic in a single package to use in all our projects, and in this bundle itself cssnano is installed as "4.1.10" (locked by the package.lock file), while in the project itself it gets installed as 4.1.11. But I assumed that 4.1.10 was installed in the project, too. This was my mistake. When I manually install 4.1.10 and dedupe the package it works as expected. Meaning is-svg works as it should. My bad! Sorry for the mixup.