From 3b27ae779958e160cb02b49e9bb855873d1b2c24 Mon Sep 17 00:00:00 2001
From: wbamberg <will@bootbonnet.ca>
Date: Sun, 9 Oct 2022 20:37:29 -0700
Subject: [PATCH] Use page type instead of tags for CSSSyntax macro (#7290)

---
 kumascript/macros/CSSSyntax.ejs | 44 +++++++++++++++++----------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/kumascript/macros/CSSSyntax.ejs b/kumascript/macros/CSSSyntax.ejs
index bb35fb847e07..2180665162a8 100644
--- a/kumascript/macros/CSSSyntax.ejs
+++ b/kumascript/macros/CSSSyntax.ejs
@@ -85,27 +85,29 @@ function getNameAndSyntax() {
   // get the item name from the page slug
   let itemName = $0 || env.slug.split('/').pop().toLowerCase();
   let itemSyntax;
-  if (env.tags.includes("CSS Property")) {
-    // get syntax for a CSS property
-    itemSyntax = getPropertySyntax(itemName, parsedWebRef);
-  } else if (env.tags.includes("CSS Data Type")) {
-    // get syntax for a CSS data type
-    // some CSS data type slugs have a `_value` suffix
-    if (itemName.endsWith("_value")) {
-      itemName = itemName.replace("_value", "");
-    }
-    itemName = `<${itemName}>`;
-    // not all types have an entry in the syntax
-    if (valuespaces[itemName]) {
-      itemSyntax = valuespaces[itemName].value;
-    }
-  } else if (env.tags.includes("CSS Function")) {
-    // get syntax for a CSS function
-    itemName = `<${itemName}()>`;
-    // not all types have an entry in the syntax
-    if (valuespaces[itemName]) {
-      itemSyntax = valuespaces[itemName].value;
-    }
+  switch (env["page-type"]) {
+    case "css-shorthand-property":
+    case "css-property":
+      itemSyntax = getPropertySyntax(itemName, parsedWebRef);
+      break;
+    case "css-type":
+      // some CSS data type slugs have a `_value` suffix
+      if (itemName.endsWith("_value")) {
+        itemName = itemName.replace("_value", "");
+      }
+      itemName = `<${itemName}>`;
+      // not all types have an entry in the syntax
+      if (valuespaces[itemName]) {
+        itemSyntax = valuespaces[itemName].value;
+      }
+      break;
+    case "css-function":
+      itemName = `<${itemName}()>`;
+      // not all functions have an entry in the syntax
+      if (valuespaces[itemName]) {
+        itemSyntax = valuespaces[itemName].value;
+      }
+      break;
   }
   return {
     name: itemName,