Support for `filter` CSS propery

milindmore22 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Thanks @westonruter for investigating

milindmore22 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

We encounter the same issue as @matzeeable.

Your help would be appreciated.

MyIntervals / PHP-CSS-Parser

Support for `filter` CSS propery #328