Disable automatic var() injection for anchor properties

[thecrypticace]

This PR disables automatic var() injsection for the following properties related to CSS Anchor Positioning as they all take dashed identifiers as values:

• anchor-name
• anchor-scope
• position-anchor
• position-try-options
• position-try

Before this PR when using these properties with custom properties you'd get output like this — notice how we wrap the identifier in var():

.\[anchor-name\:--tooltip\] {
  anchor-name: var(--tooltip);
}

.\[position-anchor\:--tooltip\] {
  position-anchor: var(--tooltip);
}

Normally, this behavior is reasonable for most properties like colors, sizes, spacing, etc… but these properties take a dashed ident directly as a custom name and are not referencing a custom property. So, after this PR you'll get the following output:

.\[anchor-name\:--tooltip\] {
  anchor-name: --tooltip;
}

.\[position-anchor\:--tooltip\] {
  position-anchor: --tooltip;
}

Fixes #13818

[adamwathan]

Do we have tests for the other exceptions that we should update for these new ones?

[thecrypticace]

We have tests but they only contain two cases:

  let config = {
    content: [
      // Automatic var injection
      { raw: '[color:--foo]' },

      // Automatic var injection is skipped
      { raw: '[timeline-scope:--foo]' },
    ],
  }

I can add all of them though if you think it's warranted

[thecrypticace]

I went ahead and added tests for all the properties.

[adamwathan]