Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Sep 1, 2025

This PR implements comprehensive CSS attribute selector support in the CSSOM engine, enabling parsing and matching of selectors like link[rel="modulepreload"] as requested in the issue.

Changes Made

Parser Implementation

  • Added ComponentType::kAttribute enum value for attribute selectors
  • Added AttributeMatchType enum supporting all CSS attribute selector operators:
    • [attr] - attribute existence
    • [attr="value"] - exact match
    • [attr^="prefix"] - prefix match
    • [attr$="suffix"] - suffix match
    • [attr*="substring"] - substring match
    • [attr~="word"] - whitespace-separated word match
    • [attr|="prefix"] - dash-separated prefix match
  • Extended Component class with attribute-specific fields and accessor methods
  • Implemented parseAttributeSelector() method with proper handling of quoted/unquoted values and escape sequences

Matcher Implementation

  • Added attribute matching logic in matchesSelectorComponentNonCombinator()
  • Implemented all attribute match types according to CSS specification
  • Added proper whitespace and dash-prefix matching algorithms

Test Coverage

  • Comprehensive test suite covering all attribute selector variations
  • Specific tests for the requested link[rel="modulepreload"] example
  • Edge cases including spaces, quotes, compound selectors, and unquoted values
  • String representation tests ensuring proper CSS serialization

Example Usage

The implementation now supports selectors like:

/* Resource hints - the main use case from the issue */
link[rel="modulepreload"] { /* styles */ }
link[rel="preload"] { /* styles */ }

/* Form styling */
input[type="text"] { /* styles */ }
input[disabled] { /* styles */ }

/* URL-based styling */
a[href^="https"] { /* styles */ }
img[src$=".jpg"] { /* styles */ }

/* Class-based matching */
div[class*="highlight"] { /* styles */ }
p[class~="button"] { /* styles */ }

/* Language attributes */
html[lang|="en"] { /* styles */ }

This enables advanced CSS features for resource hints, form styling, accessibility improvements, and progressive enhancement patterns.

Fixes #270.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
Copilot AI changed the title [WIP] Support CSS attribute selectors in src/client/cssom (e.g. link[rel="modulepreload"]): parsing & matching Implement CSS attribute selector support in CSSOM parser and matcher Sep 1, 2025
Copilot AI requested a review from yorkie September 1, 2025 07:02
@yorkie yorkie marked this pull request as ready for review September 1, 2025 07:51
@yorkie yorkie merged commit 69344ad into main Sep 1, 2025
4 checks passed
@yorkie yorkie deleted the copilot/fix-270 branch September 1, 2025 07:55
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.

Support CSS attribute selectors in src/client/cssom (e.g. link[rel="modulepreload"]): parsing & matching

2 participants