Prod config produces invalid font-family values in minified CSS

Created by: veltman

Is this a bug report?

Yes

Steps to Reproduce

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";
}

Build a minified bundle with npm run build.

Expected Behavior

The font declarations are intact.

Actual Behavior

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.

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.