Placeholder selector is not vendor prefixed

[threepointone]

Placeholder selector is not vendor prefixed

[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;}

[fhelwanger]

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

[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]

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]

Done!