Wrong paths in source map

[numediaweb]

My project structure is like this:

.assets
.build
    ￨ ── bower_components
              └ ── font-awesome
                       └ ── css
                               └ ── font-awesome.css
    ￨ ── node_modules
    ￨ ── bower.json
    ￨ ── Gruntfile.js
    └ ── package.json
web
    └ ── assets
         └ ── css
              ￨ ── vendor.min.css
              └ ── vendor.min.css.map

In the Gruntfile.js I have

cssmin: {
    options: {
        sourceMap: true
    },
    standard: {
        files: {
            '../web/assets/css/vendor.min.css': [
                'bower_components/font-awesome/css/font-awesome.css',
            ]
        }
    }
},

In the HTML, I call the stylesheet with

<link href="assets/css/vendor.min.css" rel="stylesheet" type="text/css" />

BUT in the output however, I get the path to font-awesome in the sourcemap being;

http://***/web/assets/bower_components/font-awesome/css/font-awesome.css

instead of

http://***/.build/bower_components/font-awesome/css/font-awesome.css

[einfallstoll]

Did you try to set the root-option?

[thomashigginbotham]

The root option doesn't appear to affect the path to the source files. The paths seem to be relative to Gruntfile.js no matter the options you set.

Other developers with this problem appear to be using text replacement tasks to replace the paths when cssmin is done. It's a bad solution, but I don't know of a better one.

[einfallstoll]

Hmmm… not sure about that. But this is the configuration I used:

cssmin:
    expand: true
    cwd: 'dist/css'
    src: 'main.css'
    dest: 'dist/css'
    ext: '.min.css'
    options:
        root: 'dist/css/'
        sourceMap: true

Prior to this task I compiled some LESS files to dist/css/main.css. This file will minify to dist/css/main.min.css (sourceMappingURL=main.min.css.map) and create a sourcemap at dist/css/main.min.css.map.

[thomashigginbotham]

The map file is saved to the correct directory, but the problem is that the paths to the original source files (LESS, Sass, etc.) within the map file are incorrect.

For example, let's say I have an app/css directory and my Gruntfile.js is outside of app. When I build my files for production, the CSS files will reside at dist/css. The cssmin task will minify the files and generate the source maps as expected in the dist/css directory; however when I use the browser dev tools to view the original LESS/Sass files, they aren't there, because the map file still references them at the path app/css instead of dist/css.

I believe that is the issue the OP is describing as well. There needs to be a way to specify a root path for the referenced source files within the source map file. Currently, this can only be done with a find/replace on the source map files after the cssmin task runs.

[einfallstoll]

Ok, I think I didn't understand you (until now; thanks for clarification btw), but I think I tried to do the very same and succeeded. What's your config for cssmin? I want to compare mine to yours, because the references are all correct in my map file.

[thomashigginbotham]

Here's a simplified version of my configuration.

cssmin: {
    dist: {
        files: [{
            expand: true,
            cwd: '.tmp/stylesheets',
            src: ['main.css'],
            dest: 'dist/stylesheets',
            ext: '.min.css'
        }],
        options: {
            sourceMap: true,
            root: 'root'
        }
    }
}

I used "root" for the root property just to see if it would be included in the source map file, but no luck.

The source map that gets generated begins with the following:

{"version":3,"sources":["../../app/stylesheets/partials/_resets.scss","../../app/stylesheets/partials/_base.scss"

I need those paths to be "/stylesheets/partials/_resets.scss" and "/stylesheets/partials/_base.scss".

[einfallstoll]

Where do these paths come from? Are they commented in main.css?

[thomashigginbotham]

No, .tmp/main.css and .tmp/main.css.map are compiled by Sass/Compass from the files in the app/stylesheets directory.

It looks like the issue may not be with cssmin but with the source map generated by Compass. The cssmin task is just copying over the same source map (including file paths) that Compass generated.

I'll need to do some digging to see if I can control that within Compass.

Thanks for your help.

[lovebes]

@thomashigginbotham , in my case I have no Compass - specifically disabled sourceMap generation. The only source of sourceMap is created inside cssmin. I still have your exact situation. I think the default behavior should be setting sources as the destination path, not the src path.

[MatsSvensson]

I have this problem too. It looks like its trying to put an absolute path to the source files in the map, but with a missing slash in front.

For example: If the source-file is here: www.example.com/css/src/test.css ...and the map and generated file are located in: www.example.com/css/release/ This is the path that is put in the map: css/src/test.css ...and so the browser looks for the file in: www.example.com/css/release/css/src/test.css ...which of course just returns a bunch of 404's

If i manually add a "/" to the beginning of all paths in the generated maps, it works perfectly in the browser.

Something relative ,like: ../src/test.css ...would also have worked.

When uglify generates maps, it does it right, but uses realtive paths.

I don't see how it can work in cssmin, the way its done now.

Is anyone getting functioning maps out of cssmin,, without any hacks? Has it worked in the past?

[XhmikosR]

Is this still an issue?

[codeengie]

It's still an issue. I'm currently using grunt-sass, grunt-postcss, and grunt-contrib-cssmin. I compile sass from a source to .tmp folder where the sourcemap is created. Then I use grunt-postcss to add vendor prefixes and update sourcemap. Up until that point the sourcemap is referenced correctly back to its source file. But when I run cssmin, .tmp to a dist folder the sourcemap is modified my cssmin to point to the .tmp folder. I would like to keep the original source folder and not the .tmp. I tried root and that didn't work. A work around would be to directly compile into dist without the use of .tmp or using grunt-postcss + cssnano. I personally haven't used cssnano and I don't want to deviate from cssmin since I have it tied in to a lot of my projects.

sass: {
	options: {
		precision: 5,
		sourceMap: true
	},
	all: {
		files: [{
			expand: true,
			cwd: '<%= sourceStyles %>',
			src: '**/*.scss',
			dest: '<%= tempStyles %>',
			ext: '.css'
		}]
	}
},
postcss: {
	options: {
		map: true,
		processors: [
			require('autoprefixer')({browsers: 'last 2 versions'})
		]
	},
	all: {
		files: [{
			expand: true,
			cwd: '<%= tempStyles %>',
			src: '**/*.css',
			dest: '<%= tempStyles %>'
		}]
	}
},
cssmin: {
	options: {
		sourceMap: true
	},
	all: {
		files: [{
			expand: true,
			cwd: '<%= tempStyles %>',
			src: '**/*.css',
			dest: '<%= styles %>'
		}]
	}
};

[XhmikosR]

Please try to make a PR to address the issue and CC me.

[sanket-webmavens]

Is this fixed?