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 :)