Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Absolute instead of relative paths in sourcemap with dart-sass #299

Open
ghost opened this issue Feb 13, 2020 · 7 comments
Open

Absolute instead of relative paths in sourcemap with dart-sass #299

ghost opened this issue Feb 13, 2020 · 7 comments

Comments

@ghost
Copy link

ghost commented Feb 13, 2020

I have the following example config in Gruntfile.js:

sass: {
    dev_dartsass: {
        options: {
            implementation: require('sass'),
            sourceMap: true,
        },
        files: {'test.dartsass.css': 'test.scss'}
    },
    dev_nodesass: {
        options: {
            implementation: require('node-sass'),
            sourceMap: true,
        },
        files: {'test.nodesass.css': 'test.scss'}
    },
},

The output of the two mapping files is:

test.dartcss.css.map

{"version":3,"sourceRoot":"","sources":["file:///C:/www/myproject/assets/test.scss"],"names":[],"mappings":"AAAA;EACI","file":"test.dartsass.css"}

test.nodecss.css.map:

{
	"version": 3,
	"file": "test.nodesass.css",
	"sources": [
		"test.scss"
	],
	"names": [],
	"mappings": "AAAA,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,GAAG,GACb"
}

You can see that test.dartcss.css.map contains absolute paths instead of relative paths to the sources. The sass cli command has the following property to control this:

    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]

How can we tell grunt-sass/dart-sass to use relative paths?

@ghost
Copy link
Author

ghost commented Mar 19, 2020

Is this repo still maintained? I don't think it can be answered in one of the Sass-parser repo's since it's the specific implementation of grunt-sass that seems to cause this issue.

@IceCreamYou
Copy link

I think that dart-sass does not support relative files in the sources field as of sass/dart-sass#1021 when it's not writing the files to disk. I'm not sure why that change was made. The official sass API documentation also says:

The source map uses absolute file: URLs to link to the Sass source files, except if the source file comes from the data option in which case it lists its URL as stdin.

I haven't yet figured out if there's a way around this.

@petertwise
Copy link

Not sure there's much to be done here as node-sass is basically telling people to use dart-sass for continued support and you're right that it looks like they are forcing stdout to use absolute urls.

Just reemphasizing that this is sad since the default for sass --source-map-urls is relative in dart-sass and this issue means that each time a new developer works on any of our projects and any css compiling is triggered, they are checking in their new absolute URLs from their local machine for every single map file.

@timint
Copy link

timint commented May 31, 2022

I just migrated to dart-sass and discovered all sourcemap paths are now absolute instead of relative. Passing "source-map-urls" = "relative" or sourceMapUrls = "relative" under options has no effect. Anyone find a solution?

@kgiglia
Copy link

kgiglia commented Jun 20, 2022

We're also having this issue, would love to know if there has been any movement.

@petertwise
Copy link

What about this approach? - using sourceMapContents to make bigger but more dependable map files? Is that possible here, or still not possible because we're using the API and not command line?

cferdinandi/build-tool-boilerplate#7 (comment)

@petertwise
Copy link

This feels like a totally crazy hack approach that should not be necessary, but for now, I'm using grunt-string-replace to get this done:

'string-replace': {
	dist: {
		files: [
			{
				expand: true,
				cwd: 'dist/css/',
				src: '*.min.css.map',
				dest: 'dist/css/',
			},
		],
		options: {
			replacements: [
				// place files inline example
				{
					pattern: /(file:\/\/\/([^,]*)\/wp-content)+/g,
					replacement: '/wp-content',
				},
			],
		},
	},
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants