Css variable with name `margin-inline-end` will get `inline` stripped in `-webkit` property value

[eric-chong]

Current behavior:

When I uses css variable that has margin-inline-end as part of the variable name. The inline part of the css variable name gets strip off when emotion generates the -webkit css property and value.

To reproduce:

1. Create a css variable with name: --my-margin-inline-end: 20px;
2. Use the css variable on any element: margin-inline-end: var(--my-margin-inline-end);

Link to code sandbox: https://codesandbox.io/p/sandbox/emotion-issue-template-forked-v9mfgp?file=%2Fsrc%2FApp.tsx%3A8%2C3-8%2C50

Expected behavior:

The css variable name should not be changed.

Environment information:

"dependencies": {
    "@emotion/css": "11.9.0",
    "@emotion/react": "11.9.0",
    "@emotion/styled": "11.8.1",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.3"
  },