Unable to use ember-cli-postcss + postcss-import

It seems that integrating ember-cli-postcss and postcss-import is not possible.

PostCSS is not able to find the necessary files. Below I have created a repo showing the issue. Essentially I’m importing TailinwCSS using postcss-import.

https://github.com/josemarluedke/--embroider-postcss

Here is the error report:

Build Error (PostcssCompiler)

Failed to find 'tailwindcss/base'
  in [
    /var/folders/67/6jb5flcd6d30lkgvj0_92c_m0000gn/T/broccoli-54621GjWn2iN7Sn51/out-159-broccoli_merge_trees_embroider_v1_app_combined_styles
  ]


Stack Trace and Error Report: /var/folders/67/6jb5flcd6d30lkgvj0_92c_m0000gn/T/error.dump.20f93a5fbdeba6c5e344630f48e7ab98.log

ls /var/folders/67/6jb5flcd6d30lkgvj0_92c_m0000gn/T/broccoli-54621GjWn2iN7Sn51/out-159-broccoli_merge_trees_embroider_v1_app_combined_styles
app.css            other-file.css     tailwind.config.js

[ef4]

Thank you @josemarluedke for sharing a reproduction. I debugged it a bit.

(Everyone is strongly encouraged to practice using a debugger to see what’s happening inside the builds instead of waiting around for me. When you have an exception like this that gives you a very focused place to start looking!)

This only works in the classic build for an extremely dubious reason:

1. Broccoli uses symlinks as an optimization within the build pipeline. If a build step wants to pass a directory forward to the next build step unmodified, it often makes a symlink. At the final output, broccoli will turn all the symlinks back into real copies.

2. ember-cli-postcss passes its input tree directly to the postcss compiler and expects the compiler to be able to resolve things out of the app’s node_modules. That absolutely should not work, because the tree itself lives in $TMPDIR and has no co-located node_modules directories. However, because of the aforementioned broccoli optimization, if the directory that contains your app.css inside that broccoli tree happens to have been optimized into a symlink, postcss will follow the symlink back to your original code which does have a co-located node_modules folder.

   I will add that historically, in older versions of ember-cli, you could rely on this working, because instead of building in $TMPDIR broccoli used a tmp inside your project. But that had a lot of other bad side effects and ember-cli switched to $TMPDIR quite a few releases ago.

The example showed by @nightire is the correct configuration that avoids this problem by telling postcss explicitly where your node_modules live. I might go further and say:

{
  module: require('postcss-import'),
  options: {
    path: [`${__dirname}/node_modules`]
  }
}

because otherwise you’re relying on process.cwd(), and I don’t know if that’s reliable in 100% of situations.

This isn’t a very satisfying outcome, because it’s annoying to have every app need to configure this independently. But given the way ember-cli-postcss’s API works, I don’t see a great alternative. Since it makes your bring your own postcss-import plugin, and since the build is going to happen inside $TMPDIR, you really do need to tell it where to find your node_modues.

I will also point out that this doesn’t just break under embroider. Apps are totally allowed to present customized broccoli trees. Here’s an example that dies with the same error even without embroider:

const mergeTrees = require('broccoli-merge-trees');
module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    trees: {
      // remember to mkdir app/extra-styles to test this
      styles: mergeTrees(['app/styles', 'app/extra-styles'])
    },
    postcssOptions: {
      compile: {
        enabled: true,
        cacheInclude: [/.*\.hbs$/, /.*\.css$/, /.tailwind\.config\.js$/],
        plugins: [
          {
            module: require("postcss-import"),
            // Without this, the build fails to resolve tailwindcss/base:
            // options: { path: `node_modules` },
          },
          require("tailwindcss")(
            path.join("app", "styles", "tailwind.config.js")
          ),
        ],
      },
    },
  });

[josemarluedke]

@ef4 Thank you so much for the detailed explanation and for your time debuggin this.