Placeholder selector is not vendor prefixed

[eldh]

It seems placeholder styles are not working in Chrome, seemingly because the selector ::placeholder is not supported (needs to be ::-webkit-input-placeholder) and as far as I could tell from a quick look through the code, the selectors are not processed by the prefixer, only rules are.

Question is, since the cases where the selector needs to be prefixed somehow are quite rare and tricky to handle in a generic way (for example, to get placeholder styling to work cross-browser you need to duplicate the rule blocks iirc), is it better to handle these things case by case or find some more generic solution (i.e pass all selectors through a prefixer)?

[threepointone]

Good catch, I didn't know this. I should be able to add it. As a workaround for now, try this undocumented method - add(':-webkit-input-placeholder', style) (note the single colon, not double)

[eldh]

Cool! I ended up with this:

const placeholder = (x) => ({
  ...add(':placeholder', x),
  ...add(':-webkit-input-placeholder', x),
  ...add(':-moz-placeholder', x),
  ...add(':-ms-input-placeholder', x),
})

[threepointone]

✌️

[threepointone]

the next version of glamor should do this automatically

[jaydenseric]

Placeholder is still not vendor prefixing:

import React from 'react'
import {css} from 'glamor'

const styles = {
  '::placeholder': {
    color: 'red'
  }
}

export default () => (
  <input className={css(styles)} placeholder='Test' />
)

Results in this output in the head stylesheet:

.css-f6kjmy::placeholder,[data-css-f6kjmy]::placeholder,.css-f6kjmy[data-simulate-placeholder],[data-css-f6kjmy][data-simulate-placeholder]{color:red;}

[threepointone]

ah, it doesn't do it for the nested version, only when using the helper. will fix.

[threepointone]

fixed in 2.20.14

[fhelwanger]

It isn't working right now.

Glamor put all vendor prefixes in a single comma separated rule:

glamor/src/index.js

Lines 322 to 325 in 09dd49d

	let _key =
	key === '::placeholder' ?
	'::placeholder,::-webkit-input-placeholder,::-moz-placeholder,::-ms-input-placeholder'
	: key

But it doesn't work. I found why here: http://stackoverflow.com/a/23338422/2379685

...if any selector in your comma separated list is not recognized by your browser, it skips the whole rule and goes on to the next.

You can test it in this fiddle using chrome:

https://jsfiddle.net/Lcjfkrb2/

Also, you can go to https://autoprefixer.github.io/ and paste:

input::placeholder {
  color: red
}

The result will be:

input::-webkit-input-placeholder {
  color: red
}
input::-moz-placeholder {
  color: red
}
input:-ms-input-placeholder {
  color: red
}
input::placeholder {
  color: red
}

Couldn't this be handled by autoprefixer instead of hard coded?

[fhelwanger]

I think I figured out how to resolve it. Working on a PR.

[fhelwanger]

Done!