From 8f8cbe9145b9518fa312a5d3e9613d0e4a289d99 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Mon, 20 Feb 2017 14:31:26 +0000
Subject: [PATCH] Make generic placeholder pseudo-class browser-prefix mixin

Change-Id: I96686bb53cee1a833db8f4d0b691d5e4a1b82885
---
 .../src/mediawiki.less/mediawiki.mixins.less  | 29 ++++++++++++++++
 .../src/mediawiki.ui/components/inputs.less   | 34 ++++---------------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/resources/src/mediawiki.less/mediawiki.mixins.less b/resources/src/mediawiki.less/mediawiki.mixins.less
index da35ac2d58..4cca1a62bd 100644
--- a/resources/src/mediawiki.less/mediawiki.mixins.less
+++ b/resources/src/mediawiki.less/mediawiki.mixins.less
@@ -123,6 +123,35 @@
 	order: @order;
 }
 
+/* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */
+.mixin-placeholder( @rules ) {
+	// WebKit, Blink, Edge
+	&::-webkit-input-placeholder {
+		@rules();
+	}
+	// Internet Explorer 10-11
+	&:-ms-input-placeholder {
+		@rules();
+	}
+	// Firefox 19-
+	&::-moz-placeholder {
+		@rules();
+	}
+	// Firefox 4-18
+	&:-moz-placeholder {
+		@rules();
+	}
+	// W3C Standard Selectors Level 4
+	&::placeholder {
+		@rules();
+	}
+	// For inputs that use jquery.placeholder.js e.g. IE9
+	&.placeholder {
+		@rules();
+	}
+}
+/* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */
+
 // Screen Reader Helper Mixin
 .mixin-screen-reader-text() {
 	display: block;
diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 87ce7bebe1..2346325a75 100644
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -38,36 +38,14 @@
 	vertical-align: middle;
 
 	// Normalize & style placeholder text, see T139034
-	// Placeholder styles can't be grouped, otherwise they're ignored as invalid.
-
-	// Placeholder mixin
-	.mixin-placeholder() {
+	/* stylelint-disable indentation */
+	.mixin-placeholder( {
 		color: @colorGray7;
-		font-style: italic;
-	}
-	// Firefox 4-18
-	&:-moz-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-		.mixin-placeholder;
-		opacity: 1;
-	}
-	// Firefox 19-
-	&::-moz-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-		.mixin-placeholder;
 		opacity: 1;
-	}
-	// Internet Explorer 10-11
-	&:-ms-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-		.mixin-placeholder;
-	}
-	// WebKit, Blink, Edge
-	// Don't set `opacity < 1`, see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/
-	&::-webkit-input-placeholder { // stylelint-disable-line selector-no-vendor-prefix
-		.mixin-placeholder;
-	}
-	// W3C Standard Selectors Level 4
-	&:placeholder-shown {
-		.mixin-placeholder;
-	}
+		// TODO: Is italic necessary? T147808
+		font-style: italic;
+	} );
+	/* stylelint-enable indentation */
 
 	// Firefox: Remove red outline when `required` attribute set and invalid content.
 	// See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
-- 
2.20.1