Prod config produces invalid font-family values in minified CSS

[veltman]

Is this a bug report?

Yes

Steps to Reproduce

1. Import a stylesheet with a font-family declaration that includes a quoted, multiple-word font name that includes a generic CSS font family keyword as its first word (monospace, cursive, serif, etc.). For example:

body {
  font-family: "Monospace Number";
}
div {
  font-family: "Primary Font", "Cursive Font";
}

2. Build a minified bundle with npm run build.

Expected Behavior

The font declarations are intact.

Actual Behavior

3. cssnano's minification will drop the quotes, leading to:

body{font-family: Monospace Number}div{font-family: Primary Font,Cursive Font}

These are both invalid font-family value because of the keyword + lack of quotes. Confirmed they get ignored as invalid in Chrome 64, Firefox 58, and Safari 11.

Related issues

cssnano/cssnano#434
cssnano/cssnano#439

Suggested fix

I suspect this comes up a fair amount because "Monospace Number" is used throughout some versions of the Ant Design stylesheet. It may also affect other weird name scenarios, like unicode characters in a font name or, the edgiest of edge cases, someone who used a custom font named, e.g., "serif" (I believe the spec allows this if it's quoted!).

Given that it's unclear whether cssnano will change its default behavior, this could be fixed by updating webpack.config.prod.js to pass an option through to preserve the quotes:

// Old
minimize: true,

// New
minimize: { minifyFontValues: { removeQuotes: false } },

If this sounds reasonable I can send a PR.

[Timer]

This sounds reasonable.

[maxekman]

I have also run into this problem with Ant Design for a production build. Would be great to get this merged.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.