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

[yarusome]

Summary

Fixes #8755.

Problem

1. {{CSSXref}} Generated URLs for CSS functions contain extra parentheses.
2. :host() and fit-content() are not handled correctly.
3. <overflow> is not handled correctly.
4. The examples in cssxref.ejs are outdated.

Solution

1. Remove parentheses in slug.
2. Append _funtion to slug.
3. Add the data type into the special-case block.
4. Update examples according to current results.

---

How did you test this change?

Run the following code in the console:

// Only return the URL
function CSSXref(arg0, arg1 = "", arg2 = "") {
  const lang = "en-US"; // for convenience
  let url = "";
  let urlWithoutAnchor = "";
  let displayName = (arg1 || arg0);
  
  // Deal with CSS data types and functions by removing <> and ()
  let slug = arg0.replace(/&lt;(.*)&gt;/g, "$1")
      .replace(/\(\)/g, "");
  
  // Special case <color>, <flex>, <overflow>, and <position>
  if (/^&lt;(color|flex|overflow|position)&gt;$/.test(arg0)) {
      slug += "_value";
  }
  
  // Special case :host() and fit-content()
  if (/^(:host|fit-content)\(\)$/.test(arg0)) {
      slug += "_function";
  }
  
  const basePath = `/${lang}/docs/Web/CSS/`;
  urlWithoutAnchor = basePath + slug;
  url = urlWithoutAnchor + arg2;
  
  return url;
}

// Test cases adpated from 'cssxref.test.ts'
const TEST_CASE = [
  "display",
  "attr()",
  ":host()",
  "length",
  "&lt;length&gt;",
  "&lt;color&gt;",
  "&lt;overflow&gt;"
];

for(const caseInput of TEST_CASE) {
  console.log(CSSXref(caseInput));
}

/* Expected output:
   /en-US/docs/Web/CSS/display
   /en-US/docs/Web/CSS/attr
   /en-US/docs/Web/CSS/:host_function
   /en-US/docs/Web/CSS/length
   /en-US/docs/Web/CSS/length
   /en-US/docs/Web/CSS/color_value
   /en-US/docs/Web/CSS/overflow_value
*/

[yarusome]

The unit test is complaining about pageType (?)

[caugner]

@yarusome The unit test does not access mdn/content, but instead uses some mock pages, and the mocked attr page still uses parentheses:

yari/kumascript/tests/macros/cssxref.test.ts

Lines 37 to 45 in f6e5179

	attr: {
	url: [CSS_BASE_URL, "attr()"].join("/"),
	data: {
	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",
	},
	},

Updating those urls should fix the failing test.

[yarusome]

@caugner Thanks for the hint. All unit tests pass now.

[caugner]

LGTU (@argl @fiji-flo @caugner)