Skip to content

feat: track CSS custom properties on CSSSourceCode#411

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/track-css-variables-sourcecode
Draft

feat: track CSS custom properties on CSSSourceCode#411
Copilot wants to merge 3 commits intomainfrom
copilot/track-css-variables-sourcecode

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 27, 2026

Implements the CSS variable tracking RFC, centralizing custom property tracking on CSSSourceCode so rules don't duplicate this logic. Also fixes variable hoisting — var() references before their declaration now resolve correctly.

CSSSourceCode — new API

Three new public methods backed by private #customProperties Map and #declarationVariables WeakMap, populated during traverse():

  • getDeclarationVariables(declaration) — returns var() function nodes used in a declaration's value
  • getClosestVariableValue(func) — returns the closest value for a var() node. Resolution priority per RFC: same-block declaration → fallback → other-block declarations (hoisted) → @property initial-value → undefined
  • getVariableValues(func) — returns all known values: @property initial-value, then declarations in source order, then fallback
// Rule usage example
const closestValue = sourceCode.getClosestVariableValue(varFuncNode);
const allValues = sourceCode.getVariableValues(varFuncNode);
const varsInDecl = sourceCode.getDeclarationVariables(declNode);

no-invalid-properties — refactored to use new API

  • Uses getClosestVariableValue() for primary resolution instead of maintaining its own variable map
  • Populates internal vars map incrementally via rule visitor methods; hoisting is handled by getClosestVariableValue() which has access to all declarations collected during CSSSourceCode.traverse()
  • Falls back to direct chain resolution when closest value contains unresolvable nested var() refs
  • 3 test cases move from invalid → valid: when a var() has a valid fallback, the fallback is now preferred over an invalid value from another selector block

Tests

  • 19 new tests covering all three CSSSourceCode methods (same-block, fallback priority, hoisting, @property, multiple declarations, cross-declaration isolation)
  • 2 hoisting tests for no-invalid-properties

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@github-project-automation github-project-automation bot moved this to Needs Triage in Triage Mar 27, 2026
Copilot AI linked an issue Mar 27, 2026 that may be closed by this pull request
1 task
@eslint-github-bot
Copy link
Copy Markdown

Hi @copilot!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the pull request title to match this format, as we use it to generate changelogs and automate releases.

  • The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
  • There should be a space following the initial tag and colon, for example 'feat: Message'.
  • The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

1 similar comment
@eslint-github-bot
Copy link
Copy Markdown

Hi @copilot!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the pull request title to match this format, as we use it to generate changelogs and automate releases.

  • The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
  • There should be a space following the initial tag and colon, for example 'feat: Message'.
  • The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

…no-invalid-properties

Implements the RFC for CSS custom property tracking on CSSSourceCode:
- Add #customProperties map and #declarationVariables WeakMap
- Populate during traverse() to track declarations, @Property definitions, and var() references
- Add getDeclarationVariables(declaration) method
- Add getClosestVariableValue(func) method
- Add getVariableValues(func) method

Refactor no-invalid-properties rule to use the new API:
- Use getClosestVariableValue() for primary variable resolution
- Pre-populate vars map from AST to support variable hoisting (fixes #199)
- Fallback values take priority over other-block declarations per RFC

Add comprehensive tests for all new CSSSourceCode methods.

Agent-Logs-Url: https://github.com/eslint/css/sessions/e41fbbf4-0081-469f-8248-1e854213b08c

Co-authored-by: nzakas <38546+nzakas@users.noreply.github.com>
@eslint-github-bot
Copy link
Copy Markdown

Hi @copilot!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the pull request title to match this format, as we use it to generate changelogs and automate releases.

  • The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
  • There should be a space following the initial tag and colon, for example 'feat: Message'.
  • The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

2 similar comments
@eslint-github-bot
Copy link
Copy Markdown

Hi @copilot!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the pull request title to match this format, as we use it to generate changelogs and automate releases.

  • The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
  • There should be a space following the initial tag and colon, for example 'feat: Message'.
  • The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

@eslint-github-bot
Copy link
Copy Markdown

Hi @copilot!, thanks for the Pull Request

The pull request title isn't properly formatted. We ask that you update the pull request title to match this format, as we use it to generate changelogs and automate releases.

  • The commit message tag wasn't recognized. Did you mean "docs", "fix", or "feat"?
  • There should be a space following the initial tag and colon, for example 'feat: Message'.
  • The first letter of the tag should be in lowercase

To Fix: You can fix this problem by clicking 'Edit' next to the pull request title at the top of this page.

Read more about contributing to ESLint here

Copilot AI changed the title [WIP] Add tracking for CSS custom properties in SourceCode feat: track CSS custom properties on CSSSourceCode Mar 27, 2026
Copilot AI requested a review from nzakas March 27, 2026 21:07
* @param {Function} visitor The visitor function to call for each node.
* @returns {void}
*/
function walkAST(node, visitor) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@copilot the rule itself is doing a depth-first traversal of the AST. Doing it again is inefficient. Remove the extra traversal and use the rule methods to do any traversing that is necessary.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Removed the walkAST function and StyleSheet() visitor. The vars map is now populated incrementally in "Rule > Block Declaration:exit" as the rule traverses. Hoisting is handled by sourceCode.getClosestVariableValue() which has access to all declarations collected during CSSSourceCode.traverse(). Commit: 63d930c

…le visitor methods instead

Agent-Logs-Url: https://github.com/eslint/css/sessions/fa674c27-bfb3-46b4-8c86-407a2fef55c5

Co-authored-by: nzakas <38546+nzakas@users.noreply.github.com>
Copilot AI requested a review from nzakas March 30, 2026 20:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Needs Triage

Development

Successfully merging this pull request may close these issues.

Change Request: Track variables on SourceCode

2 participants