Mozilla had -moz- prefix, but called it :-moz-placeholder. Can you change placeholder-shown.js to use different name on -moz-?

https://caniuse.com/css-placeholder-shown

Mozilla had -moz- prefix, but called it :-moz-placeholder. Can you change placeholder-shown.js to use different name on -moz-?

https://caniuse.com/css-placeholder-shown

Thank you for nice review and checking!
I changed the code to use :-moz-placeholder instead of :-moz-placeholder-shown.
In addition, updated the PR title and description.

Thanks. Released in 10.4.21.

Keep in mind that this change effectively breaks it in Firefox (at least for v136@macOS) within the following constellation:
input:not(:-moz-placeholder) {}, while 10.4.20 will keep you afloat with input:not(:-moz-placeholder-shown) {}

@pooledge can you explain better the problem? Input, output, expected CSS.

Input (Svelte scoped SCSS):

div {
    :global(input) {
        &:not(:placeholder-shown),
        &:focus {
            /* part 1 */
            :global(~ label) { /* part 2 */ }
        }
    }
}

Output v10.4.21 (won't apply for Firefox v136 on mac):

div input:not(:-moz-placeholder) {
  /* part 1 */
}
div input:not(:placeholder-shown), div input:focus {
  /* part 1 */
}
div input:not(:-moz-placeholder) ~ label {
  /* part 2 */
}
div input:not(:placeholder-shown) ~ label, div input:focus ~ label {
  /* part 2 */
}

Output v10.4.20 (works well in all browsers):

div input:not(:-moz-placeholder-shown) {
  /* part 1 */
}
div input:not(:placeholder-shown), div input:focus {
  /* part 1 */
}
div input:not(:-moz-placeholder-shown) ~ label {
  /* part 2 */
}
div input:not(:placeholder-shown) ~ label, div input:focus ~ label {
  /* part 2 */
}

Edit: parts were displaced while creating minimum reproducible, sorry

Output v10.4.20 (works well in all browsers):

Why it works well? div input:not(:-moz-placeholder-shown) is always true on any browser.

That's a good question. While the documentation on this looks pretty comprehensive, reality is different, as e.g. this one was build with < v10.4.21

@pooledge maybe it was a feature based on bug behavior?

I have checked the behavior in FireFox Browser.

    <main>
      <form class="flex flex-col p-4 w-60">
        <label for="name">Full Name:</label>
        <input id="name" name="name" type="text" />

        <label for="email">Email Address:</label>
        <input
          id="email"
          name="email"
          type="email"
          placeholder="name@example.com"
        />

        <label for="age">Your age:</label>
        <input
          id="age"
          name="age"
          type="number"
          placeholder="You must be 18+"
        />
      </form>
    </main>

✅:-placeholder-shown working

input:not(:placeholder-shown) {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

:-placeholder-shown only apply input which has placeholder.

❌:-moz-placeholder working but different behavior

input:not(:-moz-placeholder) {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

input:not(:-moz-placeholder) affects the all input field unfortunately.

✅:-moz-placeholder-shown not working

input:not(:-moz-placeholder-shown) {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

FireFox doesn't recognize :-moz-placeholder-shown property because it doesn't exist.

In conclusion, it might be FireFox browser issue.

It works because

div input:not(:-moz-placeholder-shown) is always true on any browser.

..and this is how the non-prefixed styling declaration wins, while with :-moz-placeholder it doesn't, since it's a valid selector just like the documentation states. The problem is now a Firefox bug, which makes :-moz-placeholder and :placeholder-shown work differently, whereas autoprefixer assumes it works exactly the same and prefixes blindly.

I wish /*! autoprefixer: off */ would work in this case, but it doesn't for me at least in Svelte, though it's a different issue.

Update on /*! autoprefixer: off */: since it's a :global() the only option to apply the comment is to place it in the style root of the component, e.g.:

<style lang="scss">
    /*! autoprefixer: off */
    div { /*...*/ }
</style>