Recompile while imported style file has changed?

[jeffjewiss]

Recompile while imported style file has changed?

[jeffjewiss]

Hi @nightire, thanks for reporting this.

I've come across similar issues in the past, and unless something has changed, I think it's due to how the file watcher is setup for Ember apps.

Where are the source files for your themes tree? Are they in app/styles or located elsewhere?

Cheers

[nightire]

@jeffjewiss, unfortunately, no, they aren't in app/styles, I put them in themes folder at the same level of app directory. The reason of this is I need to separate theme styles from the application styles.

I'm also guessing the same reason as your suggests, so is it possible to set up the file watcher for directories out of app?

[jeffjewiss]

@nightire yeah, that makes sense. Unfortunately, it's my understanding that by default changes to style files outside of app/styles aren't picked up by the watcher, triggering the appropriate (re)build.

I think one possible way around this would be to setup your themes as an in-repo add-on and either having the add-on run postcss or importing the styles from there. I believe you can get live-reloading working as intended with that setup since the styles will get added to the appropriate broccoli tree.

[nightire]

@jeffjewiss I might misunderstand your suggestion but doesn't an (in-repo maybe) addon merges itself into app trees?

The reason why I set up an individual folder for themes, is that I need them as separated stylesheet files. If they are merged into app trees, I don't know how to output them independently.

[jeffjewiss]

@nightire yeah, I believe you're right about it merging into the app trees.

Sorry, I don't think I initially understood your use case.

How are you handling CSS and importing files in the Ember app itself?

Could you potentially move the theme styles to app/styles/themes and use ember-cli-postcss and specify multiple output paths?

eg:

const app = new EmberApp(defaults, {
  outputPaths: {
    app: {
      html: 'index.html',
      css: {
        'app': '/assets/app.css',
        'themes/theme-1': '/assets/theme-1.css'
      }
    }
  }
}

[nightire]

@jeffjewiss Sorry, I should provide more context. I use ember-css-modules (with a custom preset of postcss plugins) to process styles in /app and it works pretty well.

After a period, we have a new requirement to provide some pre-built themes. They are entirely different from app styles; we have to output them separately so that we can load them by a user-specified setting, meanwhile, even though they don't need css modules support, but they need same plugins and options (like css variables, etc.) we used for app styles.

Those constraints lead us to current solution: put themes in themes instead of app/themes (because ember-css-modules will process all .css file in app directory). Set up an individual broccoli tree for them, and we share the same postcss plugins and options for this tree and ember-css-modules.

Everything works except when we try to import partial style files in themes folder, I think watcher is the key reason of this issue, but I don't know how to let ember-cli watches themes directory so it can rebuild the entire tree no matter which file in it has been changed.