Styled-jsx: ::placeholder not vendor prefixed in production

[jaydenseric]

I don't know why, but ::placeholder rules are not vendor prefixed in production builds:

This results in no placeholder styles in Edge and IE.

Weirdly, prefixes appear in development:

Stylis is meant to handle this, so is it something going on with Next.js/styled-jsx?

[giuseppeg]

@thysultan could you help me out fixing this / improving this plugin? https://github.com/zeit/styled-jsx/blob/master/src/lib/style-transform.js#L68-L133 You know Stylis inside out so I think we could avoid a lot of bugs if you could fix / refactor that plugin.

[thysultan]

I think i have a fix for this, but it seems like insertRule throws on the placeholder vendor prefix.

The rule-sheet plugin makes use of this and you can see what throws when passed to insertRule in the console

[giuseppeg]

it seems like insertRule throws on the placeholder vendor prefix

That's fine I guess as soon as it won't throw in the target browser right? I mean ::-moz-placeholder throws in Chrome and it is ignored (cool), doesn't throw in Firefox (cool).

[giuseppeg]

it might only be an issue when selectors are grouped probably eg.

.foo,
::placeholder { color: red }

Since it throws .foo won't get styled, but in those cases a warning is probably fine/enough

[thysultan]

Yes, i guess we could just not log in the catch block for errors that come from strictly placeholder vendor prefixes.

The only other error is from @supports (position:-webkit-sticky) or (position:sticky). Though i don't yet know if it's because the syntax is incorrect or because of the vendor prefix (position:-webkit-sticky).

[giuseppeg]

I think because of the vendor prefix

[thysultan]

:smile: It's a syntax issue. The space after and before or is required as far as insertRule is concerned.

This works.

@supports (position:-webkit-sticky) or (position:sticky){.css-hash{background:red;}}

Will patch this in stylis.

[giuseppeg]

@thysultan so basically I could use your plugin and ditch mine?

[thysultan]

Patched in 3.3.2 and updated the rule-sheet plugin. It should be a good working example of how to implement an insertRule plugin with the least overhead.

so basically I could use your plugin and ditch mine

I think so.

[giuseppeg]

@jaydenseric I'll wait for @thysultan to fix his rule-sheet plugin hopefully I can switch to that and we can get continuous bug fixes and support. In the meantime if this is a real issue you can disable the optimizedForSpeed mode in production

[jaydenseric]

@giuseppeg thanks for the update, and tip.

[giuseppeg]

Fixed in 2.1.0