Emotion: "v-text-anchor" property is broken

[ashtonsix]

• emotion version: 9.2.3
• react version: 16.3.2

Minimal Example:

import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;
  v-text-anchor: middle;
`

app.classList.add(myStyle)

The injected stylesheet looks like this:

<style data-emotion>
  v-text-anchor:middle;.css-1e4y5fg{color:rebeccapurple;}
</style>

Without color (just v-text-anchor) the injected stylesheet looks like this:

<style data-emotion>
  v-text-anchor:middle;}
</style>

I would expect the injected stylesheet to look like this instead:

<style data-emotion>
  .css-1e4y5fg{v-text-anchor:middle;}
</style>

Other properties that match /^[a-z]{1}-/ also seem to break.

Real-World Example (spoiler):

There's a few intermediate build steps, but this generates VML for displaying rounded buttons in older versions of Outlook.

return (
  <center>
    <if condition="mso">
      <v$roundrect
        xmlns$v="urn:schemas-microsoft-com:vml"
        xmlns$w="urn:schemas-microsoft-com:office:word"
        href={link}
        className="emailButton"
        css={`
          width: ${width};
          height: ${height};
          v-text-anchor: middle;
        `}
        fillcolor={background}
        arcsize={arcsize}
        stroke="f"
      >
        <w$anchorlock />
        <center
          css={`
            color: ${color};
            font-size: ${fontSize};
          `}
        >
          {children}
        </center>
      </v$roundrect>
    </if>
    <else condition="mso">
      <a
        href={link}
        className="emailButton"
        css={`
          display: block;
          width: ${width}px;
          line-height: ${height}px;
          -webkit-text-size-adjust: none;
          background-color: ${background};
          border-radius: ${borderRadius}px;
          font-size: ${fontSize}px;
          color: ${color};
        `}
      >
        {children}
      </a>
    </else>
  </center>
)

[Andarist]

VML is predating Internet Explorer 10. In general we do not want to support such old environments. Could u use inline styles for this property?

[thysultan]

Strange that with would happen only for x- variants, testing this on stylis.js.org reveals that it is a bug with stylis.

[ashtonsix]

@Andarist yeah, but then I can't tell my colleagues migrating styles from older email templates to react is simple as copy/pasting. welcome to the wonderful world of email clients btw.

@thysultan thanks for finding! going to report upstream & create a PR to upgrade our Stylis version later. turns out only /^v-/ breaks, other letters are fine

[Andarist]

@Andarist yeah, but then I can't tell my colleagues migrating styles from older email templates to react is simple as copy/pasting. welcome to the wonderful world of email clients btw.

Yeah, that's certainly a bummer. Hope the issue will get resolved.

@thysultan thanks for finding! going to report upstream & create a PR to upgrade our Stylis version later.

You won't quite be able to upgrade stylis, because emotion has its own copy of it (it's not regular dependency). When the new version gets released you should create a stylis version bump request here.

[Ailrun]

@ashtonsix Here is the stylis of emotion
https://github.com/emotion-js/next/tree/master/packages/stylis

[ashtonsix]

@Andarist Hey, stylis 3.5.1 was just released! Can we upgrade?

[Andarist]

https://github.com/emotion-js/next/pull/15

[mitchellhamilton]

Fixed in [email protected]