w3c / css-validator

W3C CSS Validation Service
https://jigsaw.w3.org/css-validator/
Other
205 stars 107 forks source link

Possible false validation error "Property d doesn't exist." #403

Open oldrup opened 1 year ago

oldrup commented 1 year ago

Hey!

I was attempting to validate the following CSS but recieved an error.

image

Been discussing it with the developer, and they are pretty sure it in fact is valid CSS.

Possible relevant info on the path d property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

It's also been tested on a lot of different devices, working fine.

Can this possible be a false positve by the CSS validation?

`/**

[data-color-mode=updating] :not(.ct-color-switch *) { transition: none !important; }

[data-color-mode=dark] [data-color-switch=normal],[data-color-mode=light] [data-color-switch=reversed] { --is-toggled: var(--true); --is-light-mode-visible: none; --is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z"); }

[data-color-mode=dark] [data-color-switch=reversed],[data-color-mode=light] [data-color-switch=normal] { --is-toggled: var(--false); --is-dark-mode-visible: none; }

@media(prefers-color-scheme: dark) { [data-color-mode=os-default] [data-color-switch=normal] { --is-toggled: var(--true); --is-light-mode-visible: none; --is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z"); }

[data-color-mode=os-default] [data-color-switch=reversed] { --is-toggled: var(--false); --is-dark-mode-visible: none; } }

@media(prefers-color-scheme: light) { [data-color-mode=os-default] [data-color-switch=normal] { --is-toggled: var(--false); --is-dark-mode-visible: none; }

[data-color-mode=os-default] [data-color-switch=reversed] { --is-toggled: var(--true); --is-light-mode-visible: none; --is-toggled-path: path("M-9 3h25a1 1 0 0017 13v30H0Z"); } }

.ct-color-switch { --animation-duration: 300ms; }

.ct-color-switch .ct-dark-mode-label { display: var(--is-dark-mode-visible, block); }

.ct-color-switch .ct-light-mode-label { display: var(--is-light-mode-visible, block); }

.ct-color-switch .ct-switch-type-expand :first-child path { d: var(--is-toggled-path, path("M0-11h25a1 1 0 0017 13v30H0Z")); transition-delay: var(--is-toggled, calc(var(--animation-duration) * 0.4)); transition-timing-function: var(--is-toggled, cubic-bezier(0, 0, 0, 1.25)); }

.ct-color-switch .ct-switch-type-expand g path { transform: var(--is-toggled, scale(0.75)); transition-delay: var(--is-toggled, 0s); }

.ct-color-switch .ct-switch-type-expand g circle { transform: var(--is-toggled, scale(1.4)); transition-delay: var(--is-toggled, 0s); }

.ct-color-switch .ct-switch-type-within .ct-switch-type-within__circle { transform: var(--is-toggled, scale(1.5)); }

.ct-color-switch .ct-switch-type-within .ct-switch-type-within__inner { transform: var(--is-toggled, translate3d(3px, -3px, 0) scale(1.2)); }

.ct-color-switch .ct-switch-type-within g path { transform: var(--is-toggled, scale(0.65)); }

.ct-color-switch .ct-switch-type-dark-inner :first-child { transform: var(--is-toggled, rotate(180deg)); }

.ct-color-switch .ct-switch-type-dark-inner :last-child { transform: var(--is-toggled, rotate(-180deg)); }

.ct-color-switch .ct-switch-type-expand :first-child path { transition-property: transform,d; transition-duration: calc(var(--animation-duration)*.6); transition-timing-function: cubic-bezier(0, 0, 0.5, 1); }

.ct-color-switch .ct-switch-type-expand g path,.ct-color-switch .ct-switch-type-expand g circle { transform-origin: center; transition: transform calc(var(--animation-duration).65) cubic-bezier(0, 0, 0, 1.25) calc(var(--animation-duration).35); }

.ct-color-switch .ct-switch-type-within * { transform-origin: center; transition: transform calc(var(--animation-duration)) cubic-bezier(0, 0, 0, 1.25); }

.ct-color-switch .ct-switch-type-dark-inner path { transform-origin: center; transition: transform var(--animation-duration) ease; }

@supports not (d: path("")) { .ct-color-switch .ct-switch-type-expand :first-child path { transform: var(--is-toggled, translate3d(-9px, 14px, 0)); } }`

ylafon commented 3 months ago

SVG support is currently for SVG 1.1, this is a feature of SVG2, now that support seems to be wide enough, the validator should implement it.