Usage with postcss autoprefixer?

[stfcodes]

Hi @samselikoff 👋

I'm trying to use autoprefixer in my app following the example from ember-cli-postcss:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const autoprefixer = require('autoprefixer');

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        enabled: false
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: autoprefixer
          }
        ]
      }
    }
  });
  return app.toTree();
};

My simple use case is just to add the required prefixes for the .appearance-none class tailwind provides.

Unfortunately this results in a Build Error (broccoli-persistent-filter:PostcssFilter) in unrelated tailwind components I've added and I'm not sure how to continue.

Commenting out those components no longer yields the error, but an error is shown in the console: Refused to apply style from 'http://localhost:4200/assets/my-app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Any ideas on what to do next?

• Am I missing something obvious?
• Is there some advanced configuration to add? (either this addon or postcss). Reading the docs I have a hunch that I could adapt the steps from the advanced addon usage readme section to my app. But I'm not yet entirely sure how to continue or if I should continue on this route at all.
• Is this not supported at all yet? I've seen your comment on Ability to add other PostCSS plugins like postcss-nested #68 about exposing the postcss pipeline.

Thanks in advance!

[fpauser]

I also stumbled across this - however, enabling compilation and adding at least 1 postcss plugin fixed it:

const CssImport = require('postcss-import')
const CssNext = require('postcss-cssnext')

module.exports = {
  options: {
    postcssOptions: {
      compile: {
        enabled: true,
        plugins: [
          { module: CssImport },
          { module: CssNext }
        ]
      }
    }
  }
  ...
}

[samselikoff]

Hey there Stefan 😄

I'd have to dig into the error to understand what's happening, nothing obvious stands out to me.

In the meantime, you can definitely try working with the advanced usage, and use that function to get your css file built and into your treeForStyles, at which point you may then be able to re-run that built css through PostCSS? I would have to dive in to know for sure but don't have time atm...

If you (or anyone) wants to work on a PR to expose the PostCSS pipeline I can also direct.

[andrewfan]

@shuriu as a quick workaround you can use https://github.com/kimroen/ember-cli-autoprefixer or simply call https://github.com/sindresorhus/broccoli-autoprefixer yourself