Font-family quotes removed on production build

sage
,
1

Hello everyone,
I try to compile this simple css code

body {
  font-family: "Font Awesome 5 Pro", sans-serif;
}

After running yarn build I have this result (all good, please note quotes on font family)

/* line 1, stdin */

body {
  font-family: "Font Awesome 5 Pro", sans-serif;
}


/*# sourceMappingURL=main.css.map*/%

If I run yarn build:production I have this result:

body{font-family:Font Awesome\ 5 Pro,sans-serif}

Quotes are stripped away and Firefox won’t load Font Awesome icons.
I try to edit postcss options looking at cssnano/packages/postcss-minify-font-values at master · cssnano/cssnano · GitHub
No changes! ;(

Someone have solved this issue?

Thx

2

When you comment out the cssnano step in webpack production build config,
will the issue go away? Can you ensure it is caused by cssnano?
Also run npm ls and check what cssnano release is actually used,
the npm package system allows each package to have individual versions as dependencies.

3

I don’t know why but the problem in here:

On postcss.config.js I add this

const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true }, minifyFontValues: { removeQuotes: false } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: true,
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
    },
  };
};

and on webpack.config.js I forced minimize: false

...
    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: config.enabled.watcher,
      stats: { colors: true },
    }),
...

With these 2 fixes now seems to work!