Roots Discourse

Sage 10 does not compile SCSS of SVG "path" selector on build:production

[EDIT] It is something purgeCss related. Comenting purgeCss in webpack.mix.js fix the problem. Maybe purgeCss cant see inside SVG.

Hi, I’m working on this prototype:

https://d3.e451.net/

These buttons has a SVG with a simple path:

Captura de pantalla 2021-01-03 13.05.42

its fill color changes regarding its class:

It works well at yarn build and it doesn’t work at yarn build:production. I’ve noticed that any SCSS containing path selector is not transpiled to plain CSS when is buit to production. It Is completely removed from CSS.

Is it a bug or an expected behavior?

Adding my own whitelist for purgeCSS to webpack.mix.js (note “path” at the end of the list).

let whitelist = [
  'rtl',
  'home',
  'blog',
  'archive',
  'date',
  'error404',
  'logged-in',
  'admin-bar',
  'no-customize-support',
  'custom-background',
  'wp-custom-logo',
  'alignnone',
  'alignright',
  'alignleft',
  'wp-caption',
  'wp-caption-text',
  'screen-reader-text',
  'comment-list',
  'path',
];

mix
  .sass('resources/assets/styles/app.scss', 'styles')
  .sass('resources/assets/styles/editor.scss', 'styles')
  .purgeCss({
    extend: { content: [path.join(__dirname, 'index.php')] },
    whitelist: whitelist,
    whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
  });

Original list:

1 Like