Not working in config with plugins object

[aaronjpitts]

This is my postcss.config.js which is used with webpack.

const glob = require('glob-all');
const cssnanoConfig = {
  preset: ['default', { discardComments: { removeAll: true } }]
};

module.exports = ({ file, options }) => {
  return {
    parser: options.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      autoprefixer: true,
      purgecss: {
         content: glob.sync([
          'app/**/*.php',
          'resources/views/**/*.php',
          'resources/assets/scripts/**/*.js',
        ]),
        whitelistPatterns: [/^slick/],
      },
      cssnano: options.enabled.optimize ? cssnanoConfig : false,
    },
  };
};

But upon building I get this error: Module build failed: ModuleBuildError: Module build failed: Error: Loading PostCSS Plugin failed: Cannot call a class as a function

Do you know what the problem is?

Many thanks

[philwolstenholme]

I have the same issue with the config below and michael-ciniawsky/postcss-load-config:

/*
  Custom extractor for purgeCSS to avoid
  stripping classes with `:` prefixes
*/
class TailwindExtractor {
  static extract(content) {
    // eslint-disable-next-line no-useless-escape
    return content.match(/[A-z0-9-:\/]+/g) || [];
  }
}

module.exports = ctx => ({
  plugins: {
    tailwindcss: './tailwind.js',
    autoprefixer: {},
    // Cssnano only for production builds.
    cssnano:
      ctx.env === 'production'
        ? {
            zindex: false,
            svgo: false,
            mergeRules: false,
            normalizeUrl: {
              stripWWW: false,
            },
          }
        : false,
    purgecss:
      ctx.file.basename === 'tailwind.css' && ctx.env === 'production'
        ? {
            content: [
              './components/_patterns/**/*.html.twig',
              './components/_patterns/**/*.twig',
              './components/_patterns/**/*.scss',
              './components/_patterns/**/*.js',
              './templates/**/*.html.twig',
            ],
            extractors: [
              {
                extractor: TailwindExtractor,
                extensions: ['html.twig', 'twig', 'scss', 'js'],
              },
            ],
          }
        : false,
  },
});

[philwolstenholme]

I wonder if this is due to the namespaced npm package @fullhuman/postcss-purgecss

[philwolstenholme]

@aaronjpitts it was the namespacing, here's my revised config, I'm using '@fullhuman/postcss-purgecss' as the plugin name:

// Custom extractor for purgeCSS to avoid stripping classes with `:` prefixes.
class TailwindExtractor {
  static extract(content) {
    // eslint-disable-next-line no-useless-escape
    return content.match(/[A-z0-9-:\/]+/g) || [];
  }
}

module.exports = ctx => ({
  plugins: {
    tailwindcss: './tailwind.js',
    autoprefixer: {},
    // Cssnano only for production builds.
    cssnano:
      ctx.env === 'production'
        ? {
            zindex: false,
            svgo: false,
            mergeRules: false,
            normalizeUrl: {
              stripWWW: false,
            },
          }
        : false,
    // Purgecss only for Tailwind and production builds.
    '@fullhuman/postcss-purgecss':
      ctx.file.basename === 'tailwind.css' && ctx.env === 'production'
        ? {
            content: [
              './components/_patterns/**/*.html.twig',
              './components/_patterns/**/*.twig',
              './components/_patterns/**/*.scss',
              './components/_patterns/**/*.js',
              './templates/**/*.html.twig',
            ],
            extractors: [
              {
                extractor: TailwindExtractor,
                extensions: ['html.twig', 'twig', 'scss', 'js'],
              },
            ],
          }
        : false,
  },
});

[macdaddyaz]

Maybe someone who is already very familiar with PostCSS would know to do this, but could there could be brief example in the README for newbies like myself 😁