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

feat: add selector support to require-baseline #61

Merged
merged 4 commits into from
Feb 25, 2025

Conversation

rviscomi
Copy link
Contributor

@rviscomi rviscomi commented Feb 22, 2025

Prerequisites checklist

What is the purpose of this pull request?

Add support for validating the Baseline status of selectors like :has()

What changes did you make? (Give an overview)

  • added a new Selector handler that checks the validity of all child nodes
  • added tests for pseudo-class and pseudo-element selectors
  • updated docs

Related Issues

Fixes #60

Is there anything you'd like reviewers to focus on?

Copy link

linux-foundation-easycla bot commented Feb 22, 2025

CLA Signed

The committers listed above are authorized under a signed CLA.

@rviscomi rviscomi changed the title feat: add selector support feat: add selector support to require-baseline Feb 22, 2025
@rviscomi
Copy link
Contributor Author

rviscomi commented Feb 22, 2025

I wasn't sure how to handle selectors used within @supports. It seems like CSSTree always parses them as raw text rather than FeatureFunction as suggested in the docs.

Example CSS:

@supports selector(.example) {}

AST:

{
  "type": "Function",
  "loc": {
    "source": "<unknown>",
    "start": {
      "offset": 10,
      "line": 1,
      "column": 11
    },
    "end": {
      "offset": 28,
      "line": 1,
      "column": 29
    }
  },
  "name": "selector",
  "children": [
    {
      "type": "Raw",
      "loc": {
        "source": "<unknown>",
        "start": {
          "offset": 19,
          "line": 1,
          "column": 20
        },
        "end": {
          "offset": 27,
          "line": 1,
          "column": 28
        }
      },
      "value": ".example"
    }
  ]
}

https://astexplorer.net/#/gist/244e2fb4da940df52bf0f4b94277db44/ff8f2e9e7ca35af89743f13ae98f37a69e501e9d

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

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

Thanks for getting this started. The basics are here, there are a couple of edge cases that need addressing.

@rviscomi rviscomi requested a review from nzakas February 24, 2025 19:04
@nzakas
Copy link
Member

nzakas commented Feb 25, 2025

This is looking really good. I think the last step here is to update the docs with some examples that use @supports.

@rviscomi
Copy link
Contributor Author

Great thanks, added another example to the docs.

Copy link
Member

@nzakas nzakas left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks so much for this. Great work.

@nzakas nzakas merged commit 9c7fd6a into eslint:main Feb 25, 2025
22 checks passed
@rviscomi rviscomi deleted the selectors branch February 25, 2025 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: :has() not flagged with Baseline Widely available config
2 participants