WordPress Gutenberg Block Library CSS incorrect validation

[umangbhanvadia-multidots]

URL being validated or code to reproduce error:

h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}

.wp-lightbox-overlay .close-button{align-items:center;cursor:pointer;display:flex;justify-content:center;min-height:40px;min-width:40px;padding:0;position:absolute;right:calc(env(safe-area-inset-right) + 16px);top:calc(env(safe-area-inset-top) + 16px);z-index:5000000}

.wp-block-navigation__responsive-container.is-menu-open{animation:overlay-menu__fade-in-animation .1s ease-out;animation-fill-mode:forwards;background-color:inherit;display:flex;flex-direction:column;overflow:auto;padding:clamp(1rem,var(--wp--style--root--padding-top),20rem) clamp(1rem,var(--wp--style--root--padding-right),20rem) clamp(1rem,var(--wp--style--root--padding-bottom),20rem) clamp(1rem,var(--wp--style--root--padding-left),20em);z-index:100000}

p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}`

paste error messages into code block

[nschonni]

You don't say what the problem is, but I tried to look at it because I was currious. I think there are bad uses of :where. I tried using prettier just to make it more readable, but it also can't parse this CSS. Might be something in the minification process that's removing spaces or something else that is making this invalid

[umangbhanvadia-multidots]

Hello @nschonni,

Sorry for the inconvenience. Actually I have attached the CSS which are exists in the core file of WordPress framework and while we check the site in the NU HTML Checker tool, We face these errors. I am mentioning the CSS related errors which we are facing.

Errors:

• Error: CSS: rotate: Property rotate doesn't exist.
• Error: CSS: right: Parse Error.
• Error: CSS: top: Parse Error.
• Error: CSS: padding: The types are incompatible.

Please share your feedback regarding this.

[ylafon]

The padding issue, related to variables handling in clamp() has been fixed upstream. See https://github.com/w3c/css-validator/issues/412 rotate, CSS Transform Module 2 in general, is not implemented yet.