Jetpack: CSS Tidy: improve modern CSS support for properties such as mask and scroll

[lancewillett]

In https://github.com/Automattic/jetpack/pull/2123 we added flexbox support. Let's continue supporting properties that users ask for from time to time.

New properties for mask:

mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-composite

​https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Context — The property is used for certain styles in Gutenberg, like the image block style that lets you make an image appear rounded. Whitelisting the property would help users make modifications to the styles. Reported by WordPress.com HEs in 8202-wpcom

New properties for scroll:

(There are quite a few!)

scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Context — This property allows page jumps to scroll smoothly, as some themes like Pique out of the box, via CSS rather than a more complicated JavaScript solution. Requested by WordPress.com HEs at 8188-wpcom

[nielslange]

I'm happy to work on this issue and craft a PR for it. 😀

[kathrynwp]

Could we also please add:

object-fit

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Thank you!

[lancewillett]

Thank you, @kathrynwp