Embroider with staticComponents: true not working with pods components

[danwenzel]

Reproduction here: https://github.com/danwenzel/embroider-issues/tree/css-modules

I've got the beta embroider version of ember-css-modules installed (1.3.0-beta.1). When turning on the staticComponents: true embroider option, ember-css-modules cannot seem to find the styles.css file within a pods component folder:

local-class.js:24 Uncaught (in promise) Error: Unable to resolve local class names from embroider-test/components/pods-component/styles; does the styles file exist?
    at resolveSource (local-class.js:24)
    at localClass (local-class.js:13)
    at Function.create (index.js:558)
    at index.js:9266
    at Object.evaluate (runtime.js:227)
    at AppendOpcodes.evaluate (runtime.js:73)
    at LowLevelVM.evaluateSyscall (runtime.js:3295)
    at LowLevelVM.evaluateInner (runtime.js:3241)
    at LowLevelVM.evaluateOuter (runtime.js:3233)
    at VM.next (runtime.js:5299)

If I turn off staticComponents: true it works. It also works with components in the classic folder structure, even if staticComponents: true is on.

[dfreeman]

After spending some time spiking out different possible approaches for this, it seems as though it's likely possible to partially support staticComponents in ECM v1, but it would require a major overhaul to the way in which local classes are resolved, possibly reimplementing in a way similar to how component/template colocation was built. This would be a pretty large investment, though, and it would still leave the styles for all components in the base application stylesheet, regardless of whether those components got dropped or (with route splitting enabled) moved out into a separate chunk.

That may still be something we pursue in the future, but right now I suspect that effort would be better invested in working with @turbo87 and @ef4 on figuring out the necessary v2 addon APIs Embroider would need to expose to support ember-css-modules' needs, as the way ECM currently works with vanilla Ember CLI is via a series of bubblegum-and-paperclip hacks 😜

[scottmessinger]

@dfreeman I'd love to hear about some of the API's embroider would need to expose. Would embroider need to change significantly to make it work?

[scottmessinger]

@dfreeman I was looking at how next.js does module CSS and it looks like they don't use something like local-class and instead just use the JS export of the module css file:

After we have template imports, we can do something identical. Until then, we can do something similar I think:

import styles from "./styles.css"

export default class Component {
  styles = styles
}

  <div class={{this.styles.myClassName}}>This is a styled div</div>

I think the code above works already. If we referenced the styles that way instead of usingn local-class, would that allow this library to work with embroider?