chore(macros/cssxref): use page-type to detect CSS Functions/Data Types

kumascript/macros/cssxref.ejs

@@ -60,11 +60,11 @@ const thisPage = (!$1 || !$2) ? wiki.getPage(urlWithoutAnchor) : null;
 
 if (!$1) {
     // Append parameter brackets to CSS functions
-    if (page.hasTag(thisPage, "CSS Function") && !str.endsWith("()")) {
+    if ((thisPage.pageType === "css-function") && !str.endsWith("()")) {
         str += "()";
     }
     // Enclose CSS data types in arrow brackets
-    if (page.hasTag(thisPage, "CSS Data Type") && !/^<.+>$/.test(str)) {
+    if ((thisPage.pageType === "css-type") && !/^<.+>$/.test(str)) {
         str = "<" + str + ">";
     }
 }

kumascript/tests/index.test.ts

@@ -83,7 +83,7 @@ describe("testing the main render() function", () => {
             title: "<number>",
             locale: "en-US",
             slug: "Web/Number",
-            tags: ["Web", "CSS", "CSS Data Type", "Layout", "Reference"],
+            "page-type": "css-type",
           },
           rawBody: "<p>This is the number test page.</p>",
           isMarkdown: false,

kumascript/tests/macros/cssxref.test.ts

@@ -30,7 +30,7 @@ const MOCK_PAGES = {
       url: [CSS_BASE_URL, "display"].join("/"),
       summary:
         'The <strong><code>display</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property specifies the type of rendering box used for an element.',
-      tags: ["CSS", "CSS Property", "CSS Display"],
+      pageType: "css-property",
     },
   },
   attr: {
@@ -39,7 +39,7 @@ const MOCK_PAGES = {
       url: [CSS_BASE_URL, "attr()"].join("/"),
       summary:
         'The <strong><code>attr()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to retrieve the value of an attribute of the selected element and use it in the style sheet.',
-      tags: ["CSS", "Reference", "Web", "CSS Function", "Layout"],
+      pageType: "css-function",
     },
   },
   length: {
@@ -48,7 +48,7 @@ const MOCK_PAGES = {
       url: [CSS_BASE_URL, "length"].join("/"),
       summary:
         'The <strong><code>&lt;length&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a distance value.',
-      tags: ["CSS", "Reference", "Web", "Layout", "CSS Data Type", "length"],
+      pageType: "css-type",
     },
   },
   color_value: {
@@ -57,7 +57,7 @@ const MOCK_PAGES = {
       url: [CSS_BASE_URL, "color_value"].join("/"),
       summary:
         'The <strong><code>&lt;color&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a color in the <a href="https://en.wikipedia.org/wiki/SRGB" class="external">sRGB color space</a>.',
-      tags: ["CSS", "Reference", "Web", "CSS Data Type", "Layout"],
+      pageType: "css-type",
     },
   },
   flex_value: {
@@ -66,7 +66,7 @@ const MOCK_PAGES = {
       url: [CSS_BASE_URL, "flex_value"].join("/"),
       summary:
         'The <strong><code>&lt;flex&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> denotes a flexible length within a grid container.',
-      tags: ["CSS", "Reference", "Web", "CSS Data Type", "Layout"],
+      pageType: "css-type",
     },
   },
   position_value: {
@@ -75,7 +75,7 @@ const MOCK_PAGES = {
       url: [CSS_BASE_URL, "position_value"].join("/"),
       summary:
         'The <strong><code>&lt;position&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> denotes a two-dimensional coordinate used to set a location relative to an element box.',
-      tags: ["CSS", "Reference", "Web", "CSS Data Type", "Layout"],
+      pageType: "css-type",
     },
   },
 };

testing/content/files/en-us/web/css/number/index.html

@@ -1,11 +1,7 @@
 ---
 title: <number>
 slug: Web/CSS/number
-tags:
-  - CSS
-  - CSS Data Type
-  - Layout
-  - Reference
-  - Web
+page-type: css-type
 ---
+
 <p>You've reached the number test page.</p>