Ember-power-select: ember install does not install ember-power-select.scss

[plaughton]

Just tried to install the component after the inspiring presentation at Ember Camp. The install attempted to overwrite my existing app.scss (with the content @import "ember-power-select";), but did not install ember-power-select.scss (despite this file clearly being available in the repository).

This is also perhaps not in line with the instructions, which indicate that we should manually add @import "ember-power-select" into our app.scss file.

Possibly another aspect of issue 58?

The component looks amazing - hope the feedback is useful (and apologies if its me just being useless!)

[cibernox]

Yeah, at the moment the component's blueprint is rather naive because it tries to replace your app.scss with this line, and most likely this is only useful if this addon happens to be que very first addon you install, which is unlikely.

Issue #58 is about this, I just don't haven't had time yet.

Just to clarify, if you add @import "ember-power-select"; to your app.scss manually it works, correct?

[miguelcobain]

@plaughton The docs clearly state:

@import "ember-power-select";
This addon will try to generate an app.scss file which contains the former statement.

Also, if you've used ember init when an ember-cli upgrade is necessary, you'd be used to pressing [d] to get a diff on the files and make up the changes. :)

We could improve this blueprint, but it won't be as easy as we now do.
Meanwhile, I think the native ember-cli behavior is the best choice. It's a native thing, and it's documented.

[cbornhoft]

This is currently an issue for me.

Using ember install ember-power-select installs the addon fine, but when I add the @import line to the main <appname>.scss it can't find the reference. Sass automatically looks in the Ruby gems directory, and expectedly finds nothing.

I should note that I'm using ember-cli-compass-compiler.

[cibernox]

@cbornhoft Yes, I see that being the problem. This component detects if the user has ember-cli-sass installed (you don't have it) to import the precompiled css styles or let the user import the scss files manually.

Probably that means that using a different compiler will load the css styles in vendor, but I still think that the sass styles should be importable, because they are just files in the app/styles folder.

Sounds like a but in ember-cli-compass-compiler more than a bug in this addon. Can you check if your vendor.css file contains any the styles of this addon?

[cbornhoft]

@cibernox That makes sense. vendor.css within /dist/assets is filled with all of the power-select styles after I removed the @import to allow compilation.

Anything that can be done to properly add these to sass/compass? Right now the only workaround I've discovered is manually adding the contents of the app/styles directory from this repo, plus ember-basic-dropdown.scss to the project. This clearly isn't a good solution though! Any update to the addon styling would break it without me manually updating each time.

[cibernox]

I'd say that your problem lies in ember-cli-compass-compiler, that looks a bit unmaintained. Any sass compiler should be able to import those files. Is upgrading to ember-cli-sass an option?

If you're ok with not using variables to customize the styles you can just don't do anything and the recompiled styles will be loaded. You still can customize the styles normally by overriding those you don't like.

[cbornhoft]

How easy is it to compile compass with ember-cli-sass? I don't see much mention of it in the docs. I don't think it'd be too hard at all if that's included in some way.

Thanks for your help, much appreciated.

[cbornhoft]

It would appear ember-cli-sass does not support compilation of compass projects, since it relies on node-sass instead of Ruby.

Is there any way to tell ember-power-select to ignore the lack of ember-cli-sass and use the scss files specified instead? On every compile it overwrites vendor.css with it's own styles. it's unfortunate that there's such a lack of compass support within ember and ember-cli.

[cibernox]

Let's clarify how this addon works and why I believe that there is little I can do on my end.

What this addon is doing when ember-cli-sass is present is NOT merge the precompiled styles into vendor.css: https://github.com/cibernox/ember-power-select/blob/master/index.js#L9-L21

In your case, since ember-cli-sass is not present, it is adding the styles to the vendor file.

But this addon still contains the scss files in the expected folder: https://github.com/cibernox/ember-power-select/tree/master/app/styles , so if you want you should still be able to do @import 'ember-power-select' normally. The only problem is that styles would be duplicated (once in the vendor.css and again in the app.css).

This duplication is bad and an option to opt out to mix the precompiled styles into vendor.css can be added with little effort, but this still doesn't fix the fact that ember-cli-compass-compiler seems to be broken because it is not allowing you to import things normally.

BTW, the last thing I heard is that libsass has reached 100% feature parity with ruby sass, so compass should be able to run on it. Although I heard that very recently and perhaps is still on master.

[cbornhoft]

I absolutely agree that it should be able to import from node_modules. It looks like the workaround is to use Compass' own function add_import_path which then is able to find the needed styles.

To add further to your libsass mention, it looks like Compass will never be able to work with node-sass and the goal is to have most of the features added into node-sass itself. See libsass comments on issue #82 for more details on its planned future.

Thanks again for your comments. This addon and the support that comes with it is absolutely fantastic! I'll rework the project to use ember-cli-sass instead.

[cravindra]

Hi.

I had a similar problem where even after manually adding @import 'ember-power-select'; to my app.scss file the build was failing as it couldn't reference the files.

I tried setting the path in my sassOptions (using ember-cli-sass) as below and it worked for me:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function (defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: ['node_modules/ember-power-select/app/styles']
    }
  });

 ...
  return app.toTree();
};

[ivorscott]

Don't forget to restart you ember apps when you install an addon. :)