Skip to content
This repository has been archived by the owner on Feb 3, 2020. It is now read-only.

Not working in config with plugins object #23

Open
aaronjpitts opened this issue Mar 1, 2019 · 4 comments
Open

Not working in config with plugins object #23

aaronjpitts opened this issue Mar 1, 2019 · 4 comments

Comments

@aaronjpitts
Copy link

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
Copy link

philwolstenholme commented Mar 12, 2019

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
Copy link

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

@philwolstenholme
Copy link

@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
Copy link

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 😁

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants