Variable interpolation not working as expected

[Andy-Corrigan]

When interpolating SCSS variables, unexpected outcomes seem to be occurring. I'm relatively new to this particular part of SCSS, so it might just be me getting it wrong.

Steps to recreate

I've created a mixin:

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

Based upon this map:

$themes: ( 
    default:( 
        Franklin-Blue: #1d1c4d,
        Light-Blue: #4e5d94, 
        Pale-Blue: #7289da, 
        Pure-White: #ffffff, 
        VLight-Grey: #99aab5, 
        Middle-Grey: #2c2f33, 
        Dark-Grey: #23272a, 
        body-color: #ffffff, 
        text-color: #000000, 
        bold-text: #000000, 
        White-Blue: #ffffff 
    ), 
    dark: ( 
        Franklin-Blue: #000000,
        Light-Blue: #0d0d0d,
        Pale-Blue: #2c2f33, 
        Pure-White: #ffffff, 
        VLight-Grey: #99aab5,
        Middle-Grey: #2c2f33,
        Dark-Grey: #23272a, 
        body-color: #000000, 
        text-color: #ffffff, 
        bold-text: #7289da, 
        White-Blue: #7289da 
    ) 
);

Which results in this:

:root {
  --Franklin-Blue: #1d1c4d;
  --Light-Blue: #4e5d94;
  --Pale-Blue: #7289da;
  --Pure-White: #ffffff;
  --VLight-Grey: #99aab5;
  --Middle-Grey: #2c2f33;
  --Dark-Grey: #23272a;
  --body-color: #ffffff;
  --text-color: #000000;
  --bold-text: #000000;
  --White-Blue: #ffffff;
}

[data-theme=dark] {
  --Franklin-Blue: #000000;
  --Light-Blue: #0d0d0d;
  --Pale-Blue: #2c2f33;
  --Pure-White: #ffffff;
  --VLight-Grey: #99aab5;
  --Middle-Grey: #2c2f33;
  --Dark-Grey: #23272a;
  --body-color: #000000;
  --text-color: #ffffff;
  --bold-text: #7289da;
  --White-Blue: #7289da;
}

Now, in my attempts to get quotes around that theme (i.e. [data-theme="dark"]), I've had [data-theme=\"dark\"], [data-theme="'dark'"], [data-theme='"dark"'] and just about every other combination - but it just seems not to work.

Is it just me, or have I found an actual issue?

[Andy-Corrigan]

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 "]

[failwyn]

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

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

[Andy-Corrigan]

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

[failwyn]

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

sass/sass#2845

[Andy-Corrigan]

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.

[failwyn]

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.

[failwyn]

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