[scss] Interpolations

[tonyganch]

Interpolations should be parsed correctly almost everywhere when ident is ok.

csscomb/csscomb.js#271

[mel0mani4]

Hello, do you know when this issue will be fixed ? Because it prevents me from using SC5 Styleguide Generator on my platform :'(
Thank you very very much in advance...

[tonyganch]

@mel0mani4, can you give me a sample code that fails for you, please? It'll help me write a test and fix this issue faster.

[mel0mani4]

I had this problem by adding KNACSS and Bourbon code in my project.

Every interpolated variables inside braces (not as selectors) gave me errors, whether it is the "TypeError:
Cannot call method 'toCSS' of undefined" (with KNACSS' interpolations inside braces, in
its _03-grids.scss file) or simply "Parsing error: Please check the validity of the block starting from line #68" (with all the Bourbon interpolations inside braces).

Just try to install Bourbon in your project, and you'll see :)

@mel0mani4 https://github.com/mel0mani4, can you give me a sample code
that fails for you, please? It'll help me write a test and fix this issue
faster.

—
Reply to this email directly or view it on GitHub
#68 (comment)
.

[igoratron]

It seems to me gonzales is struggling to understand interpolated property names. See the following SCSS example:

.test { 
  $property: color; 
  #{$property}: black; 
}

Running this through gonzales throws Error: Please check the validity of the CSS block starting from the line #1. Any thoughts on this?

[danoc]

Also running into the issue that @igoratron described. Has anyone looked into it? I'm exploring a fix.

[danoc]

Pretty sure I found the fix. Will write some tests and submit a PR in the next few days.

[karlhorky]

I would like this to be fixed as well. @danoc did you get any further with the fix?

[danoc]

@karlhorky – Just created a PR with the fix. #80

[karlhorky]

Awesome, thanks!

[tonyganch]

Fixed in dev 🍒

[karlhorky]

Thanks @tonyganch !

[igoratron]

Excellent news, @tonyganch! Any idea when this will be released?

[danoc]

Thanks for all the hard work, @tonyganch!

Have you written/spoken about this project? I'd love to learn more about it.

[cgtm]

@tonyganch I'm running the dev branch (currently 3.0.0-31) and I'm seeing the same problem as @igoratron did above. Specifically, the following code produces an error with the same message as Igor's.

a {
  $attribute: background-color;
  $color: #aaa;
  #{$attribute}: $color;
}

You message above implies this should be fixed now. Is there a more recent version than the one I'm using? Many thanks for any help.

Further: more digging shows my gonzales-pe/lib/scss/parse.js doesn't have, for example, checkIdentOrInterpolation() whereas gonzales-pe/blob/dev/src/scss/parse.js defines it.

[ivnmaksimovic]

Same here with 3.0.0-31.
Parsing error: Please check validity of the block starting from line #7

left: calc(50% - #{$logo-width / 2});

Syntax: scss
Gonzales PE version: 3.0.0-31

[DanPurdy]

@ivnmaksimovic this is fixed in the latest versions of gonzales-pe

.test {
  left: calc(50% - #{$logo-width / 2});
}

 -> stylesheet
 | -> ruleset
 | | -> selector
 | | | -> class
 | | | | -> ident
 | | | |    "test"
 | | -> space
 | |    " "
 | | -> block
 | | | -> space
 | | |    "\n"
 | | | -> declaration
 | | | | -> property
 | | | | | -> ident
 | | | | |    "left"
 | | | | -> propertyDelimiter
 | | | |    ":"
 | | | | -> space
 | | | |    " "
 | | | | -> value
 | | | | | -> function
 | | | | | | -> ident
 | | | | | |    "calc"
 | | | | | | -> arguments
 | | | | | | | -> percentage
 | | | | | | | | -> number
 | | | | | | | |    "50"
 | | | | | | | -> space
 | | | | | | |    " "
 | | | | | | | -> operator
 | | | | | | |    "-"
 | | | | | | | -> space
 | | | | | | |    " "
 | | | | | | | -> interpolation
 | | | | | | | | -> variable
 | | | | | | | | | -> ident
 | | | | | | | | |    "logo-width"
 | | | | | | | | -> space
 | | | | | | | |    " "
 | | | | | | | | -> operator
 | | | | | | | |    "/"
 | | | | | | | | -> space
 | | | | | | | |    " "
 | | | | | | | | -> number
 | | | | | | | |    "2"
 | | | -> declarationDelimiter
 | | |    ";"
 | | | -> space
 | | |    "\n"

[ivnmaksimovic]

@DanPurdy ok. Thanks. I am using SC5 styleguide, but haven't updated it...