Hack for :placeholder-shown (#1312)

data/prefixes.js

@@ -362,6 +362,15 @@ f(require('caniuse-lite/data/features/css-placeholder'), browsers => {
   })
 })
 
+// Placeholder-shown selector
+f(require('caniuse-lite/data/features/css-placeholder-shown'), browsers => {
+  prefix([':placeholder-shown'], {
+    selector: true,
+    feature: 'css-placeholder-shown',
+    browsers
+  })
+})
+
 // Hyphenation
 f(require('caniuse-lite/data/features/css-hyphens'), browsers =>
   prefix(['hyphens'], {

lib/hacks/placeholder-shown.js

@@ -0,0 +1,17 @@
+let Selector = require('../selector')
+
+class PlaceholderShown extends Selector {
+  static names = [':placeholder-shown']
+
+  /**
+   * Return different selectors depend on prefix
+   */
+  prefixed (prefix) {
+    if (prefix === '-ms-') {
+      return ':-ms-input-placeholder'
+    }
+    return `:${ prefix }placeholder-shown`
+  }
+}
+
+module.exports = PlaceholderShown

lib/prefixes.js

@@ -12,6 +12,7 @@ let Value = require('./value')
 let utils = require('./utils')
 Selector.hack(require('./hacks/fullscreen'))
 Selector.hack(require('./hacks/placeholder'))
+Selector.hack(require('./hacks/placeholder-shown'))
 Declaration.hack(require('./hacks/flex'))
 Declaration.hack(require('./hacks/order'))
 Declaration.hack(require('./hacks/filter'))

test/autoprefixer.test.js

@@ -54,6 +54,9 @@ let ffgradienter = autoprefixer({
 let selectorer = autoprefixer({
   overrideBrowserslist: ['Chrome 25', 'Firefox > 17', 'IE 10', 'Edge 12']
 })
+let placeholderShowner = autoprefixer({
+  overrideBrowserslist: ['IE >= 10']
+})
 let transitionSpec = autoprefixer({
   overrideBrowserslist: ['Chrome > 19', 'Firefox 14', 'IE 10', 'Opera 12']
 })
@@ -118,6 +121,8 @@ function prefixer (name) {
     return intrinsicer
   } else if (name === 'selectors' || name === 'placeholder') {
     return selectorer
+  } else if (name === 'placeholder-shown') {
+    return placeholderShowner
   } else if (name === 'backdrop-filter' || name === 'overscroll-behavior') {
     return overscroller
   } else if (name === 'background-clip' || name === 'user-select') {
@@ -175,7 +180,8 @@ function check (from, instance = prefixer(from)) {
 const COMMONS = [
   'transition', 'values', 'keyframes', 'gradient', 'flex-rewrite',
   'flexbox', 'filter', 'border-image', 'border-radius', 'notes', 'selectors',
-  'placeholder', 'fullscreen', 'intrinsic', 'mistakes', 'custom-prefix',
+  'placeholder', 'placeholder-shown', 'fullscreen',
+  'intrinsic', 'mistakes', 'custom-prefix',
   'cascade', 'double', 'multicolumn', '3d-transform', 'background-size',
   'supports', 'viewport', 'resolution', 'logical', 'appearance',
   'advanced-filter', 'element', 'image-set', 'image-rendering',
@@ -575,6 +581,7 @@ describe('hacks', () => {
   it('supports logical properties', () => check('logical'))
   it('supports appearance', () => check('appearance'))
   it('supports all placeholders', () => check('placeholder'))
+  it('supports placeholder-shown', () => check('placeholder-shown'))
   it('supports image-rendering', () => check('image-rendering'))
   it('supports border-box mask', () => check('mask-border'))
   it('supports mask-composite', () => check('mask-composite'))

test/cases/placeholder-shown.css

@@ -0,0 +1,3 @@
+:placeholder-shown {
+  background: #eee
+}

test/cases/placeholder-shown.out.css

@@ -0,0 +1,6 @@
+:-ms-input-placeholder {
+  background: #eee
+}
+:placeholder-shown {
+  background: #eee
+}

test/cases/placeholder.css

@@ -1,6 +1,3 @@
 ::placeholder {
   color: #999
 }
-:placeholder-shown {
-  background: #eee
-}

test/cases/placeholder.out.css

@@ -16,6 +16,3 @@
 ::placeholder {
   color: #999
 }
-:placeholder-shown {
-  background: #eee
-}