Sources in (edited) source map

[roblan]

Updating source map, when src and dest are the same file, shouldn't add a src/dest file into sources.

[nDmitry]

Haven't got your point. It adds only source file(s) to the sources array. Let's say we have a.scss, which compiles to a.css and a.css.map where sources property is ["a.scss"]. grunt-autoprefixer (Autoprefixer, in fact) leave that ["a.scss"] as is either src and dest are the same file or not (in this case paths may change).

[roblan]

I have this issue again. Sourcemap before grunt autoprefixer:

{
  "version": 3,
  "file": "base.css",
  "sources": [
    "source/css/base/01_libs/a_normalize.css",
    "source/css/base/01_libs/normalize.css",
    "source/css/base/01_libs/overides.css",
    "source/css/base/02_elements/box.css",
    "source/css/base/02_elements/buttons.css",
    "source/css/base/02_elements/cart_items.css",
    "source/css/base/02_elements/fonts.css",
    "source/css/base/02_elements/forms.css",
    "source/css/base/02_elements/lists.css",
    "source/css/base/02_elements/progress.css",
    "source/css/base/02_elements/tables.css",
    "source/css/base/02_elements/typography.css",
    "source/css/base/03_layout/footer.css",
    "source/css/base/03_layout/grid.css",
    "source/css/base/03_layout/header.css",
    "source/css/base/04_sites/step_1/cart_items.css",
    "source/css/base/04_sites/step_2/delivery.css",
    "source/css/base/04_sites/step_2/payment.css",
    "source/css/base/04_sites/step_2/summary.css",
    "source/css/base/04_sites/step_3/client_info.css",
    "source/css/base/04_sites/step_4/summary.css"
  ]
}

after grunt autoprefixer

{
"version":3,
"file":"base.css",
"sources":[
"../../source/css/base/01_libs/a_normalize.css",
"base.css",
"../../source/css/base/01_libs/normalize.css",
"../../source/css/base/01_libs/overides.css",
"../../source/css/base/02_elements/box.css",
"../../source/css/base/02_elements/buttons.css",
"../../source/css/base/02_elements/cart_items.css",
"../../source/css/base/02_elements/fonts.css",
"../../source/css/base/02_elements/forms.css",
"../../source/css/base/02_elements/lists.css",
"../../source/css/base/02_elements/progress.css",
"../../source/css/base/02_elements/tables.css",
"../../source/css/base/02_elements/typography.css",
"../../source/css/base/03_layout/footer.css",
"../../source/css/base/03_layout/grid.css",
"../../source/css/base/03_layout/header.css",
"../../source/css/base/04_sites/step_1/cart_items.css",
"../../source/css/base/04_sites/step_2/delivery.css",
"../../source/css/base/04_sites/step_2/payment.css",
"../../source/css/base/04_sites/step_2/summary.css",
"../../source/css/base/04_sites/step_3/client_info.css",
"../../source/css/base/04_sites/step_4/summary.css"]
}

base.css is file the map is created for, it shouldn't be in source list.

grunt autoprefixer setting:

styles: {
            options: {
                map: true
            },
            src: 'path/to/css/*.css')
        }

[nDmitry]

@ai any ideas?

[ai]

@roblan seems like issue in sources path normalizer. Can you create some small simple project with this issue (I am not Grunt user and need some help from you :) )?

[roblan]

@ai I'll try to post something tomorrow

[roblan]

sorry it took me so long. http://cl.ly/1C3m012P4439 - sample grunt project step one: install grunt-cli (if it's not already installed)

npm install -g grunt-cli

step two: go to project folder and install modules

npm install

step three: run grunt

grunt

[nDmitry]

@roblan I deleted grunt-contrib-sourcemap from the default command and replaced grunt-autoprefixer's config with this:

autoprefixer: {
    options: {
        browsers: ['> 1%', 'last 3 version', 'ie >= 8'],
    },
    styles: {
        options: {
            map: true
        },
        src: 'source/test.css', // here
        dest: 'build/test.css'
    }
}

Got this correct sourcemap:

{"version":3,"file":"test.css","sources":["../source/test.css"],"names":[],"mappings":"AAAA;CACC,gBAAe;EACf"}

So it's grunt-concat-sourcemap's bug. Guess you should save your CSS and sourcemaps from a preprocessor or whatever to a build directory and then prefix them. I didn't get why you've been using concat-sourcemap plugin though.

[roblan]

I use grunt-concat-sourcemap to concat multiple files (and generate sourcemap) ;) Not in this example though, because I've tried to create simpliest project affected with this problem.

I've made some tests and don't think that it's grunt-concat-sourcemap's bug.

A little more complex example Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        concat_sourcemap: {
            options: {
                sourceRoot: '../'
            },
            buildcss: {
                files: {
                    'build/test_ab.css': ['source/test_a.css', 'source/test_b.css'], // multiple files concatenated 
                    'build/test_cd.css': ['source/test_c.css', 'source/test_d.css']
                }
            }
        },
        autoprefixer: {
            options: {
                browsers: ['> 1%', 'last 3 version', 'ie >= 8'],
            },
            styles: {
                options: {
                    map: true
                },
                src: 'build/*.css' // dynamic multiple files in location!
            }
        }
    });

    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-concat-sourcemap');

    grunt.registerTask('concat', ['concat_sourcemap']);
    grunt.registerTask('prefix', ['autoprefixer']);
    grunt.registerTask('default', ['concat', 'prefix']);
};

_testa.css:

div {
    display: block;
}

_testb.css:

div {
    background: red;
}

After grunt concat _testab.css

div {
    display: block;
}
div {
    background: red;
}
/*# sourceMappingURL=test_ab.css.map */

_testab.css.map

{
  "version": 3,
  "file": "test_ab.css",
  "sources": [
    "source/test_a.css",
    "source/test_b.css"
  ],
  "names": [],
  "mappings": "AAAA;AACA;AACA,C;ACFA;AACA;AACA,C",
  "sourceRoot": "../"
}

After grunt concat prefix _testab.css

div {
    display: block;
}
div {
    background: red;
}
/*# sourceMappingURL=test_ab.css.map */

_testab.css.map

{"version":3,"file":"test_ab.css","sources":["../source/test_a.css","test_ab.css","../source/test_b.css"],"names":[],"mappings":"AAAA;CACA,gBAAA;ECCC;ACFD;CACA,iBAAA;EDIC"}

There shouldn't be "test_ab.css" in sources list. Mappings in this example also shouldn't change, as autoprefixer didn't change antything (nothing to prefix). That's why I think there is a bug in autoprefixer somwhere. Sourcemaps generated with autoprefixer are ok, but those edited with it are not.

[nDmitry]

@roblan try to update to grunt-autoprefixer@0.8.1, I reproduced this with v0.7, but not with v0.8. Looks like Autoprefixer has fixed something.

[roblan]

@nDmitry - I've just updated autoprefixer to 0.8.1 in sample project (linked in earlier post) and unfortunately bug is still present.