Add Route Controller Styles Example

[timkendall]

We should add an example of using styles in route controllers. The README is unclear on this. In reality one needs to import styles into the controller module just like with components.

[dfreeman]

You shouldn't ever need to explicitly import styles into a controller module – the only time that comes up is with components, and then only in addons because of the limitations with the resolver not being able to find those styles in the addon tree. There are acceptance tests for controller styles (both with and without an explicit controller module) that should be making sure this works.

[dfreeman]

...unless you're writing a routable engine, in which case I guess you actually could have a controller in an addon. If that's what you're up to, you're treading plenty of new (and not-necessarily-production-ready) territory, so weird failures in this and other addons are a lot less shocking.

That would also explain why it appeared as if the initializer hadn't run in #10 – engines have their own isolated container/registry combo from their corresponding EngineInstance, so from the engine's perspective, that initializer didn't run.

Still, I'd only expect to see that particular error message in the nested component if your forgot to import the styles for that component, same as with a non-nested one. Is it possible that's the case?

[timkendall]

That is indeed what I am doing :) In any case it looks like everything is working now (both nested components and routes). I probably did forget to import the style.

[dfreeman]

I'll add a note to the README to mention engine controllers as well. That scenario hadn't actually occurred to me yet, so I'm glad folks are out there exercising this thing and finding these unanticipated cases – keep 'em coming! :)

[duro]

@dfreeman I came to this ticket thinking it would answer my question about applying a css module to a route template, but it did not.

I am not using pod style, for now, so I have an index route in /app/routes/index.js and it's corisponding template in /app/templates/index.hbs.

I tried adding a css module to both /app/styles/templates/index.css and /app/styles/routes/index.css, but anytime I try to use {{styles.class-name}} in the template, I get an empty response and no classname.

What might I be doing wrong? Documentation around using a css module with a route is pretty slim.

[dfreeman]

@duro The styles lookup process follows the same rules as everything else that goes through the resolver, so just like looking up template:index finds the file at app/templates/index.hbs and route:index looks at app/routes/index.js, styles:index will come from app/styles/index.css.

I'm planning a big overhaul of the documentation soon that gives better coverage of where to put things in different scenarios, as well as a number of "cookbook" examples demonstrating how to accomplish things at the macro level. Feedback like this is super useful as I'm planning what goes into that — thank you!