Support for `filter` CSS propery

[milindmore22]

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

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

[westonruter]

This seems to work? In the AMP plugin which uses the CSS parser, I tried adding it to a Custom HTML block with the selector body and the above properties and it came through as:

body {
	filter: url("filters.svg#filter-id");
	filter: blur(5px);
	filter: brightness(.4);
	filter: contrast(200%);
	filter: drop-shadow(16px 16px 20px blue);
	filter: grayscale(50%);
	filter: hue-rotate(90deg);
	filter: invert(75%);
	filter: opacity(25%);
	filter: saturate(30%);
	filter: sepia(60%);
	filter: contrast(175%) brightness(3%);
	filter: none;
	filter: inherit;
	filter: initial;
	filter: revert;
	filter: unset;
}

@milindmore22 So what isn't working?

[sabberworm]

Thanks @westonruter for investigating

[milindmore22]

@westonruter

The issue was reported by a user on support forums, I think it may be related to #329 the user was using rgb() CSS function in the filter.

.drop-shadow {
   filter: drop-shadow(3px 3px 3px rgb(0 0 0 / 0.1));		
}

[matzeeable]

Hey @sabberworm !

I encounter the same issue with one of our WordPress themes, when we try to parse the following CSS (truncated to a minimum):

:root {
	--tcb-skin-color-0: hsla(var(--tcb-theme-main-master-h,2), var(--tcb-theme-main-master-s,84%), var(--tcb-theme-main-master-l,64%), var(--tcb-theme-main-master-a,1));
	--tcb-skin-color-26: hsla(calc(var(--tcb-theme-main-master-h,2) + 1 ), calc(var(--tcb-theme-main-master-s,84%) - 0% ), calc(var(--tcb-theme-main-master-l,64%) - 0% ), 0.12);
}

When parsing the document with PHP CSS Parser and print it again, we get the following:

:root {
	--tcb-skin-color-0: hsla(var(--tcb-theme-main-master-h,2), var(--tcb-theme-main-master-s,84%), var(--tcb-theme-main-master-l,64%), var(--tcb-theme-main-master-a,1));
}

The second variable just gets purged and never printed again. I do not know exactly why, but I did some tests and I think the issue is the nested calc variable. I think a great solution would be to introduce a "loose" mode, which holds a value which cannot be identified or parsed but print it again as-is.

What do you think?

[BRUDERKOPF]

We encounter the same issue as @matzeeable.

Your help would be appreciated.