CSS-test flags newer and valid lines as problems

krompaco commented 6 days ago

Feature/improvement

This is a valid way of setting an empty value --tw-pan-x: ;.

.. but actually writing an empty value into a custom property, like --foo: ;, is a valid (empty) value

https://www.w3.org/TR/css-variables-1/#syntax

Running CSS-test in Docker with this version info:

cat package.json
{
  "name": "webperf_core",
  "version": "2024.11.3",
  "description": "You probably want to read the documentation available at homepage.",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "homepage": "https://github.com/Webperf-se/webperf_core/",
  "dependencies": {
    "lighthouse": "12.2.1",
    "pa11y": "8.0.0",
    "sitespeed.io": "35.3.1",
    "vnu-jar": "23.4.11",
    "yellowlabtools": "3.0.1"
  },
  "engines": {
    "node": "20.x"
  }
}

Results:

/usr/src/runner$ python3 default.py -t 7 -u https://liramera.se -r
..
- CSS: “--tw-pan-x”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-pan-y”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-pinch-zoom”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-gradient-from-position”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-gradient-via-position”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-gradient-to-position”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-ordinal”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-slashed-zero”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-numeric-figure”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-numeric-spacing”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-numeric-fraction”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-ring-inset”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-blur”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-brightness”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-contrast”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-grayscale”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-hue-rotate”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-invert”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-saturate”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-sepia”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-drop-shadow”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-blur”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-brightness”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-contrast”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-grayscale”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-hue-rotate”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-invert”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-opacity”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-saturate”: Parse Error. (number of errors of this type: 1)
- CSS: “--tw-backdrop-sepia”: Parse Error. (number of errors of this type: 1)

CSS-file that get these errors: https://liramera.se/dist/styles.css?v=gh-issue

This is also discussed here: https://github.com/tailwindlabs/tailwindcss/discussions/8150

And here: https://github.com/w3c/css-validator/issues/405 - Seems to have led to this fix: https://github.com/w3c/css-validator/commit/9a54c0d93534d3a6d3415fff297d67fd5fcf91d1 Not sure in which release this would go to?

Other newer directives and techniques that are also flagged

https://github.com/w3c/css-validator/issues/423 - container-type: inline-size - https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
.. append more examples in this issue's comments

marcuslindblom commented 5 days ago

Another issue is the @layer which is baseline but not recognized by the validator.

Also discussed here: https://github.com/w3c/css-validator/issues/410

I will add an example later to this comment

perlan commented 4 days ago

This comment describes the css-issues KTH has with the current css-test as of 2024-10-05:

Public address to the site where the errors occurs: https://www.kth.se/
Validator link for https://www.kth.se/: https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.kth.se%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en
List of errors that occures: Unrecognized at-rule @layer revert-layer is not a all value : revert-layer Value Error : margin revert-layer is not a margin value : revert-layer etc.
- Motivation: @layer och revert-layer are not recognized by the validator but they are valid according to MDN
- Link to MDN Web CSS Reference that describes the errors: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer
- List any existing issues for the errors: https://github.com/w3c/css-validator/issues/410 I have not found any matching issues for revert-layer

Running python default.py -u https://www.kth.se -t 7 -r --setting details=true gives the following results when using the main branch of webperf core with commit 05cf8301c9e39549e500ff2ebc450fb31dfe3c8f:

###############################################
# Testing website https://www.kth.se

## Test: 7 - CSS

Started: 2024-11-08 22:22:24
Finished: 2024-11-08 22:22:49

### Rating: 
- Overall: 4.44
- Standards: 4.44

### Review:

#### Overall:
- The CSS is good.
#### Standards:
- `<link rel="stylesheet">` in: #1: Webpage , number of grouped error type: 4 ( 4.20 rating )
- `<link rel="stylesheet">` in: #1: Webpage , number of errors: 30 ( 2.00 rating )
  - CSS: Unrecognized at-rule “@layer” (number of errors of this type: 12)
  - CSS: “margin”: “revert-layer” is not a “margin” value. (number of errors of this type: 3)
  - CSS: Parse Error. (number of errors of this type: 2)
  - CSS: “margin-bottom”: “revert-layer” is not a “margin-bottom” value. (number of errors of this type: 2)
  - CSS: “line-height”: “revert-layer” is not a “line-height” value. (number of errors of this type: 2)
  - CSS: “--bs-dropdown-box-shadow”: Parse Error. (number of errors of this type: 1)
  - CSS: “all”: “revert-layer” is not a “all” value. (number of errors of this type: 1)
  - CSS: “display”: “revert-layer” is not a “display” value. (number of errors of this type: 1)
  - CSS: “margin-top”: “revert-layer” is not a “margin-top” value. (number of errors of this type: 1)
  - CSS: “font-weight”: “revert-layer” is not a “font-weight” value. (number of errors of this type: 1)
  - CSS: “font-size”: “revert-layer” is not a “font-size” value. (number of errors of this type: 1)
  - CSS: “padding”: “revert-layer” is not a “padding” value. (number of errors of this type: 1)
  - CSS: “grid-template-columns”: “revert-layer” is not a “grid-template-columns” value. (number of errors of this type: 1)
  - CSS: “grid-gap”: “revert-layer” is not a “gap” value. (number of errors of this type: 1)
- `content-type=".*css.*"` in: #20: index.7aad2bf9., number of grouped error type: 2 ( 4.60 rating )
- `content-type=".*css.*"` in: #20: index.7aad2bf9., number of errors: 3 ( 4.70 rating )
  - CSS: “rotate”: Property “rotate” doesn't exist. (number of errors of this type: 2)
  - CSS: Unrecognized at-rule “@layer” (number of errors of this type: 1)

Note that the webpref core test also complain about the rotate property but that error is not present when running the validator directly.

Webperf-se / webperf_core

CSS-test flags newer and valid lines as problems #706

Feature/improvement

Other newer directives and techniques that are also flagged