webark/ember-component-css

Issue with in-repo-engines (i.e. addons) using pods structure and podModulePrefix

Opened this issue · 7 comments

AndreJoaquim commented

After a long talk/debugging session with @webark, we found out that there's an issue using this addon in in-repo-engines that have the pods structure.

The issue is that the file containing the styles and the auto-generated classes exists but the auto-generated class names are not injected in the HTML DOM elements.

Below, I leave my in-repo-engine structure and the config/environment.js file (including the podModulePrefix)

in-repo-engine (neighborhood-page) structure
screen shot 2018-09-05 at 18 33 38

// lib/neighborhood-page/config/environment.js
/* eslint-env node */
'use strict';

module.exports = function(environment) {
  let ENV = {
    podModulePrefix: 'neighborhood-page/pods',
    modulePrefix: 'neighborhood-page',
    environment
  };

  return ENV;
};

@webark was really helpful and I'll post some of the results of our debugging:

Q1: See if the components you are expecting are in this.. window.requirejs.entries['ember-component-css/pod-names'].module.exports.default
A1:
screen shot 2018-09-05 at 17 57 30

Q2: Run find . -name "pod-names.js" -path "*/addon/*" in your root, and see how many files get outputted
A2: the console outputs the following: ./node_modules/ember-component-css/addon/pod-names.js

Q3: What's the path of that component in the addon directory? What's the path in the app directory? How are you calling it from the template? In the addon componet.js file you are manually setting the layout right?
Q3: /addon/np-description/component.js; /lib/neighborhood-page/addon/np-description/component.js; lib/neighborhood-page/addon/pods/index/template.hbs -> {{np-description neighborhoodPage=model.neighborhoodPage}}; Yes.

Q4: By taking off the podModulePrefix and putting all the pods under /addon (i.e. moving all the folders from /addon/pods to /addon) does it work?
Q4: Yes, it works

Last considerations: @webark, thanks so much for your help, you're super awesome!
Just wanted to say that this addon is freaking awesome and I use it in all of our platforms 🙂
It’s so awesome that it was the first thing I added to my first in-repo-engine 😄

dguettler commented

I seem to have similar issue, but with components belonging to the main application.
Styles are in the final app.css file, but the corresponding name is missing from the rendered component class.

webark commented

@dguettler hmm.. are these route styles? or component styles..

peiris commented

@AndreJoaquim Were you able to fix this issue? I'm having a similar issue.

webark commented

Are you reexporting in the “app” space in a pod or classic structure?

webark commented

and i’d leave off the prefix in the structure inside of the “addon” space.

webark commented

but i thought i had fixed this. :(