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

Questions
1

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.

2

purgecss has no way of knowing that {{modal-dialog}} ultimately refers to a file somewhere in node_modules/ember-modal-dialog/addon/templates. I don’t know of a way to use it that removes unused addon CSS.

(Making that kind of analysis easy is one of the goals of Embroider.)

There are two different strategies commonly used by addons to provide CSS. Some push it into vendor.css, and that continues to work under purgecss because it’s ignored.

Others tell you to import it into your own app CSS, and that will cause it to get removed. To work around that case, you need to either manually tell purgecss about the classes you want to keep (which is error prone, especially since the addon could change them in a future release), or you can use app.import() in your own ember-cli-build.js file to import the style’s CSS into vendor.css.

3

@ef4 your response is valuable for me who is still trying to learn the ropes of ember. Thanks so much. In that case then it would be okay to do app.import("ember-modal-dialog/ember-modal-structure.css"); in ember-cli-build.jsthan @import "ember-modal-dialog/ember-modal-structure.css"; in app/styles/app.css. Otherwise I would have to do:

/*! purgecss start ignore */
@import "ember-modal-dialog/ember-modal-structure.css";
/*! purgecss end ignore */

in my app/styles/app.css

@ef4 is it a good rule then to app.import() styles that come with addons instead of @importing them in app/styles/app.css with regards to using postcss-purgecss?

And should I also purgecss-ignore "tailwindcss/base" also?

4

Oh, if you can solve the problem with those purgecss comments, that looks good to me.

I don’t have a ton of experience with purgecss or tailwind, I was only experimenting with a small app.