merge master -> lazy-sourcemaps

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))

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"
   },

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`;

test/sample/css/main.scss

@@ -0,0 +1,5 @@
+$red: rgba(200,0,0,1);
+
+body {
+	color: $red;
+}

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' );