Ignore all webkit, ms and Mozilla specific pseudo elements

[silaslenz]

What:

Adds -webkit-scrollbar-button, -webkit-scrollbar-thumb and webkit-scrollbar-track to ignored vendor prefixes, similar to #2920, #2393 and #2149. Fixes #3111.

Why:

These errors appear in non-webkit-browsers (Firefox) when using these webkit specific pseudo-elements.

These are only the ones we specifically use, I don't know if we want to add a more comprehensive list, or perhaps do a filter like :(-webkit-:.*|-moz-.*|-ms-.*){ (though that may risk introducing false positives?)?

How:

The existing regex was extended.

Checklist:

• Documentation (N/A ; there does not seem to exist any documentation on this)
• Tests (N/A ; there seem to be no existing tests for this, and I'm not sure how to properly test this in the first place. I've manually tested this in Firefox)
• Code complete
• Changeset

[changeset-bot]

🦋 Changeset detected

Latest commit: 98b889a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/sheet	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 98b889a:

Sandbox	Source
Emotion	Configuration

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (b0014b4) 95.07% compared to head (98b889a) 95.07%.

Additional details and impacted files

Files	Coverage Δ
packages/sheet/src/index.js	100.00% <100.00%> (ø)

[Andarist]

These are only the ones we specifically use, I don't know if we want to add a more comprehensive list, or perhaps do a filter like :(-webkit-:.|-moz-.|-ms-.*){ (though that may risk introducing false positives?)?

Those are known to be vendor-prefixed though so perhaps this would just cover everything automatically without a huge risk of false positives?

[silaslenz]

These are only the ones we specifically use, I don't know if we want to add a more comprehensive list, or perhaps do a filter like :(-webkit-:.|-moz-.|-ms-.*){ (though that may risk introducing false positives?)?

Those are known to be vendor-prefixed though so perhaps this would just cover everything automatically without a huge risk of false positives?

Sounds reasonable to me, though I may not have enough CSS/emotion knowledge to make that judgement. Do you want me to update the PR to use that filter instead?

[silaslenz]

I've changed the PR to use the more generic regex. Here is an example to show that all three types of vendor-prefixes are still caught:

(source https://regex101.com/r/oOCpFp/1)