Addon modules imported after addon variables

[knownasilya]

So I have a addon (@org prfixed) that has variables and components. Currently I expose the addon's styles by putting them in the app/styles/somename folder. I'm not in love with this, so would be alright to change. This style
https://github.com/aexmachina/ember-cli-sass/blob/master/README.md#alternative-addon-usage
I've tried a few variations of

  cssModules: {
      intermediateOutputPath: '_modules.scss'
    }

in my index.js and can't figure out where the module is placed. I tried to import the modules in my app via @import '@org/addon/modules' but no luck. I also tried the same in the addon's app folder as well as just importing modules @import 'modules'.

What I ultimately want is to import the addon styles either explicitly or not and have the sass variables before the modules.

[dfreeman]

To make sure I'm understanding right, your goal is to have ECM emit a single .scss file for the addon that the host app can then define variables for and @import in order to further process down to CSS?

I think, because of how the overall build pipeline works, that this may not be possible. The reason ember-cli-sass has you put your files in app if you want to use this pattern is because the app's Sass files can't "see" anything coming from an addon, so it has to rely on ember-cli's merging of all the app directories to make things work.

However, anything you put in your addon's app directory isn't processed by its addons; only by the host's. Currently ECM doesn't process files in addons' app trees ever, because of the likelihood that would have of e.g. breaking styles included by addons as described in the section of the ember-cli-sass README you linked. It's also worth noting that if we as a community do ever make it to a world like the one MU described where there is no merged app tree (which starts to become more appealing as things like template imports make that unnecessary for addons to expose things to their hosts at runtime), then that pattern falls apart.

How complex are the variables you're wanting to have the host app set? Are they typically derived from other Sass variables it already has set up, or is it more one-time configuration? The ECM-native solution to this kind of thing is virtual modules, but that moves the configuration out of your stylesheet entirely and into build options, which may or may not suit your needs.

[knownasilya]

Sorry I wasn't super clear, my layout looks something like:

@org/addon
  - app/
    - styles/
      - addonname/
        - components.scss
        - variables.scss

where components.scss imports component styles (pre css-modules) and the variables.scss file. The consuming app does @import 'addonname/components'.

So now with css-modules I want to have the new modules file imported inside of components.scss after the import of variables.scss. Hope that clarifies a bit 🤦‍♂

[dfreeman]

I see, so it's not the host app that's defining the variables? In that case I think your problem is still roughly what I described, but it's solvable because you can move things into the addon tree 😄

Usually for this kind of thing we recommend using an extension to distinguish between files you want treated as module and the ones you want to be plain Sass. Then you could configure ECM in your index.js something like:

module.exports = {
  // ...
  options: {
    cssModules: {
      extension: 'm.scss',
      intermediateOutputPath: '_modules.scss',
      postcssOptions: {
        syntax: require('postcss-scss'),
      },
    },
  },
};

Then your layout would look something like this:

@org/addon
  - addon/
    - styles/
      - addon.scss
      - _variables.scss
    - ... whatever other .m.scss files you want treated as modules and concatenated into _modules.scss

Then in your addon.scss:

@import 'variables';
@import 'modules';
// any other imports of non-module Sass

With this setup, the host app would no longer be importing any Sass, and your addon's styles would wind up in vendor.css. Your addon would also need to include a dependency on ember-cli-sass if it doesn't already. Does that sound like what you're after?

[knownasilya]

Hum, I think everything sounds good except for:

With this setup, the host app would no longer be importing any Sass, and your addon's styles would wind up in vendor.css.

Mainly because variables.scss is used in the host app, where I'm also planning on setting up css-modules (it's currently e-component-css).

[knownasilya]

Although variables get compiled out I think, so maybe it's worth having it imported in the host app as well.

[knownasilya]

I think this comment #97 (comment) describes my exact predicament.

If I could do @import '@org/addon/variables'; where addon/styles/variables.scss is the location, that would work, but that doesn't seem importable.

[dfreeman]

You might be able to do @import 'node_modules/@org/addon/addon/styles/variables'; 🤔