@font-face purged when font-family quoted or stacked

[knowler]

OS: macOS 10.13.4 Node: v9.8.0 Purgecss: 0.21.0

Description of the issue

If the font-family in the @font-face declaration does not exactly match the font-family in other places of the stylesheet, then it will be purged. This means that:

1. If the font-family is set with quotations in the @font-face declaration, it will be purged if other declarations do not use quotations (i.e. 'IBM Plex Sans' vs. IBM Plex Sans).
2. If the font-family is not stacked in the @font-face declaration, it will be purged if it is stacked (i.e. 'IBM Plex Sans', sans-serif).

Contexts it was discovered/tested in

Sage (WordPress)

I've tested this in two contexts. I discovered it when I was trying to purge @font-face values (fontFace: true) after adding IBM Plex to my Tailwind setup in Sage. Tailwind outputs fonts without quotations which seems to be the first issue. Secondly, it includes a font stack, which also seems to be an issue.

Clone of Purgecss

To confirm these issues, I cloned purgecss and updated font-face.css to be:

font-family: Cerebri Sans;

and

font-family: 'Cerebri Sans', sans-serif;

In both cases running the test failed.

A modest reproduction of the issue

To see for yourself, clone the font-face-issue branch of my fork of Purgecss and run the test:

git clone -b font-face-issue --single-branch git@github.com:knowler/purgecss.git

(I’m still learning testing so sorry I can’t add more to the fork.)

[jsnanigans]

Thanks for this detailed report! This is awesome. Ill try to fix this as soon as possible

[zcuric]

Hi, has this issue been addressed? Thanks! Awesome tool, btw!

[gverger]

Hello, I have been caught by this bug too, and I just tried to fix it in the PR above. Comments are welcome!

[ShirishPatel]

This issue is still persisting.. Before CSS font-family: 'Glyphicons Halflings'; After CSS font-family: "'Glyphicons Halflings'";