Trouble using `postcss-purgecss` with `ember-cli-postcss`

@greyhwndz wrote:

I am currently using:

λ ember -v
ember-cli: 3.10.1
node: 10.15.3
os: win32 x64

and my app/styles/app.css:

@import "ember-modal-dialog/ember-modal-structure.css";
@import "ember-modal-dialog/ember-modal-appearance.css";
@import "tailwindcss/base";
@import "custom-base";
@import "tailwindcss/components";
@import "custom-components";
@import "tailwindcss/utilities";
@import "custom-utilities";
@import "tailwindcss/screens";

and my ember-cli-build.js:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const { join } = require('path');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [{
            module: require('postcss-import'),
            options: {
              path: ['node_modules']
            }
          },
          require("tailwindcss")("./config/tailwind.config.js"),
        ]
      },
      filter: {
        enabled: true,
        plugins: [
          require('@fullhuman/postcss-purgecss')({
            content: [
              join(__dirname, 'app', '**', '*.html'),
              join(__dirname, 'app', '**', '*.hbs'),
              join(__dirname, 'app', '**', '*.js'),
            ],
            defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
          })
        ]
      }
    }
  return app.toTree();
};

It seems like purgecss is removing the ember-modal-dialog css is getting removed despite using:

{{#modal-dialog}}
   Testing Modal Dialog...
{{/modal-dialog}}

in the templates. Whenever I disable the purgecss filter the modal gets styled correctly.

Posts: 1

Participants: 1

Read full topic