Search code examples
node.jssassgruntjsbowerbourbon

Grunt/bower Bourbon Upgrade breaks font-face mixin

I just upgraded my grunt/angular project

"bourbon": "3.2.0",
"neat": "1.5.0",

to 

"bourbon": "~4.2.3",
"neat": "~1.7.2",

(from my bower.json)

Over the course of this upgrade the bourbon file structure changed from:

bower_components/bourbon/dist/bourbon'

to:

bower_components/bourbon/app/assets/stylesheets/bourbon'

This I have a handle on, or at least I think I do.

Now, whenever I try to build with grunt, I get the following sass issue:

Running "sass:dist" (sass) task
Warning: [my_app_path]/bower_components/bourbon/app/assets/stylesheets/helpers/font-source-declaration:22: error: error reading values after eot

The issue comes up in the first entry in the formats-map here:

@function font-source-declaration(
  $font-family,
  $file-path,
  $asset-pipeline,
  $file-formats,
  $font-url) {

  $src: ();

  $formats-map: (
    eot:  "#{$file-path}.eot?#iefix" format("embedded-opentype"),
    woff2: "#{$file-path}.woff2" format("woff2"),
    woff:  "#{$file-path}.woff" format("woff"),
    ttf:  "#{$file-path}.ttf" format("truetype"),
    svg:  "#{$file-path}.svg##{$font-family}" format("svg")
  );

First off, how do I verify what $file-path bourbon is trying to reference? I've spidered through other .scss files, and don't see a hard definition or even a path being programmatically determined (I think this might just be because I don't know where to look.

Am I missing another dependent library?

On the ruby side I have sass (3.4.16) scss_lint (0.40.1)

scss_lint was upgraded from scss-lint 0.26.2 (the package name changed from hypen to underscore over that time)

Solution

  • So, the problem was with the application using a very old version of grunt-sass.

    I upgraded that from 0.14.0 to ^1.0.0, and everything works smoothly.