Gonzales PE 4.2.3 Fails Parsing SCSS Custom CSS Variable With #{} Interpolation

[dosentmatter]

I am using Sass Extract which uses Gonzales PE ^4.2.2. I am on Gonzales PE 4.2.3.

I'm trying to parse the Bootstrap scss to grab variables using Sass Extract. However it fails on one file, _root.scss.

Here is the command I'm running in the Node repl

> sassExtract.renderSync({file: './node_modules/bootstrap/scss/bootstrap.scss'})
Thrown: Parsing error: Please check validity of the block starting from line #4

2 |   // Custom variable values only support SassScript inside `#{}`.
3 |   @each $color, $value in $colors {
4*|     --#{$color}: #{$value};
5 |   }

Syntax: scss
Gonzales PE version: 4.2.3

It fails on line 4:

    --#{$color}: #{$value};

_root.scss is the only file it fails on. If I remove the import on this line, it works.

If I move the string inside the interpolation, it also works:

    #{--$color}: #{$value};

I know custom css properties are supported. But I don't know about custom css properties with interpolation. A workaround for now is to just skip this file since I'm only trying to grab the variables.

[rpearce]

Glad I found this issue, as I'm having the same problem with colors, as well:

@mixin iconColor($color, $colors...) {
  --icon-color: #{$color};
  @if length($colors) > 0 {
    @for $i from 1 through length($colors) {
      --icon-color-#{$i}: #{nth($colors, $i)};
    }
  }
}

It comes through sass-lint as an error to like so:

error  Please check validity of the block starting from line #79  Fatal

[seventhqueen]

Hi, have you found any workaround for that?

[rpearce]

@seventhqueen Nope

[dosentmatter]

@seventhqueen, well if you are writing the Sass yourself, just move the hyphens inside the interpolation:

    --#{$color}: #{$value};

to

    #{--$color}: #{$value};

My problem is that I'm trying to run gonzales-pe on Sass out of my control.

[seventhqueen]

Thanks, will run some test. I have the freedom to change them — Gabriel SeventhQueen Team http://seventhqueen.com Support site http://seventhqueen.com/support On 29 June 2018 at 07:59:56, Kevin Lau (notifications@github.com) wrote: @seventhqueen <https://github.com/seventhqueen>, well if you are writing the Sass yourself, just move the hyphens inside the interpolation:

…

--#{$color}: #{$value}; to #{--$color}: #{$value}; My problem is that I'm trying to run gonzales-pe on Sass out of my control. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#290 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADkryzYGxbrvvptMOmRcvA2bhQBG2tOOks5uBbRMgaJpZM4T4phl> .

[titos2k]

also it fails when variable has $--name format. For example Element vue UI library is using that format in their scss

[tonyganch]

Related issue: #197

[jdalton]

Good news!

I've got this patched and working locally with an added unit test 🎉

I'd like to familiarize myself a bit more with the code base before pushing it forward.
Expect it to land within the week though.

Update:

I've opened a WIP PR at #295.

Update:

Closed by #295 🎉

[webartov]

also it fails when variable has $--name format. For example Element vue UI library is using that format in their scss

The exact issue was not fixed.
Please see the comment with examples sasstools/sass-lint#1248 (comment)