Adds validation for invalid reference names like foo-bar.

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

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') {

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"
+}]

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>