Data attribute based selectors are breaking

[kavika13]

I am trying to compile the scss files from the Zurb foundation (version 5.5.3) bower component, but getting some subtle problems.

It finishes compiling without errors, and the resulting css file generally looks to be complete, with all pieces imported properly. Most of the styles are applying correctly. However there are some selectors based off data- attributes that are getting incorrectly quoted.

The offending selector in the _forms.scss file looks like #{data('abide')}.
This turns into "[data-abide]" instead of [data-abide] (notice the extra quotes).

These quoted selectors don't work correctly in Chrome. I have verified that hacking the CSS in the browser to remove the quotes causes the selectors to start working.

I have verified that the version of node-sass is the same for the other build system I'm using that doesn't mess up quoting. Also, including the css version of the files from the same foundation build works correctly, and is not inappropriately quoted, and those css files get built from the same scss they distribute, so I don't think the scss itself is wrong.

[kavika13]

I can give additional debugging information on my system if you tell me what to look for. It is possible that I might have a many-months-old ruby/compass installed, if that makes any difference. I can check if you think this might be the cause.

[kavika13]

It's possible this bug is upstream... I checked and my node-sass that is having the problem might indeed be a newer version. I tried the command node-sass line tool, and I am seeing a delta between the versions.

[kavika13]

This also specifically has to do with results of functions:

@function data($attr) {
  @return '[data-' + $attr + ']';
}

form {
  #{data('abide')} {
    span.error, small.error { display: none; }
  }
}

Results in:

form "[data-abide]" span.error, form "[data-abide]" small.error {
  display: none; }

[kavika13]

Cross-posted the bug, since now I really think it is upstream:
sass/node-sass#1217

Feel free to close if you agree.

[es128]

Yup, the plugin doesn't have any influence on this problem.