Eiche fam

Some time ago, I moved away from manually building vendor-prefixed CSS properties toward letting Autoprefixer handle it. Since I use Sass, I suppose I could use Compass’s built-in mixins to handle the vendor-specific CSS, but that seemed like a bit much, especially since including Autoprefixer was so easy to do via its Grunt plugin.

In my Gruntfile, I have Sass’s sourcemaps turned on for dev builds. (This isn’t the whole configuration; you can see it here if you like, but for the purpose of this post, I’m just including the relevant bits.)

sass: {
  dev: {
    options: {
      sourcemap: 'auto'
    }
  }
}

However, despite the proper configuration setting, I wasn’t seeing the line at the bottom of the generated CSS file that specified the location of the sourcemap.

I felt like such a dork when I figured it out. It was because the stylesheet was being overridden by Autoprefixer. It knew nothing about sourcemaps, only to take the CSS file it was given and pad it out with vendor-specific styles.

autoprefixer: {
  build: {
    files: {
      'style.css': 'style.css'
    }
  }
}

Fortunately, the Autoprefixer plugin for Grunt does support options.map, which can tell the plugin to look for a previously generated map, and update its newly generated stylesheet appropriately.

An update to the autoprefixer task enabled the map perfectly.

autoprefixer: {
  dev: {
    options: {
      map: true
    },
    files: {
      'style.css': 'style.css'
    }
  }
}