Merge branch 'master' into gh-708

Author: Rich-Harris

.gitignore

@@ -13,4 +13,5 @@ test/sourcemaps/samples/*/output.js
 test/sourcemaps/samples/*/output.js.map
 _actual.*
 _actual-bundle.*
-src/generators/dom/shared.ts
+src/generators/dom/shared.ts
+package-lock.json

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## 1.25.1
+
+* Better CSS sourcemaps ([#716](https://github.com/sveltejs/svelte/pull/716))
+
 ## 1.25.0
 
 * Fix hoisted event handlers ([#699](https://github.com/sveltejs/svelte/issues/699))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "1.25.0",
+  "version": "1.25.1",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [
@@ -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",

package.json

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

src/css/Stylesheet.ts

@@ -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/helpers.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/index.js

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

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

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

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

@@ -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
+	});
+}