fix(template-compiler): relax attribute name restriction on usage of hyphen and underscore in combination @W-12021741 (#3143)

* feat: relax restriction on usage of hyphen and underscore in combination @W-12021741

* test: more tests

* test: add tests for emoji

Author: ravijayaramappa

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-error-hyphen-underscore/actual.html

@@ -1,7 +1,6 @@
+<!-- These test cases are important because a hyphen(-) in attribute name indicates that the
+    next character should be uppercased(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_props_names)-->
 <template>
-    <!-- attribute name with underscore + hyphen "_-" combination -->
-    <x-button under_-hyphen="bar"></x-button>
-
     <!-- attribute name with hyphen + underscore "-_" combination -->
     <x-button under-_hyphen="bar"></x-button>
 </template>

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-error-hyphen-underscore/metadata.json

@@ -1,24 +1,13 @@
 {
     "warnings": [
-        {
-            "code": 1126,
-            "message": "LWC1126: under_-hyphen is not valid attribute for x-button. Attribute name cannot contain combination of underscore and special characters.",
-            "level": 1,
-            "location": {
-                "line": 3,
-                "column": 15,
-                "start": 95,
-                "length": 19
-            }
-        },
         {
             "code": 1126,
             "message": "LWC1126: under-_hyphen is not valid attribute for x-button. Attribute name cannot contain combination of underscore and special characters.",
             "level": 1,
             "location": {
-                "line": 6,
+                "line": 5,
                 "column": 15,
-                "start": 212,
+                "start": 328,
                 "length": 19
             }
         }

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-hyphen-attribute/actual.html

@@ -0,0 +1,6 @@
+<!-- These test cases are important because a hyphen(-) in attribute name indicates that the
+    next character should be uppercased(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_props_names)-->
+<template>
+    <!-- invalid: trailing hyphen-->
+    <x-button hyphen-="bar"></x-button>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-hyphen-attribute/ast.json

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-hyphen-attribute/expected.js

@@ -0,0 +1,15 @@
+{
+    "warnings": [
+        {
+            "code": 1125,
+            "message": "LWC1125: hyphen- is not valid attribute for x-button. Attribute name must end with alpha-numeric character.",
+            "level": 1,
+            "location": {
+                "line": 5,
+                "column": 15,
+                "start": 295,
+                "length": 13
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-hyphen-attribute/metadata.json

@@ -0,0 +1,10 @@
+<template>
+    <!-- These are valid javascript propery names but their usage is restricted by template-compiler
+        This test case is to just document the existing precedent-->
+
+    <!-- leading latin characters-->
+    <x-button ñana="nana"></x-button>
+
+    <!-- trailing latin characters-->
+    <x-button nanå="nana"></x-button>
+</template>

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-non-alphanumeric/actual.html

@@ -0,0 +1 @@
+{}

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-non-alphanumeric/ast.json

@@ -0,0 +1,26 @@
+{
+    "warnings": [
+        {
+            "code": 1124,
+            "message": "LWC1124: ñana is not valid attribute for x-button. Attribute name must start with alphabetic character or a hyphen.",
+            "level": 1,
+            "location": {
+                "line": 6,
+                "column": 15,
+                "start": 233,
+                "length": 11
+            }
+        },
+        {
+            "code": 1125,
+            "message": "LWC1125: nanå is not valid attribute for x-button. Attribute name must end with alpha-numeric character.",
+            "level": 1,
+            "location": {
+                "line": 9,
+                "column": 15,
+                "start": 310,
+                "length": 11
+            }
+        }
+    ]
+}

packages/@lwc/template-compiler/src/__tests__/fixtures/attributes/invalid-non-alphanumeric/expected.js

@@ -0,0 +1,30 @@
+<!-- These test cases are important because a hyphen(-) in attribute name indicates that the
+    next character should be uppercased(https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_props_names)-->
+<template>
+    <!-- attribute name with underscore followed by hyphen "_-" combination -->
+
+    <!-- under_-hyphen: translates to under_Hyphen class property-->
+    <x-button under_-hyphen="bar"></x-button>
+
+    <!-- pacal case represented by hyphens: translates to PascalCase class property -->
+    <x-button -pascal-case="bar"></x-button>
+
+    <!-- leading hyphen: translated to Hyphen class property-->
+    <x-button -hyphen="bar"></x-button>
+
+    <!-- valid: hyphen followed by numeric character-->
+    <x-button hyphen-3pecial="bar"></x-button>
+
+    <!-- valid: hyphen followed by latin lower case character-->
+    <x-button hyphen-ßpecial="bar"></x-button>
+
+    <!-- valid: hyphen followed by latin lower case character-->
+    <x-button hyphen-àpecial="bar"></x-button>
+    
+    <!-- valid: hyphen followed by latin lower case character-->
+    <x-button hyphen-ªpecial="bar"></x-button>
+
+    <!-- valid: hyphen followed by emoji character-->
+    <x-button hyphen-🎉pecial="bar"></x-button>
+    <x-button hyphen-🇺🇸pecial="bar"></x-button>
+</template>