placeholder-shown selector should not be merged

[agka]

CSSO automatically merges blocks with identical properties even when :placeholder-shown, :-ms-input-placeholder, :-moz-placeholder-shown are used as selectors.

Those vendor prefixed selectors are typically generated by autoprefixer (cf postcss/autoprefixer#1311 )

But actually browsers ignores the blocks when a unrecognized selector is present.

Faulty behaviour encountered on

• chromium 81.0.4044.138 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
• mozilla firefox 76.0.1 (64bit) for ubuntu

For example, given two text inputs with different ids

#input1:placeholder-shown {
  background-color: green; /* applied */
}

#input1:-ms-input-placeholder {
  background-color: green;
}

#input2:placeholder-shown, #input2:-ms-input-placeholder {
  background-color: green; /* ignored */
}

related codepen : https://codepen.io/agka/pen/vYNMeBq

Possibly related to #383

Known workaround is to set restructure to false but it kinda defeats the purpose of the optimizer

[sidonaldson]

This is the same issue as h383

I have come across the same bug. This is actually pretty big tbh and should prevent people using this lib. Have commented in the other issue.

[lahmatiy]

I believe it fixed in ba7952c and will be shipped in next version.

[agka]

Actually, not quite when you use :not() :-/

// csso 4.1.0
const csso = require("csso");


const dummyCss1 = `
    .cc-expiry-month:-moz-placeholder-shown {
      width: 42px; }

    .cc-expiry-month:-ms-input-placeholder {
      width: 42px; }

    .cc-expiry-month:placeholder-shown {
      width: 42px; }
`;

console.log(csso.minify(dummyCss1).css);
// as expected :
// .cc-expiry-month:-moz-placeholder-shown{width:42px}.cc-expiry-month:-ms-input-placeholder{width:42px}.cc-expiry-month:placeholder-shown{width:42px}


const dummyCss2 = `
    .cc-expiry-month:not(:-moz-placeholder-shown) {
      width: 42px; }

    .cc-expiry-month:not(:-ms-input-placeholder) {
      width: 42px; }

    .cc-expiry-month:not(:placeholder-shown) {
      width: 42px; }
`;

console.log(csso.minify(dummyCss2).css);
// wrongly outputs
// .cc-expiry-month:not(:-moz-placeholder-shown),.cc-expiry-month:not(:-ms-input-placeholder),.cc-expiry-month:not(:placeholder-shown){width:42px}

Should I create a new issue ?

[zvuc]

I was going nuts why the :not(:placeholder-shown) was not working in my code and came across this issue. Is there a workaround for this I can use now? :(

[lahmatiy]

@agka Thank you for the report, I've created an issue – #450

[pagelab]

Any news on this?