diff --git a/CHANGELOG.md b/CHANGELOG.md index 3aa1fb5..a283b5d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 0.10.1 + +* CSS sourcemaps are flattened correctly + ## 0.10.0 * Sourcemaps persist across non-sourcemap-generating transform boundaries ([#63](https://github.com/gobblejs/gobble/issues/63)) diff --git a/package.json b/package.json index ea87256..7ed73b2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "gobble", "description": "The last build tool you'll ever need", - "version": "0.10.0", + "version": "0.10.1", "author": "Rich Harris", "license": "MIT", "repository": "https://github.com/gobblejs/gobble", @@ -22,7 +22,7 @@ "resolve": "^1.0.0", "rimraf": "~2.2.8", "sander": "^0.3.2", - "sorcery": "^0.5.2", + "sorcery": "^0.5.4", "source-map-support": "^0.2.10", "tiny-lr": "~0.1.0" }, diff --git a/src/builtins/map.js b/src/builtins/map.js index c08f2ce..a6ddea6 100644 --- a/src/builtins/map.js +++ b/src/builtins/map.js @@ -11,7 +11,10 @@ import { ABORTED } from '../utils/signals'; let SOURCEMAPPING_URL = 'sourceMa'; SOURCEMAPPING_URL += 'ppingURL'; -const SOURCEMAP_COMMENT = new RegExp( `\\/\\/#\\s*${SOURCEMAPPING_URL}=([^\\r\\n]+)`, 'g' ); +const SOURCEMAP_COMMENT = new RegExp( `\n*(?:` + + `\\/\\/[@#]\\s*${SOURCEMAPPING_URL}=([^'"]+)|` + // js + `\\/\\*#?\\s*${SOURCEMAPPING_URL}=([^'"]+)\\s\\+\\/)` + // css +`\\s*$`, 'g' ); export default function map ( inputdir, outputdir, options ) { let changed = {}; @@ -111,7 +114,7 @@ function sourceMappingURLComment ( codepath ) { const url = encodeURI( codepath ) + '.map'; if ( ext === '.css' ) { - return `\n/* ${SOURCEMAPPING_URL}=${url}.map */\n`; + return `\n/*# ${SOURCEMAPPING_URL}=${url} */\n`; } return `\n//# ${SOURCEMAPPING_URL}=${url}\n`; diff --git a/test/sample/css/main.scss b/test/sample/css/main.scss new file mode 100644 index 0000000..06b49f9 --- /dev/null +++ b/test/sample/css/main.scss @@ -0,0 +1,5 @@ +$red: rgba(200,0,0,1); + +body { + color: $red; +} \ No newline at end of file diff --git a/test/sourcemaps.js b/test/sourcemaps.js index 21b6ffc..7d69b6a 100644 --- a/test/sourcemaps.js +++ b/test/sourcemaps.js @@ -310,6 +310,48 @@ module.exports = function () { }); }); + it( 'flattens CSS sourcemaps correctly', function () { + var source = gobble( 'tmp/css' ); + + // fake gobble-sass output + var css = 'body {\n color: #c80000; }\n\n/*# sourceMappingURL=main.css.map */'; + var cssMap = { + "version":3, + "file":"main.css", + "sources":[path.resolve("tmp/css/main.scss")], + "sourcesContent":[ + "$red: rgba(200,0,0,1);\n\nbody {\n\tcolor: $red;\n}" + ], + "names":[], + "mappings":"AAEA;EACC,AAHK" + }; + + return source + .transform( function ( inputdir, outputdir, options, callback ) { + sander.writeFileSync( outputdir, 'main.css', css ); + sander.writeFileSync( outputdir, 'main.css.map', JSON.stringify( cssMap ) ); + callback(); + }) + .build({ + dest: 'tmp/output' + }) + .then( function () { + // ignore differences in newlines + var actualCss = sander.readFileSync( 'tmp/output/main.css' ).toString().replace( /\n/g, '' ); + var expectedCss = css.replace( /\n/g, '' ); + assert.equal( actualCss, expectedCss ); + + var actualMap = sander.readFileSync( 'tmp/output/main.css.map' ).toString().replace( /\n/g, '' ); + actualMap = JSON.parse( actualMap ); + + actualMap.sources = actualMap.sources.map( function ( source ) { + return path.resolve( 'tmp/output', source ); + }); + + assert.deepEqual( actualMap, cssMap ); + }); + }); + it( 'generates sourcemaps lazily, on-demand, when serving', function ( done ) { var source = gobble( 'tmp/baz' );