Fix: Missing syntax highlighting for css partials

packages/tooling/fast-vscode-syntax-highlighting/syntaxes/fast-tagged-templates.tmLanguage.json

@@ -15,7 +15,7 @@
     ],
     "repository": {
         "css-tagged-template": {
-            "begin": "(?i)(?<!\\.)(css|((?:\\/\\*\\s*?)css(?:\\s*\\*\\/)))\\s*(`)",
+            "begin": "(?i)(?<!\\.)((css(\\.)?(partial)?)|((?:\\/\\*\\s*?)(css(\\.)?(partial)?)(?:\\s*\\*\\/)))\\s*(`)",
             "beginCaptures": {
                 "1": {
                     "name": "entity.name.function.tagged-template.ts"

packages/tooling/fast-vscode-syntax-highlighting/test/test.ts

@@ -186,3 +186,184 @@ b = `something else`;
 `.class {}`;
 
 /* css */ 'asdf' + `.class {}`;
+
+
+// empty string
+cssPartial``;
+// blankspace-only string
+
+cssPartial``;
+
+// basic selectors
+cssPartial`
+    div #id .class[attribute] {
+    }
+`;
+
+// property interpolation
+cssPartial`
+    a {
+        color: ${someColor};
+    }
+`;
+cssPartial`
+    a {
+        ${interpolatedList}
+    }
+`;
+cssPartial`
+    a {
+        ${propertyName}: "value";
+    }
+`;
+
+// selector interpolation
+cssPartial`
+    ${someSelector} {
+    }
+`;
+cssPartial`
+    [${someAttr.name}="value"] {
+    }
+`;
+cssPartial`[${someAttr.full}] {}`;
+cssPartial`
+    #${someId} .${someClass} {
+    }
+`;
+
+cssPartial`[name="${someSelector}"] {}`;
+cssPartial`a:${someSelector} {}`;
+cssPartial`
+    a:not(${someSelector}) {
+    }
+`;
+
+cssPartial`
+/* ${invalid} */
+.asdf {
+    /* color: ${invalid}; */
+}
+`;
+
+cssPartial`
+    :root {
+        ${behavior.propertyName}: #000;
+        background-image: url("strings ${within.Strings?.work}");
+    }
+    :host(.my-element) {
+        color: ${behavior.var};
+        height: calc(${heightNumber} * 1px);
+    }
+`;
+
+cssPartial`
+    div {
+    }
+`.withBehaviors(
+    behavior,
+    forcedColorsStylesheetBehavior(
+        css`
+            #selector:${pseudoSelector}::before {
+                color: ${SystemColors.Highlight};
+                line-height: 2;
+            }
+        `
+    )
+);
+
+cssPartial`
+    ${context.tagFor(Component)} {
+        color: ${tokenValue};
+    }
+`;
+
+// empty string
+css.partial``;
+// blankspace-only string
+
+css.partial``;
+
+// basic selectors
+css.partial`
+    div #id .class[attribute] {
+    }
+`;
+
+// property interpolation
+css.partial`
+    a {
+        color: ${someColor};
+    }
+`;
+css.partial`
+    a {
+        ${interpolatedList}
+    }
+`;
+css.partial`
+    a {
+        ${propertyName}: "value";
+    }
+`;
+
+// selector interpolation
+css.partial`
+    ${someSelector} {
+    }
+`;
+css.partial`
+    [${someAttr.name}="value"] {
+    }
+`;
+css.partial`[${someAttr.full}] {}`;
+css.partial`
+    #${someId} .${someClass} {
+    }
+`;
+
+css.partial`[name="${someSelector}"] {}`;
+css.partial`a:${someSelector} {}`;
+css.partial`
+    a:not(${someSelector}) {
+    }
+`;
+
+css.partial`
+/* ${invalid} */
+.asdf {
+    /* color: ${invalid}; */
+}
+`;
+
+css.partial`
+    :root {
+        ${behavior.propertyName}: #000;
+        background-image: url("strings ${within.Strings?.work}");
+    }
+    :host(.my-element) {
+        color: ${behavior.var};
+        height: calc(${heightNumber} * 1px);
+    }
+`;
+
+css.partial`
+    div {
+    }
+`.withBehaviors(
+    behavior,
+    forcedColorsStylesheetBehavior(
+        css`
+            #selector:${pseudoSelector}::before {
+                color: ${SystemColors.Highlight};
+                line-height: 2;
+            }
+        `
+    )
+);
+
+css.partial`
+    ${context.tagFor(Component)} {
+        color: ${tokenValue};
+    }
+`;