Question 1

How do I set up CSS Modules in an Ember app with Vite?

Accepted Answer

For Ember v2 apps with Vite, no setup is needed—just import styles from .module.css files in your components, as Vite handles CSS Modules natively. For v1 apps, configure ember-auto-import with cssLoaderOptions.

Question 2

What's the difference between ember-css-modules and using CSS Modules directly?

Accepted Answer

ember-css-modules adds syntax like local-class for templates, but with modern bundlers, you can use CSS Modules directly via imports, reducing dependencies. The main value is in migration and optional conveniences.

Question 3

How to migrate from old ember-css-modules to the new setup?

Accepted Answer

Follow the provided migration guides: update bundler configurations (e.g., Webpack or Vite) and optionally switch to direct imports or use ember-local-class for syntax. The guides detail steps for apps and addons.

Question 4

Is local-class syntax better than importing styles in GJS?

Accepted Answer

It's a trade-off: local-class keeps templates slightly cleaner, but direct imports are more standard and require fewer packages. Choose based on team preference and project complexity.

Question 5

Can I use CSS Modules in Ember addons or libraries?

Accepted Answer

Yes, use rollup-plugin-preprocess-css-modules to preprocess CSS Modules into standard CSS at publish time, allowing consumption by apps without CSS Module support, as outlined in the library support section.

Question 6

Ember CSS Modules vs Tailwind CSS: which is better for styling?

Accepted Answer

Ember CSS Modules is for scoped, component-specific CSS to avoid conflicts, while Tailwind CSS is a utility-first framework for rapid styling. They can be combined, but choose based on whether you need modular isolation or utility classes.

ember-css-modules

What is ember-css-modules?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions