How to enforce "uniqueness" / separate outputs?

[Frikki]

I’ve encountered an issue that I don’t know how to solve. Actually, I use TypeStyle, but I believe it may have free-style answer. If it’s too foreign, just close the issue. I have already opened an issue in TypeStyle, but it has not yet been addressed, so I am trying here.

Note: style(object) is similar to registerStyle.

const MyStyle = style({
  color: 'blue',
  '&::-webkit-input-placeholder': {
    color: `rgba(0, 0, 0, 0)`
  },
  '&::-moz-placeholder': {
    color: `rgba(0, 0, 0, 0)`
  },
  '&::-ms-input-placeholder': {
    color: `rgba(0, 0, 0, 0)`
  }
}); // => f13byakl

This outputs the following styles:

.f13byakl{color:blue}
.f13byakl::-webkit-input-placeholder,
.f13byakl::-moz-placeholder,
.f13byakl::-ms-input-placeholder{color:rgba(0, 0, 0, 0)}

The problem is, however, that browsers do not understand:

.f13byak::-webkit-input-placeholder, /* WebKit fails here */
.f13byak::-moz-placeholder,          /* Firefox fails here */
.f13byak::-ms-input-placeholder {    /* IE fails here */
    color: rgba(0, 0, 0, 0);
}

To make this work, the final CSS must look like this:

.f13byak::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0);
}
.f13byak::-moz-placeholder {
    color: rgba(0, 0, 0, 0);
}
.f13byak::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0);
}

How is it possible to enforce this output?

[blakeembrey]

It's not currently possible to enforce that output. You could hack it today by making each hash slightly different (e.g. add/remove spaces), but that's not a very sustainable solution. I'll think about how to make this work better for nested styles, because I honestly don't have a good idea right now - the first thing that come to mind would be to introduce a symbol for objects to "tag them" as unique.

Oh, another solution that can work today is to register rules manually. This might be a better approach. Using registerRule('.' + className + '::placeholder', {}) to manually attach rules onto the style.

[Frikki]

Yup! That works.