10.4.13 onwards - not using vendor prefix when Electron needs it?

[alicegherbison]

package.json:

"electron": "22.3.27",
"autoprefixer": "10.4.19",

.browserslist.rc:

[production]
defaults

not IE 11
not IE_Mob 11
not baidu >= 0
not kaios >= 0
not op_mini >= 0
not op_mob >= 0
not and_qq >= 0

not safari <= 12

[development]

last 3 Chrome versions
last 3 Firefox versions

[electron]

last 1 Electron versions

This issue is not present on autoprefixer 10.4.12 and below.

Input SCSS:

&::before {
    mask-image: url("public/svg/search.svg");
    mask-repeat: no-repeat;
    mask-position: center center;
}

Output CSS (all three non-prefixed properties are struck through and 'unknown' - Electron does not recognise them):

::before {
    mask-image: url("public/svg/search.svg");
    mask-repeat: no-repeat;
    mask-position: center center;
}

Expected output CSS (as in 10.4.12) (with non-prefixed properties struck through and 'unknown'):

::before {
   -webkit-mask-image: url(f9705ff….svg);
   mask-image: url(f9705ff….svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center center;
   mask-position: center center;

The result is the SVG-shaped mask is not applied in Electron as the non-vendor-prefixed properties are not recognised and the vendor versions are not provided; all that shows is the background colour. Is this issue to be expected? Any help much appreciated.

[ai]

Hi. Very likely that Autoprefixer update triggers caniuse-lite and electron-to-chromium update and new version is not require -webkit-.

As we can see Chrome ≥120 doesn’t need -webkit- for masks https://caniuse.com/css-masks

And Electron ≥28 uses Chromium ≥120 and should work without -webkit- https://github.com/Kilian/electron-to-chromium/blob/master/versions.js#L145-L150

What Electron do you use to test?

[alicegherbison]

That makes sense, thank you. It's Electron 22.3.27 - we're currently bound to that version due to other dependency requirements. What would be the best approach? Downgrade to 10.4.12 until we can get Electron to 28?

[ai]

Downgrade to 10.4.12

Nope. It will not have since you already updated caniuse-lite and electron-to-chromium.

With new browsers database any Autoprefixer will do the same.

What would be the best approach?

You should the power of Browserslist config and define your requirements there (and then all tools will know that you need to support Electron 22.3.27, and new developers will know where to look).

Create .browserslistrc with, for instance, content:

Electron >=22.3.27

You can find what queries you have to define your target browser policies here: https://browsersl.ist/

Also that website can be useful to debug your Browserslist config: https://browsersl.ist/#q=Electron+%3E%3D22.3.27

[alicegherbison]

Thank you very much for your help - will do that.