- Sage doesn't come with Purgecss (or uncss, etc.)
- Say, we use Bulma -- suddenly dist/main.cssgrows by 400K!
- Let's purge it!
- Oh dang, we need to whitelist /\.wp-/,/\.post-type/,/myfancylightbox/...
- Wait we are whitelisting pretty much everything from /resource/assets/styles!
- Isn't there an option to purge /node_modules/**/*only?
- Nope.
- purgecss start ignore, strategically placed, to the rescue!
Now, this might not be 100% effective, but it is very convenient. YMMV!
yarn add -D purgecss-webpack-plugin
yarn add -D glob-all// resources/assets/build/webpack.config.optimize.js
const glob = require('glob-all');
const PurgecssPlugin = require('purgecss-webpack-plugin');
//...
module.exports = {
  plugins: [
    //...
    new PurgecssPlugin({
      paths: glob.sync([
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/assets/scripts/**/*.js',
      ]),
    }),// resources/assets/build/postcss.config.js
// we need to keep "important" comments
const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: false } }]
//                                                    ^^^^^// resources/assets/styles/main.scss
@import "common/variables";
/** Import everything from autoload */
@import "./autoload/**/*";
/**
 * Import npm dependencies
 *
 * Prefix your imports with `~` to grab from node_modules/
 * @see https://github.com/webpack-contrib/sass-loader#imports
 */
/*! purgecss start ignore */
// note the exclamation mark, which makes this comment "important"!
// everything above this line will be purged!
// everything below it will land in dist/main.css!
/** Import theme styles */
@import "common/global";
//...
Thanks for this gist!
Does it make sense to add purgecss-with-wordpress?
This shouldn't have an impact, since custom scripts are ignored via the PurgeCSS comment, right?