From 89412e370e90942c7852528b7ec385df4199b058 Mon Sep 17 00:00:00 2001
From: Admin <Admin@His-MacBook-Pro.local>
Date: Sun, 5 Aug 2018 00:29:38 -0500
Subject: [PATCH] Adds validation for invalid reference names like foo-bar.

---
 src/validate/html/validateComponent.ts        |  2 ++
 src/validate/html/validateElement.ts          | 20 +++++++++++++++++--
 .../reference-must-be-valid-name/errors.json  | 15 ++++++++++++++
 .../reference-must-be-valid-name/input.html   |  8 ++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 test/validator/samples/reference-must-be-valid-name/errors.json
 create mode 100644 test/validator/samples/reference-must-be-valid-name/input.html

diff --git a/src/validate/html/validateComponent.ts b/src/validate/html/validateComponent.ts
index e5cab392a6..48df1ec9d7 100644
--- a/src/validate/html/validateComponent.ts
+++ b/src/validate/html/validateComponent.ts
@@ -22,6 +22,8 @@ export default function validateComponent(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
+			if (attribute.name.includes('-'))
+				console.dir(attribute);
 			if (!refs.has(attribute.name)) refs.set(attribute.name, []);
 			refs.get(attribute.name).push(node);
 		}
diff --git a/src/validate/html/validateElement.ts b/src/validate/html/validateElement.ts
index a05214c6a5..e7edfae0ea 100644
--- a/src/validate/html/validateElement.ts
+++ b/src/validate/html/validateElement.ts
@@ -4,6 +4,7 @@ import validate, { Validator } from '../index';
 import { Node } from '../../interfaces';
 import { dimensions } from '../../utils/patterns';
 import isVoidElementName from '../../utils/isVoidElementName';
+import isValidIdentifier from '../../utils/isValidIdentifier';
 
 const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
 
@@ -82,8 +83,23 @@ export default function validateElement(
 
 	node.attributes.forEach((attribute: Node) => {
 		if (attribute.type === 'Ref') {
-			if (!refs.has(attribute.name)) refs.set(attribute.name, []);
-			refs.get(attribute.name).push(node);
+			// console.dir(isValidIdentifier(attribute.name));
+			if (!isValidIdentifier(attribute.name)) {
+				const suggestion = attribute.name.replace(/[^_$a-z0-9]/ig, '_').replace(/^\d/, '_$&');
+				
+				const key = {
+					start: attribute.start,
+					end: attribute.end
+				};
+				
+				validator.error(key, {
+					code: `invalid-reference-name`,
+					message: `Reference name '${attribute.name}' is invalid — must be a valid identifier such as ${suggestion}`
+				});	
+			} else {
+				if (!refs.has(attribute.name)) refs.set(attribute.name, []);
+				refs.get(attribute.name).push(node);
+			}
 		}
 
 		if (attribute.type === 'Binding') {
diff --git a/test/validator/samples/reference-must-be-valid-name/errors.json b/test/validator/samples/reference-must-be-valid-name/errors.json
new file mode 100644
index 0000000000..eb1c92d6d2
--- /dev/null
+++ b/test/validator/samples/reference-must-be-valid-name/errors.json
@@ -0,0 +1,15 @@
+[{
+  "message": "Reference name 'foo-bar' is invalid — must be a valid identifier such as foo_bar",
+  "start": {
+    "line": 1,
+    "column": 5,
+    "character": 5 
+  },
+  "end": {
+    "line": 1,
+    "column": 16,
+    "character": 16
+  },
+  "pos": 5,
+  "code": "invalid-reference-name"
+}]
diff --git a/test/validator/samples/reference-must-be-valid-name/input.html b/test/validator/samples/reference-must-be-valid-name/input.html
new file mode 100644
index 0000000000..a995bd8e6e
--- /dev/null
+++ b/test/validator/samples/reference-must-be-valid-name/input.html
@@ -0,0 +1,8 @@
+<div ref:foo-bar>
+</div>
+
+<style>
+	ref:foo-bar {
+		display: flex;
+	}
+</style>