Fails validation in "W3C CSS Validator"

terokarvinen commented 1 month ago

Current Behavior

Latest release 2.0.6 [1] fails CSS validation [2].

Both pico.css and pico.min.css show error in W3C CSS Validator. The error lines are long.

pico.min.css: 4.The error starts with: "Parse Error selector(:has(*)){[role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),[role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-button)}[role=group]"

pico.css: 2266. The error starts with: "Parse Error selector(:has(*)) { [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus), [role=group]:has(button:focus, [type=submit]:focus,"

Expected Behavior

I would expect pico.css to be valid CSS and pass W3C CSS validation.

If this error in CSS validation is expected, it should be documented.

Reproduction URL

Download pico 2.0.6 [1]. Extract zip.
Navigate to https://jigsaw.w3.org/css-validator/#validate_by_upload
Upload pico.min.css. => 1 error shown.
Upload pico.css. => 1 error shown.

Environment

Pico 2.0.6 [1]. W3C CSS Validator [2].

[1] https://github.com/picocss/pico/archive/refs/tags/v2.0.6.zip

[2 ] https://jigsaw.w3.org/css-validator/validator

ps. Thanks for making PicoCSS!

Manuel-Steinberg commented 1 month ago

Hey @terokarvinen ,

I looked into this out of curiosity, and it seems the W3C validator currently supports up to CSS Level 3 + SVG, which explains why you're seeing an error with the :has() pseudo-class.

The :has() selector is part of Selectors Level 4, a newer specification that’s not yet fully supported by the W3C validator. Until the W3C validator is updated, it will continue to flag this as an error I guess.

terokarvinen commented 1 month ago

Hi @Manuel-Steinberg,

It seems that Selectors Level 4 is a "Working Draft".

The draft itself says: "This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. "

On the other hand, Mozilla Developer Network page on :has() considers it "Newly available", "Since December 2023, this feature works across the latest devices and browser versions."

I would expect PicoCSS to be based on widely accepted standards. It's also quite inconvenient to have a list of acceptable errors in validators when working on a site.

I would prefer a version that does not cause errors in W3C CSS Validator. Obviously, this depends on how widely :has() and similar are used in PicoCSS.

If it's not possible (or sensible) to make PicoCSS pass validator, this should be documented.

picocss / pico