Quoting problem with function return

[kavika13]

I saw this change when upgrading from a somewhat older version of node-sass to the most recent version from npm.

Zurb foundation (latest version) includes a function to create [data-<attribtue>] selectors. These were compiling fine in the old version of node-sass, but aren't anymore.

Here's a somewhat minimal repro:

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

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

Expected result (based on old version on my box/Zurb compiled css source from the distro):

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

Actual result:

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

These quoted selectors break in Chrome (and might not work anywhere).

Let me know if this is a bug. If it is by design then I'll tell Zurb to change their function to use unquote, or whatever other method you advise to fix this on their end. If it is an upstream bug, let me know that too and I'll go post in libsass or SassC :)

[xzyfer]

Thanks for the repotr @kavika13. I can confirm this is a regression in LibSass. I've created an issue with them, please subscribe to it there for updates.

sass/libsass#1624

[xzyfer]

This is fixed in the upcoming 3.5.0-beta. Subscribe to #1349 for further updates.