fix(macros/cssxref): correct URL generation for data types and functi…

…ons (#8766)
mdn · Mar 28, 2024 · a0813d0 · a0813d0
1 parent 5913e7c
commit a0813d0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 31 deletions.
diff --git a/kumascript/macros/cssxref.ejs b/kumascript/macros/cssxref.ejs
@@ -13,42 +13,34 @@
 
   Examples:
   {{cssxref("background")}} =>
-      <a href="/en-US/docs/Web/CSS/background" title="The background CSS
-      property is..."><code>background</code></a>
+      <a href="/en-US/docs/Web/CSS/background"><code>background</code></a>
   {{cssxref("length")}} =>
-      <a href="/en-US/docs/Web/CSS/length" title="The <length> CSS data type
-      denotes..."><code>&lt;length&gt;</code></a>
-  {{cssxref("linear-gradient()")}} =>
-      <a href="/en-US/docs/Web/CSS/linear-gradient()" title="The CSS
-      linear-gradient() function creates..."><code>linear-gradient()</code></a>
+      <a href="/en-US/docs/Web/CSS/length"><code>&lt;length&gt;</code></a>
+  {{cssxref("calc()")}} =>
+      <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a>
   {{cssxref("margin-top", "top margin")}} =>
-      <a href="/en-US/docs/Web/CSS/margin-top" title="The margin-top CSS
-      property of an element sets..."><code>top margin</code></a>
-  {{cssxref("filter", "", "#url")}} =>
-      <a href="/en-US/docs/Web/CSS/filter#url()"><code>filter</code></a>
+      <a href="/en-US/docs/Web/CSS/margin-top"><code>top margin</code></a>
+  {{cssxref("attr()", "", "#values")}} =>
+      <a href="/en-US/docs/Web/CSS/attr#values"><code>attr()</code></a>
 */
 
-var lang = env.locale;
-var url = "";
-var urlWithoutAnchor = "";
-var displayName = ($1 || $0);
+const lang = env.locale;
+let url = "";
+let urlWithoutAnchor = "";
+let displayName = ($1 || $0);
 
-// Deal with CSS data types by removing <>
-var slug = $0.replace(/&lt;(.*)&gt;/g, '$1');
+// Deal with CSS data types and functions by removing <> and ()
+let slug = $0.replace(/&lt;(.*)&gt;/g, "$1")
+    .replace(/\(\)/g, "");
 
-// Special case <color>, <flex>, and <position>
-switch ($0) {
-    case '&lt;color&gt;':
-        slug = 'color_value';
-        break;
-
-    case '&lt;flex&gt;':
-        slug = 'flex_value';
-        break;
+// Special case <color>, <flex>, <overflow>, and <position>
+if (/^&lt;(color|flex|overflow|position)&gt;$/.test($0)) {
+    slug += "_value";
+}
 
-    case '&lt;position&gt;':
-        slug = 'position_value';
-        break;
+// Special case :host() and fit-content()
+if (/^(:host|fit-content)\(\)$/.test($0)) {
+    slug += "_function";
 }
 
 const basePath = `/${lang}/docs/Web/CSS/`;

diff --git a/kumascript/tests/macros/cssxref.test.ts b/kumascript/tests/macros/cssxref.test.ts
@@ -35,9 +35,9 @@ const MOCK_PAGES = {
     },
   },
   attr: {
-    url: [CSS_BASE_URL, "attr()"].join("/"),
+    url: [CSS_BASE_URL, "attr"].join("/"),
     data: {
-      url: [CSS_BASE_URL, "attr()"].join("/"),
+      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.',
       pageType: "css-function",