Glob fails with livereload about postcss-import HOT 9 CLOSED

For my concern, I don't use glob/nor ember so I am probably not the best person to help. And I didn't write the glob feature, @kswedberg did.

from postcss-import.

@MoOx, thanks for calling this to my attention.
@jeffjewiss, I've never used ember-cli, but I can test it out with a regular postcss setup and livereload. It has been working fine piped through gulp and using gulp-watch. If you could give me more info about what you're using for the livereload setup, I'll try to match up as much of it as possible here and see if I can locate a problem.

from postcss-import.

@kswedberg sorry for the delay in replying.

I'm going to try and setup an isolated test case or new Ember project and share the repo in the hopes that it helps isolate or demonstrate the issue. I'll post here when I have something, cheers.

from postcss-import.

Great. Thanks, @jeffjewiss !

from postcss-import.

I created a test case with an Ember app generated using ember cli here: https://github.com/jeffjewiss/ember-cli-postcss-import-example

To install it and get it running you'll need to npm install bower install and then you should be able to start it with npm start.

There's a glob import in app/styles/app.css for the components folder. If you edit app/styles/components/test.css while the app is running (something trivial like changing the background color), the component styles are no longer imported. If you use the full path instead of a glob it works fine.

from postcss-import.

thanks for the example project, @jeffjewiss. I'll take a look as soon as I can.

from postcss-import.

@jeffjewiss I set up the project locally and got it running. I think the problem might have something to do with how ember (or broccoli?) caches the resulting files. Not sure. In any case, I was able to get things working fine by add from: 'app/styles/app.css' to app.postcssOptions.plugins[0].options in Brocfile.js. So the app variable declaration now looks like this:

var app = new EmberApp({
  postcssOptions: {
    plugins: [
      {
        module: postcssImport,
        options: {
          glob: true,
          from: 'app/styles/app.css'
        }
      }
    ]
  }
});

Let me know if that works for you, too.

from postcss-import.

@kswedberg thanks for looking in to this issue and finding a fix! I'm not familiar enough with how broccoli caches files to confirm if that's causing the issue, but I suspect it's related.

My solution was to update the broccoli plugin to extend the postcss options for each plugin so that they all have access to the "from" and "to" paths. I think that's likely better than having to repeat it for each plugin.

That seemed to fix the issue on my example app so I'm going to close this issue. I'll report back if it reappears on other apps.

Thanks!

from postcss-import.

Excellent. Glad it works, @jeffjewiss . And, yes, please let me know if the problem persists elsewhere.

from postcss-import.