parse error in font-face mixin with format syntax and multiple src

[michaelwarren1106]

for this SCSS

$base-font-family: 'ProximaNova' !default;
@mixin font-face($font-family, $file-name, $baseurl, $weight: 500, $style: normal ){
  @font-face {
    font: {
      family: $font-family;
      weight: $weight;
      style: $style;
    }
    src: url( $baseurl + $file-name + '.eot');
    src: url( $baseurl + $file-name + '.eot?#iefix') format('embedded-opentype');
    src: url( $baseurl + $file-name + '.woff') format('woff'),
           url( $baseurl + $file-name + '.woff2') format('woff2'),
           url( $baseurl + $file-name + '.ttf') format('truetype'),
           url( $baseurl + $file-name + '.svg' + '#' + $file-name) format('svg');
  }
}

I'm getting this error

  18:1  error  Please check validity of the block starting from line #18  Fatal

✖ 1 problem (1 error, 0 warnings)

I've narrowed it down to the format() part. If i remove that, everything works, but that is valid css/scss, and I've not seen any other folks having problems with font-face syntax in general.

Little help?

[bgriffith]

Hey @michaelwarren1106 - thanks for the report! You're right about the format, looks like an issue with the url() token and any functions that follows. I'll tag it and hopefully get to have look at it soon.

[michaelwarren1106]

thanks!

I ran this through the playground just ago, and it doesn't seem to parse there unless each src property is defined by itself. The playground only parses this:

$base-font-family: 'ProximaNova' !default;
@mixin font-face($font-family, $file-name, $baseurl, $weight: 500, $style: normal ){
  @font-face {
    font: {
      family: $font-family;
      weight: $weight;
      style: $style;
    }

    src: url( $baseurl + $file-name + '.woff');
    src: url( $baseurl + $file-name + '.woff2');

  }
}

[michaelwarren1106]

even when format is removed...

[heatwaveo8]

I was seeing issues with this as well as I started testing the sass-lint package for the first time today... nearly the exact code example, actually. See the referenced issue from sass-lint which uses this package. In order to use sass-lint with a GruntJS setup, I'll need both of the following items fixed that @michaelwarren1106 has addressed, so our builds can pass prior to check-in:

1. Add support for format()
2. Add support for comma separation of url() calls.

[bgriffith]

This is fixed.