chore: upgrade magic-string (#8339)

- overwrite -> update
- update comments

package-lock.json

@@ -38,7 +38,7 @@
         "jsdom": "^15.2.1",
         "kleur": "^4.1.5",
         "locate-character": "^2.0.5",
-        "magic-string": "^0.25.3",
+        "magic-string": "^0.30.0",
         "mocha": "^7.0.0",
         "periscopic": "^3.0.4",
         "puppeteer": "^2.0.0",
@@ -3532,12 +3532,15 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.25.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
-      "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
+      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
       "dev": true,
       "dependencies": {
-        "sourcemap-codec": "^1.4.4"
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
     "node_modules/mdn-data": {
@@ -7961,12 +7964,12 @@
       }
     },
     "magic-string": {
-      "version": "0.25.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
-      "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
+      "integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
       "dev": true,
       "requires": {
-        "sourcemap-codec": "^1.4.4"
+        "@jridgewell/sourcemap-codec": "^1.4.13"
       }
     },
     "mdn-data": {

package.json

@@ -148,7 +148,7 @@
     "jsdom": "^15.2.1",
     "kleur": "^4.1.5",
     "locate-character": "^2.0.5",
-    "magic-string": "^0.25.3",
+    "magic-string": "^0.30.0",
     "mocha": "^7.0.0",
     "periscopic": "^3.0.4",
     "puppeteer": "^2.0.0",

src/compiler/compile/css/Selector.ts

@@ -76,7 +76,7 @@ export default class Selector {
 		this.blocks.forEach((block, i) => {
 			if (i > 0) {
 				if (block.start - c > 1) {
-					code.overwrite(c, block.start, block.combinator.name || ' ');
+					code.update(c, block.start, block.combinator.name || ' ');
 				}
 			}
 
@@ -112,7 +112,7 @@ export default class Selector {
 				}
 
 				if (selector.type === 'TypeSelector' && selector.name === '*') {
-					code.overwrite(selector.start, selector.end, attr);
+					code.update(selector.start, selector.end, attr);
 				} else {
 					code.appendLeft(selector.end, attr);
 				}

src/compiler/compile/css/Stylesheet.ts

@@ -35,7 +35,7 @@ function minify_declarations(
 	declarations.forEach((declaration, i) => {
 		const separator = i > 0 ? ';' : '';
 		if ((declaration.node.start - c) > separator.length) {
-			code.overwrite(c, declaration.node.start, separator);
+			code.update(c, declaration.node.start, separator);
 		}
 		declaration.minify(code);
 		c = declaration.node.end;
@@ -75,7 +75,7 @@ class Rule {
 			if (selector.used) {
 				const separator = started ? ',' : '';
 				if ((selector.node.start - c) > separator.length) {
-					code.overwrite(c, selector.node.start, separator);
+					code.update(c, selector.node.start, separator);
 				}
 
 				selector.minify(code);
@@ -133,7 +133,7 @@ class Declaration {
 				if (block.type === 'Identifier') {
 					const name = block.name;
 					if (keyframes.has(name)) {
-						code.overwrite(block.start, block.end, keyframes.get(name));
+						code.update(block.start, block.end, keyframes.get(name));
 					}
 				}
 			});
@@ -156,7 +156,7 @@ class Declaration {
 		while (regex_whitespace.test(code.original[start])) start += 1;
 
 		if (start - c > 1) {
-			code.overwrite(c, start, ':');
+			code.update(c, start, ':');
 		}
 	}
 }
@@ -204,7 +204,7 @@ class Atrule {
 			code.remove(c, this.node.block.start);
 		} else if (this.node.name === 'supports') {
 			let c = this.node.start + 9;
-			if (this.node.prelude.start - c > 1) code.overwrite(c, this.node.prelude.start, ' ');
+			if (this.node.prelude.start - c > 1) code.update(c, this.node.prelude.start, ' ');
 			this.node.prelude.children.forEach((query: CssNode) => {
 				// TODO minify queries
 				c = query.end;
@@ -213,7 +213,7 @@ class Atrule {
 		} else {
 			let c = this.node.start + this.node.name.length + 1;
 			if (this.node.prelude) {
-				if (this.node.prelude.start - c > 1) code.overwrite(c, this.node.prelude.start, ' ');
+				if (this.node.prelude.start - c > 1) code.update(c, this.node.prelude.start, ' ');
 				c = this.node.prelude.end;
 			}
 			if (this.node.block && this.node.block.start - c > 0) {
@@ -255,7 +255,7 @@ class Atrule {
 							});
 						});
 					} else {
-						code.overwrite(start, end, keyframes.get(name));
+						code.update(start, end, keyframes.get(name));
 					}
 				}
 			});

test/sourcemaps/samples/compile-option-dev/test.js

@@ -18,10 +18,13 @@ export async function test({ assert, css,  js }) {
 	// TODO make util fn + move to test index.js
 	const sourcefile = 'input.svelte';
 	[
-		// TODO how to get line + column numbers?
+		// TODO: get line and col num from input.svelte rather than hardcoding here
 		[css, '--keep-me', 13, 2],
-		[css, '--done-replace-once', 6, 5],
-		[css, '--done-replace-twice', 9, 5]
+		// TODO: these should be 7, 2 and 10, 2
+		// we use locate_1 which means lines are 1-indexed and cols are 0-indexed
+		// each tab is 1 col
+		[css, '--done-replace-once', 6, 4],
+		[css, '--done-replace-twice', 9, 4]
 	]
 	.forEach(([where, content, line, column]) => {
 		assert.deepEqual(