Repository: sveltejs/svelte (JavaScript)
Date: 2019-10-28 14:39:21+00:00
Task type: Bug Fix

Issue:
Confusing error message "TypeError: Cannot read property 'start' of undefined" with invalid css
By mistake I had this invalid css in my component:
```css
<style>
  .no-wrap {
    word-wrap: ;
  }
</style>
```

With latest 3.12.1 I get the following compilation error:
```
Running: 'node_modules/.bin/rollup -c -w'
rollup v1.25.0
bundles svelte/main.js → www/gen/bundle.js...
[!] (plugin svelte) TypeError: Cannot read property 'start' of undefined
svelte/GistEditor.svelte
TypeError: Cannot read property 'start' of undefined
    at Declaration$1.minify (/Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:148:21)
    at /Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:32:15
    at Array.forEach (<anonymous>)
    at minify_declarations (/Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:27:15)
    at Rule$1.minify (/Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:92:7)
    at /Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:408:11
    at Array.forEach (<anonymous>)
    at Stylesheet.render (/Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/css/Stylesheet.ts:405:17)
    at dom (/Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/render_dom/index.ts:33:35)
    at render_dom (/Users/kjk/src/codeeval/node_modules/svelte/src/compiler/compile/index.ts:86:6)
```

I understand this is invalid cs but it's hard to figure out what's wrong from the error message.

Here's a repl: https://svelte.dev/repl/03ce54696b44445fbc8edbfa1c77696c?version=3.12.1



Issue discussion:

Solution patch:
diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts
--- a/src/compiler/parse/read/style.ts
+++ b/src/compiler/parse/read/style.ts
@@ -47,6 +47,13 @@ export default function read_style(parser: Parser, start: number, attributes: No
 				}
 			}
 
+			if (node.type === 'Declaration' && node.value.type === 'Value' && node.value.children.length === 0) {
+				parser.error({
+					code: `invalid-declaration`,
+					message: `Declaration cannot be empty`
+				}, node.start);
+			}
+
 			if (node.loc) {
 				node.start = node.loc.start.offset;
 				node.end = node.loc.end.offset;


Test patch:
diff --git a/test/validator/samples/invalid-empty-css-declaration/errors.json b/test/validator/samples/invalid-empty-css-declaration/errors.json
new file mode 100644
--- /dev/null
+++ b/test/validator/samples/invalid-empty-css-declaration/errors.json
@@ -0,0 +1,12 @@
+[{
+	"code": "invalid-declaration",
+	"message": "Declaration cannot be empty",
+	"start": {
+		"line": 11, "column": 0, "character": 93
+	},
+  	"end": {
+		"line": 11, "column": 0, "character": 93
+	},
+	"pos": 93,
+	"frame": " 9:     color: blue;\n10:   }\n11: </style>\n    ^"
+}]
\ No newline at end of file
diff --git a/test/validator/samples/invalid-empty-css-declaration/input.svelte b/test/validator/samples/invalid-empty-css-declaration/input.svelte
new file mode 100644
--- /dev/null
+++ b/test/validator/samples/invalid-empty-css-declaration/input.svelte
@@ -0,0 +1,11 @@
+<div class='foo bar'></div>
+
+<style>
+	.foo {
+		color:;
+	}
+	.bar {
+		font:;
+		color: blue;
+	}
+</style>
\ No newline at end of file