Adding two more page types for CSS pages

[yarusome]

I propose to add css-functional-pseudo-class and css-functional-pseudo-element as page types, which correspond to functional pseudo-classes and functional pseudo-elements.

A few motivations:

1. Currently, the "Syntax" section of non-functional pseudo-classes/elements are usually as bland as ::after (There is a literal /* … */ there):

   ::after {
     /* … */
   }

   By having separate page types for functional pseudo-classes/elements, it enables the use of the CSS functional notation page template to align the format of this section with other CSS functional notations and provide more concrete examples.

2. This paves the way to completely eliminate the special-casing in {{CSSXref}} (see also fix(macros/cssxref): correct URL generation for data types and functions yari#8766). (However, there seems little intention of further maintanence of this macro.)

PS: This is a more accurate refinement of mdn/content#27526.

[wbamberg]

Sounds interesting. I mean logically it makes sense.

Does that mean we should rename css-function to something like css-functional-value? Should we then also have css-type-value and css-keyword-value as is suggested a bit in here: https://github.com/orgs/mdn/discussions/256#discussioncomment-4336059 ?

What is the special-casing in cssxref you're talking about?

By having separate page types for functional pseudo-classes/elements, it enables the use of the mdn/content#28953 to align the format of this section with other CSS functional notations and provide more concrete examples.

Do you think css-functional-pseudo-class will be close enough to css-function, in terms of page structure, for this to work? I'm not sure. For one thing AFAIK selectors don't ever have formal syntax. For another we sometimes have this "Allowable properties" section for selectors (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/::highlight#allowable_properties, and if we had a template for selectors it would be nice to include that.

But even so, like I say, this seems like a logical grouping.

[yarusome]

1. I am in great favor of the css-type-value and css-functional-value dichotomy, but not so for css-keyword since there is no page on MDN that documents non-global CSS keywords. In addition, the disambiguating postfix _value could be changed to _type to match this.
2. Sorry for the wrong link 🙏, it should be this link. The details are placed at the end of this comment since they are not so relevant here.
3. For structure similarity:
   1. Functional pseudo-classes/elements do have syntaxes, e.g. :host( <compound-selector> ) and ::slotted( <compound-selector> ).
   2. The css-functional-pseudo-* types can be seen as subclasses/extensions to css-funtional-value, where the "Allowable properties" section is an optional member of these subclasses.

---

I would like to refactor {{CSSXref}} like this:

<%
/*
  All of these invocations:

  - `{{CSSXref("gradient/linear-gradient")}}`,
  - `{{CSSXref("gradient/linear-gradient()")}}`,
  - `{{CSSXref("gradient/linear-gradient_function")}}`,
  - `{{CSSXref("gradient_value/linear-gradient")}}`,
  - `{{CSSXref("gradient_value/linear-gradient()")}}`,
  - `{{CSSXref("gradient_value/linear-gradient_function")}}`,
  - `{{CSSXref("&lt;gradient&gt;/linear-gradient")}}`,
  - `{{CSSXref("&lt;gradient&gt;/linear-gradient()")}}`,
  - `{{CSSXref("&lt;gradient&gt;/linear-gradient_function")}}`,

  generate `<a href="/en-US/docs/Web/CSS/gradient/linear-gradient">linear-gradient()</a>`.
*/
async function getEntry(name, displayName, hash) {
  const lang = env.locale;
  const base = `/docs/Web/CSS/`;

  let slug = name = name
    .replace(/\(\)/g, "_function")
    .replace(/&lt;(.+?)&gt;/g, "$1_value");
  
  // Check if the typed page exists,
  // and fall back by stripping types successively
  let page;
  for (
    let re = /^(.+)_(?:function|value)(.*)$/, match;
    !(page = await wiki.getPage(`/en-US${base}${slug}`)).slug &&
    (match = re.exec(slug));
    slug = match[1] + match[2]
  );

  if (!displayName) {
    displayName = /[^\/]*$/.exec(name)[0]
      .replace(/_function$/, "()")
      .replace(/^(.+)_value$/, "&lt;$1&gt;");

    // Fix `displayName`
    const type = page.pageType;
    if (/^css-functional\b/.test(type) && !/\(\)$/.test(displayName)) {
      displayName += "()";
    } else if (
      type === "css-type-value" &&
      !/^&lt;(.+?)&gt;$/.test(displayName)
    ) {
      displayName = `&lt;${displayName}&gt;`;
    }
  }
  
  return web.smartLink(
    `/${lang}${base}${slug}${hash}`,
    "",
    `<code>${displayName}</code>`,
    name,
    `/${lang}${base}`,
  );
}
%><%- await getEntry($0, $1, $2) %>