postcss-easy-import troubles

[Windvis]

Hey!

After updating to Ember cli 3.7 (coming from 3.4 LTS) our postcss build pipeline stopped working properly. I already created an issue on the postcss-easy-import repo to get some insights.

After talking with Sam Selikoff in the ember discord I think it might be related to ember-cli-postcss. Sam uses the same combination of postcss plugins for the ember-cli-tailwind addon, and that addon has no problems running in ember cli 3.5+.

Short version, postcss-easy-import can't find files in the node_modules folder. postcss-import, the library that postcss-easy-import uses internally does find them, but I'm not sure what they do differently.

Our config:

{
//...
    postcssOptions: {
      compile: {
        plugins: [
          { module: postCssEasyImport },
          {
            module: postCssNested,
            options: {
              bubble: ['screen'],
            }
          },
          tailwindcss('./tailwind.js'),
          {
            module: purgecss,
            options: {
              content: ['./app/templates/**/*.hbs', './app/components/**/*.js', './app/controllers/**/*.js'],
              extractors: [
                {
                  // Custom extractor to allow special characters (like ":") in class names
                  // See: https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css-with-purgecss
                  extractor: TailwindExtractor,
                  extensions: ['hbs', 'js'],
                }
              ]
            }
          },
          { module: postcssSystemUiFont },
        ],
      },
      filter: {
        enabled: true,
        plugins: [
          { module: autoprefixer }, // We add autoprefixer here to make it also handle vendor styles
        ],
      },
    },
}

example css:

@import "tailwindcss/preflight"; /* node_modules imports don't work */
@import "components/**/*.css"; /* local imports do work */

Any idea what the problem could be? We can just use postcss-import so it's not a high priority, but I really want to find out what's causing this :D.

[jeffjewiss]

Hey, I think this has something to do with Ember CLI 3.5+ using Broccoli 2. I think something was changed related to how the temporary file setup works, which affects the paths, but I haven't had a chance to look into it in detail yet.

I'm not sure yet if this is something that can be fixed with the addon directly or if it's with broccoli-postcss-single.

Are you able to use postcss-import instead of postcss-easy-import until the issue is resolved?

I've updated the config for some projects to:

{
  module: postcssImport,
  options: {
    path: ['node_modules'],
  },
},

to get node_modules imports working with Ember CLI 3.5.

[greyhwndz]

@jeffjewiss @Windvis
I am having the same trouble of not finding the base.css inside node_modules/tailwindcss in app/styles/app.css:

@import "tailwindcss/base";

and here is the error message:

Build Error (PostcssCompiler)                                                                                           
                                                                                                                        
Failed to find 'tailwindcss/base'                                                                                       
  in [                                                                                                                  
    C:\Users\USER\AppData\Local\Temp\broccoli-14740P3v3ddttxRvl\out-364-broccoli_merge_trees_full_application\app\styles
  ]                                                                                                                     

I have done the following:

$ ember install ember-cli-postcss
$ npm install --save-dev tailwindcss
$ npm install --save-dev postcss-import
$ npm i -D @fullhuman/postcss-purgecss

ember-cli-build.js:

...
const purgecss = require("@fullhuman/postcss-purgecss");

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require("postcss-import"),
          require("tailwindcss")("./config/tailwind.config.js")
        ]
      },
      filter: {
        enabled: true,
        plugins: [{
          module: purgecss,
          options: {
            content: ['index.html', './app/**/*.html', './app/**/*.hbs', './app/**/*.js']
          }
        }]
      }
    }
  });
  return app.toTree();
};

[Windvis]

@greyhwndz I think the workaround fix @jeffjewiss suggested in his post should work.