Question 1

How to set up Tailwind CSS with ember-cli-postcss?

Accepted Answer

Install Tailwind as a PostCSS plugin, then configure it in ember-cli-build.js under postcssOptions, ensuring cacheInclude includes .js files if using a JS config. The README provides examples for caching to trigger rebuilds when Tailwind config changes.

Question 2

What's the difference between compile and filter modes in ember-cli-postcss?

Accepted Answer

Compile mode processes individual CSS files like app.css or custom output paths, while filter mode runs on all CSS files including vendor.css at the end of the build. You can use both, but filter requires explicit enablement and supports white/black-listing.

Question 3

Is ember-cli-postcss better than ember-cli-sass for modern CSS?

Accepted Answer

It depends: ember-cli-postcss offers more flexibility with PostCSS plugins and migration paths from Sass, but if you rely heavily on Sass-specific features without wanting to switch, ember-cli-sass might be simpler. PostCSS excels for custom transformations and future-proofing.

Question 4

How do I migrate from Sass to PostCSS in Ember?

Accepted Answer

Use the migration guide in the README: set the parser to postcss-scss, configure the extension to 'scss', and use @csstools/postcss-sass as the first plugin. This allows gradual file renaming and keeps Sass features during transition.

Question 5

Can I use PurgeCSS with ember-cli-postcss for production?

Accepted Answer

Yes, install PurgeCSS as a PostCSS plugin and configure it in the filter mode for production builds. Note that caching might need adjustment to include template files (e.g., .hbs) if PurgeCSS depends on them, but the README advises this is often unnecessary.

Question 6

How to handle browser targets with Autoprefixer in this addon?

Accepted Answer

Browser targets from config/targets.js are automatically passed to plugins, but you can override them per-plugin in the options. For example, set browsers: ['last 2 versions'] in the Autoprefixer plugin config to customize support.

Question 7

What are the common pitfalls when upgrading ember-cli-postcss?

Accepted Answer

Watch for PostCSS version changes (e.g., from v7 to v8) that may break plugin compatibility, requiring plugin updates. Also, review caching and processTrees settings, as defaults might not cover custom workflows, leading to missed rebuilds.

ember-cli-postcss

What is ember-cli-postcss?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions