Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embroider with staticComponents: true not working with pods components #160

Open
danwenzel opened this issue Nov 4, 2019 · 3 comments
Open

Comments

@danwenzel
Copy link

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
Copy link
Member

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
Copy link

@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
Copy link

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

Screen Shot 2020-10-06 at 15 23 44@2x

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants