You're putting me off my Bourbon :(

[ZebraFlesh]

I'm using Bourbon's linear-gradient mixin and ember-cli-sass is generating incorrect css. I provide the following input:

%some-color { 
  @include linear-gradient(to bottom, #151A20 0%, #0B0E11 100%);
}

.my-class {
  @extend %some-color
}

and I receive the following output from ember-cli-sass:

.my-class {
  background-image: linear-gradient(to bottom,#151A20 0%, #0B0E11 100%, , , , , , , , ); }

whereas compiling with sass 3.4.13 running on ruby gives the correct css:

.my-class {
  background-image: linear-gradient(to bottom,#151A20 0%, #0B0E11 100%); }

[chrism]

Having the same issue with both font-face & radial-gradient too.

:(

[simonexmachina]

This is an issue with node-sass. ember-cli-sass is a thin wrapper around this library. You should open a ticket over there.

This issue may be a result of the fact that ember-cli-sass is currently using a beta version of node-sass. You may find that downgrading to v3.0.x fixes the problem.

[simonexmachina]

See #44 for details on this issue.

[chrism]

Hey - thanks for getting back on this.

After looking into this issue a bit further it seems like the rabbit hole goes deeper than even node-sass; see this issue from libsass sass/libsass#676

To anyone wanting to use bourbon with Ember I've found that it compiles correctly using

in bower.json

"devDependencies": {
  "bourbon": "3.2.1",
  "neat": "1.5.1"
}

& in package.json

"broccoli-sass": "^0.3.3"

not ideal, but at least it works for now.

[simonexmachina]

ember-cli@4.0.0-beta.4 might fix this, can you confirm

[chrism]

ember-cli@4.0.0-beta.4 fixed the @font-face issue that I was having — but
@include linear-gradient & @include radial-gradient were both still not rendering correctly for me across browsers.

Having said that it looks like both of these are soon going to be deprecated by bourbon soon as browser support is pretty much there now.

I've replaced all the instances of linear & radial gradients using @includes with a simple mixin ( just a fallback color).

This wasn't much work & now means that the latest versions of node/io, node-sass, bourbon & neat all seem to work together — for me thats good enough, as the approach I posted above meant sticking on node 10.36...

Thanks for all your help @aexmachina !

[simonexmachina]

node-sass is now a peerDependency, so you specify which version of node-sass@3.x to use in your package.json file. You may find that using node-sass@3.0.0-beta.4 fixes your problem until they fix the issue.

[chrism]

Hmm

The application I installed ember-cli-sass to yesterday (which is working) looks like this:

⇒  npm list node-sass
my-app@0.0.0 /Users/username/git/my-app
└─┬ ember-cli-sass@4.0.0-beta.4
  └─┬ broccoli-sass-source-maps@1.0.0-beta.4
    └── node-sass@3.0.0-beta.4 

Whereas trying to follow the peerDependency route in another app I took this approach

ember new test-sass
cd test-sass
npm install node-sass@3.0.0-beta.4 --save-dev
npm install ember-cli-sass --save-dev

gives an error (I think others are having too)
#46

npm ERR! notarget No compatible version found: node-sass@'>=3.0.0 <4.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.9.4-rc1","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.3.0","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.5.0","0.5.1","0.5.2","0.5.3","0.5.4","0.6.0","0.6.1","0.6.2","0.6.3","0.6.4","0.6.5","0.6.6","0.6.7","0.7.0-alpha","0.7.0","0.8.0","0.8.1","0.8.2","0.8.3","0.8.4","0.8.5","0.8.6","0.9.0","0.9.1","0.9.2","0.9.3","0.9.4-rc1","0.9.4","0.9.5-rc1","0.9.5","0.9.6","1.0.0","1.0.1","1.0.2-alpha","1.0.2","1.0.3","1.1.0","1.1.1","1.1.2","1.1.3","1.1.4","1.2.0","1.2.1","1.2.2","1.2.3","2.0.0-beta","2.0.0","2.0.1","3.0.0-alpha.0","3.0.0-beta.2","3.0.0-beta.3","3.0.0-beta.4","2.1.0","2.1.1","3.0.0-beta.5"]

which is strange because

⇒  npm list node-sass
test-sass@0.0.0 /Users/username/git/test-sass
└── node-sass@3.0.0-beta.4 

seems to show it there...

I checked my other (working) app and it shows this

⇒  npm list node-sass
my-app@0.0.0 /Users/username/git/my-app
└─┬ ember-cli-sass@4.0.0-beta.4
  └─┬ broccoli-sass-source-maps@1.0.0-beta.4
    └── node-sass@3.0.0-beta.4 

any suggestions what is going wrong this time around?

thanks again...

[davewasmer]

@chrism npm/semver treats a x.x.x-beta tag as prior to the x.x.x release itself. So because broccoli-sass-source-maps (the project that this addon relies on) requires >= 3.0.0, the node-sass@3.0.0.-beta.x doesn't satisfy that condition.

[chrism]

@davewasmer thanks for the explanation :)