postcss / autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use
https://twitter.com/autoprefixer
MIT License
21.58k stars 1.25k forks source link

Added blocker -moz- for ::file-selector-button #1421

Closed usmanyunusov closed 2 years ago

ai commented 2 years ago

We also need to change tests.

We need a TDD here:

  1. Revert fix
  2. Find a way to reproduce bug in the tests
  3. Add a fix to be sure that it fix the bug

You may need to use another browsers in the test.

usmanyunusov commented 2 years ago

@ai, Replaced the test:

let fileSelectorButtoner = autoprefixer({
  overrideBrowserslist: ['Chrome > 25', 'Firefox >= 82']
})

Test fail:

@@ -1,22 +1,34 @@
  ::-webkit-file-upload-button {
    background: black
  }

+ ::-moz-file-selector-button {
+   background: black
+ }
+
  ::file-selector-button {
    background: black
  }

  input::-webkit-file-upload-button {
    color: black;
  }

- input::file-selector-button {
+ input::-moz-file-selector-button {
    color: black;
  }

- input:hover::-webkit-file-upload-button {
+ input::file-selector-button {
+   color: black;
+ }
+
+ input:hover::-webkit-file-upload-button {
+   color: white;
+ }
+
+ input:hover::-moz-file-selector-button {
    color: white;
  }

  input:hover::file-selector-button {
    color: white;
ai commented 2 years ago

Send test changes to PR

usmanyunusov commented 2 years ago

I suggest replacing all prefixes with a -webkit-

class FileSelectorButton extends Selector {
 constructor(name, prefixes, all) {
    super(name, prefixes, all)

    if (this.prefixes) {
      this.prefixes = utils.uniq(
        this.prefixes.map(i => {
          return '-webkit-'
        })
      )
    }
  }
ai commented 2 years ago

Yeap, let’s try.

ai commented 2 years ago

The fix was released in 10.3.3