Contents of the :is and :where pseudo-class functions is not optimized

[pepelsbey]

I’m using CSSO via postcss-csso v6.0.0 that uses csso 5.0.1, but the same applies when I run my code via the online version with v5.0.4.

Here’s the code after compression, you can clearly see the untouched parts inside of the :is:

.header__button{position:relative;z-index:2}.header__button[aria-expanded=false] :is(
    .header__icon-close,
    .header__text-close
),.header__button[aria-expanded=true] :is(
    .header__icon-menu,
    .header__text-menu
){display:none}.header__link{display:inline-block;border-radius:50%;color:var(--color-text-primary)}

Code before compression

/* Button */

.header__button {
    position: relative;
    z-index: 2;
}

.header__button[aria-expanded='false'] :is(
    .header__icon-close,
    .header__text-close
) {
    display: none;
}

.header__button[aria-expanded='true'] :is(
    .header__icon-menu,
    .header__text-menu
) {
    display: none;
}

/* Link */

.header__link {
    display: inline-block;
    border-radius: 50%;
    color: var(--color-text-primary);
}

The same happens with :where, but :not content gets optimized.

How it looks If you replace :is with :not:

.header__button{position:relative;z-index:2}.header__button[aria-expanded=false] :not(.header__icon-close,.header__text-close),.header__button[aria-expanded=true] :not(.header__icon-menu,.header__text-menu){display:none}.header__link{display:inline-block;border-radius:50%;color:var(--color-text-primary)}

I see :is and :where mentioned in v5.0.0 release notes as supported, but probably not fully supported.

[lahmatiy]

Thank you for the issue! Used old version of CSSTree which parses a content of :is()/:where() as a single block. That's not a problem for a specificity computation, but a problem for optimisations. CSSTree was bumped to the latest version v2.2.0. It should fix the issue. Please, upgrade to CSSO v5.0.5.

[pepelsbey]

@lahmatiy thank you for the fix! Do you mind updating the postcss-csso plugin’s deps? It still uses v5.0.1. It’s very convenient to use CSSO as one of the PostCSS plugins.

[lahmatiy]

@pepelsbey You can re-install postcss-csso (or upgrade csso directly), and npm will install latest csso since postcss-csso v6.0.0 used to use ^5.0.1. However, for convenience I've just published postcss-csso v.6.0.1 with csso: ^5.0.5 on board.