Variable interpolation not working as expected about webcompiler HOT 7 CLOSED

Update:

This block is the closest I've gotten:

@function Quotify($variable) {
    @return #{"\""#{$variable}"\""};
}

@mixin theme() {
    @each $theme, $map in $themes {
        @if $theme == "default" {
            :root {
                @each $key, $value in $map {
                    #{--#{$key}}: $value;
                }
            }
        }
        @else {
            $Quoted: Quotify($theme);

            [data-theme=#{$Quoted}] {
                @each $key, $value in $map {
                    #{--#{$key}}: $value;
                }
            }
        }
    }
}

@include theme();

Which gets: [data-theme=" dark "]

from webcompiler.

Can you give this a try and let me know if it works as expected?

https://sass-lang.com/documentation/values/strings

from webcompiler.

That was the first place I'd looked - using the quote function instead of that custom one resulted in data-theme=""dark""

Initially, I'd thought it was just my mistake, so I had made this question on SO

from webcompiler.

Are the quotes here required? This could be related to this issue.

sass/sass#2845

from webcompiler.

Ahh, looking into it based on that feedback; it looks like it's optional (so long as the value is alphanumeric). So, it's probably worth looking into, just incase someone needs it for a href tag at some point.

from webcompiler.

The string.quote($variable) syntax appears to work as expected outside of the attribute selector, if you have an example where the quotes are required, but you can't get them to stay, I'd be happy to file a bug with Dart Sass and upgrade the extension when they address it.

from webcompiler.

I'm gonna close this issue since I haven't found any places where it removed the quotes when they are required.

from webcompiler.