Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable automatic var() injection for anchor properties #13826

Merged
merged 3 commits into from
Jun 13, 2024

Conversation

thecrypticace
Copy link
Contributor

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

Copy link
Member

@adamwathan adamwathan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@thecrypticace
Copy link
Contributor Author

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 thecrypticace changed the title Disable automatic var() injection for CSS anchor positioning proper… Disable automatic var() injection for anchor properties Jun 12, 2024
@thecrypticace
Copy link
Contributor Author

I went ahead and added tests for all the properties.

Copy link
Member

@adamwathan adamwathan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved

@thecrypticace thecrypticace merged commit 9e928ce into master Jun 13, 2024
13 checks passed
@thecrypticace thecrypticace deleted the fix/v3-no-injection-for-anchor-props branch June 13, 2024 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants