Support for ember-template-imports?

[deanylev]

Are there any plans to support ember-template-imports? We were planning to switch our new components over to that but unfortunately it appears ember-css-modules is incompatible. The outputted HTML simply includes the local-class attribute verbatim, instead of transforming it to the mangled class attribute.

[deanylev]

Appears the local-class helper works in the meantime which leads me to think fixing this properly shouldn't be too hard. I've taken a look myself but I'm not really sure why the local class helper injection hack works in normal components but not gjs/gts ones.

[deanylev]

Narrowed it down to this line

ember-css-modules/packages/ember-css-modules/lib/htmlbars-plugin/index.js

Line 52 in 409cc26

// No-op for the stage 1 Embroider pass (which only contains relative paths)

but doesn't work due to strict mode 😕 wonder if the automagic local-class attribute replacement will be possible in that case

[dfreeman]

We're planning on a pretty major overhaul (or really, stripping down) of ember-css-modules. The end result will lean heavily on the bundler (Webpack via ember-auto-import, or Webpack/Vite via Embroider) to handle the actual "CSS Modules" of it all, and the only custom bit left will be the local-class transform.

The goal there will be full compatibility with Embroider's strictest settings and FCCTs (a.k.a ember-template-imports) for those who want to keep using the local-class attribute going forward rather than importing and directly referencing the styles hash themselves.

To temper your expectations, though, I currently have that work lined up to likely happen around May or June, depending on how a couple of other internal projects I'll be taking on at work over the next few months go.

[deanylev]

@dfreeman any update on when support for this will be added? 🙏

[dfreeman]

Yes! I started on this work in June, but have been on vacation for the past six weeks—I start back at work on Monday, and will keep you updated here as there's progress :)

[ajitsinghkamal]

Hey, I haven't dived deep into the code yet and new to ember as well but first of all, thank @dfreeman for this plugin. I am not sure if @deanylev found a solution but I figured out a hacky way to use module classes work in .gts|.gjs for now.

It seems like importing the stylesheet and accessing the class through the import works for most cases.(skip the scss extension)

.shell {
  display: grid;
  grid-template-rows: var(--app-header-ht) 1fr;
  grid-template-columns: 1fr;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

// @ts-expect-error
import css from './styles';
import { get } from '@ember/object';

const Shell = <template>
  <div class='{{get css "shell"}}' ...attributes>
    <Header />
    <main class='page-container'>
      {{yield}}
    </main>
  </div>
</template>;

PS. I too think this would be a great improvement so happy to contribute if needed :)

[RobbieTheWagner]

@dfreeman any updates on this refactor?

[dfreeman]

@RobbieTheWagner I'm still working on writing up documentation, but I was able to wrap up the implementation work on that refactor during a company hackathon recently. That work lives on the standalone-template-transform branch and has been published as ember-css-modules@3.0.0-alpha.1.

The v3 alpha should work well with FCCTs (.gjs/.gts files) as well as @embroider/webpack with its various static* flags enabled; see the app-v1-ecm test package.

That branch also introduces a glimmer-local-class-transform package that can be used in v2 apps and addons, as well as an ember-local-class package for v1 apps that only installs the local-class syntax for templates and allows you to rely on your bundler for actual CSS Modules support rather than Broccoli shenanigans. See the various test-packages for examples.

All three packages are available as alpha release if you'd like to test drive them. As I said I'm still working on real documentation about how the packages fit together and migration details, but here's the outline I'm working from in case it's helpful:

Breaking changes:
 - Min Node version 22
 - Min Ember version is 3.28; also requires function helpers polyfill if < 4.5
 - Removed the plugin system
 - Template association is now based on a regex map (should work essentially as before, but could be edge cases)

Differences between `ember-css-modules` and `ember-local-class`:
  - ELC defaults to `.module.css` rather than any `.css`
  - ELC defaults to only supporting colocated CSS (no classic/pods layout)
  - ELC does not do any CSS preprocessing; it just sets up `glimmer-local-class-transform` (which provides support for the `local-class` attr and helper)

v1 App (pick one):
 - `ember-css-modules` (classic build or `@embroider/webpack`) OR
 - `ember-local-class` + `ember-auto-import` with `allowAppImports` and `modules: { auto: true }` OR
 - `ember-local-class` + `@embroider/webpack` with `modules: { auto: true }`

v1 Addon:
 - `ember-css-modules` in `dependencies`

v2 App:
 - `glimmer-local-class-transform` in `babel.config.cjs`

v2 Addon:
 - `glimmer-local-class-transform` in `babel.publish.config.cjs`
 - `.hbs` in Babel extensions and `keepAssets(..., 'default')` in `rollup.config.mjs`
 - Either set up your own CSS Modules preprocessing or require host to deal with it (the latter is better for treeshaking and gives the host more say in how CSS is bundled)