Roots Discourse

Font-family quotes removed on production build

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 https://github.com/cssnano/cssnano/tree/master/packages/postcss-minify-font-values
No changes! ;(

Someone have solved this issue?

Thx

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.

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!