Merge pull request #716 from sveltejs/better-css-sourcemaps

better CSS sourcemaps

package.json

@@ -65,7 +65,7 @@
     "glob": "^7.1.1",
     "jsdom": "^9.9.1",
     "locate-character": "^2.0.0",
-    "magic-string": "^0.22.1",
+    "magic-string": "^0.22.3",
     "mocha": "^3.2.0",
     "node-resolve": "^1.3.3",
     "nyc": "^10.0.0",

src/css/Stylesheet.ts

@@ -175,6 +175,13 @@ export default class Stylesheet {
 		code.remove(0, this.parsed.css.start + 7);
 		code.remove(this.parsed.css.end - 8, this.source.length);
 
+		walk(this.parsed.css, {
+			enter: (node: Node) => {
+				code.addSourcemapLocation(node.start);
+				code.addSourcemapLocation(node.end);
+			}
+		});
+
 		const keyframes = new Map();
 		this.atrules.forEach((atrule: Atrule) => {
 			atrule.transform(code, this.id, keyframes);

test/helpers.js

@@ -155,7 +155,7 @@ export function loadConfig(file) {
 		delete require.cache[resolved];
 		return require(resolved).default;
 	} catch (err) {
-		if (err.code === 'E_NOT_FOUND') {
+		if (err.code === 'MODULE_NOT_FOUND') {
 			return {};
 		}
 

test/sourcemaps/index.js

@@ -1,7 +1,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import assert from "assert";
-import { svelte } from "../helpers.js";
+import { loadConfig, svelte } from "../helpers.js";
 import { SourceMapConsumer } from "source-map";
 import { getLocator } from "locate-character";
 
@@ -17,6 +17,8 @@ describe("sourcemaps", () => {
 		}
 
 		(solo ? it.only : it)(dir, () => {
+			const config = loadConfig(`./sourcemaps/samples/${dir}/_config.js`);
+
 			const filename = path.resolve(
 				`test/sourcemaps/samples/${dir}/input.html`
 			);
@@ -28,7 +30,8 @@ describe("sourcemaps", () => {
 			const { code, map, css, cssMap } = svelte.compile(input, {
 				filename,
 				outputFilename: `${outputFilename}.js`,
-				cssOutputFilename: `${outputFilename}.css`
+				cssOutputFilename: `${outputFilename}.css`,
+				cascade: config.cascade
 			});
 
 			fs.writeFileSync(

test/sourcemaps/samples/css-cascade-false/_config.js

@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};

test/sourcemaps/samples/css-cascade-false/input.html

@@ -0,0 +1,7 @@
+<p class='foo'>red</p>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>

test/sourcemaps/samples/css-cascade-false/output.css

@@ -0,0 +1,6 @@
+
+	.foo[svelte-2772200924] {
+		color: red;
+	}
+
+/*# sourceMappingURL=output.css.map */

test/sourcemaps/samples/css-cascade-false/output.css.map

@@ -0,0 +1,12 @@
+{
+  "version": 3,
+  "file": "output.css",
+  "sources": [
+    "input.html"
+  ],
+  "sourcesContent": [
+    "<p class='foo'>red</p>\n\n<style>\n\t.foo {\n\t\tcolor: red;\n\t}\n</style>"
+  ],
+  "names": [],
+  "mappings": "AAEO;CACN,uBAAI,CAAC;EACJ,MAAM,CAAC,GAAG;EACV;AACF"
+}

test/sourcemaps/samples/css-cascade-false/test.js

@@ -0,0 +1,17 @@
+export function test ({ assert, smcCss, locateInSource, locateInGeneratedCss }) {
+	const expected = locateInSource( '.foo' );
+
+	const loc = locateInGeneratedCss( '.foo' );
+
+	const actual = smcCss.originalPositionFor({
+		line: loc.line + 1,
+		column: loc.column
+	});
+
+	assert.deepEqual( actual, {
+		source: 'input.html',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}

test/sourcemaps/samples/css/output.css.map

@@ -8,5 +8,5 @@
     "<p class='foo'>red</p>\n\n<style>\n\t.foo {\n\t\tcolor: red;\n\t}\n</style>"
   ],
   "names": [],
-  "mappings": "AAEO;CACN,iDAAI;;;AAGL"
+  "mappings": "AAEO;CACN,iDAAI,CAAC;EACJ,MAAM,CAAC,GAAG;EACV;AACF"
 }