ember-cli-postcss filters not running under embroider

Cross posting this embroider compatibility issue from the ember-cli-postcss repo: https://github.com/jeffjewiss/ember-cli-postcss/issues/714

tl;dr: the addon uses the postprocessTree hook to run a postcss “filter” operation, this hook seems to no longer work under embroider.

From https://jeffjewiss.github.io/ember-cli-postcss/docs:

if you would like to run Postcss after another processor or on all of your styles, including files added by addons or through vendor, then use filter.

Is there a recommended path forward for addons like this which want to do work at a particular stage of the build pipeline?

[ef4]

I will add one warning about using sass directly with webpack.

Sass is a bundler in its own right, and not just a transpiler. Some obvious things you might decide to do, like having each of your component javascript files import a corresponding sass file, give disastrously bad output (like, megabytes and megabytes of duplicated styles).

Sass has a solution for this, which is “sass modules” (which means using @use instead of @import), so if you and your sass-providing dependencies have switched to that, you can do fine-grained inclusion of sass. But most codebases I’ve seen still use the older style.

Using that style, you should limit yourself to having a single place in the app do an import of a single top-level sass file:

// app/app.js
import "./styles/app.scss";

and the app.scss should internally @import or @use everything else that’s needed.

[22a]

We’ve had some success getting the postcss “filter” operation to run as part of the existing broccoli pipeline in our embroider app, short-circuiting the non-existent postprocessTree hook.

Removing our existing ember-cli-postcss config:

    postcssOptions: {
      compile: {
        enabled: false,
      },
      filter: {
        enabled: true,
        map: isProduction,
        include: ['assets/embercom.css', 'assets/vendor.css'],
        exclude: ['**/*.css.map'],
        plugins: [
          require('tailwindcss')('./config/tailwind.config.js'),
          ...(isProduction ? [require('postcss-clean')] : []),
        ],
      },
    },

and replacing it with a direct invocation of broccoli-postcss:

const PostcssFilter = require('broccoli-postcss');

// ...

  let postcssFilterOptions = {
    enabled: true,
    map: isProduction,
    include: ['assets/embercom.css', 'assets/vendor.css'],
    exclude: ['**/*.css.map'],
    plugins: [
      require('tailwindcss')('./config/tailwind.config.js'),
      ...(isProduction ? [require('postcss-clean')] : []),
    ],
    overrideBrowserslist: ['Edge >= 80', 'Chrome >= 66', 'Firefox >= 58', 'Safari >= 13'],
    processTrees: ['css'],
  };

  let treeWithPostcssTransformedStyles = new PostcssFilter(
    new MergeTrees(trees),
    postcssFilterOptions,
  );

  trees = trees.concat([treeWithPostcssTransformedStyles]);

Extra context

In this app I’m testing, we only use PostCSS for replacing @tailwind at-rules and minification (with ember-cli-sass handling the rest of our app styles) so this may be a simplified use case.