Preventing animations-name properties from being namespaced.

[mjoynes-wombat-web]

Do you want to request a feature or report a bug?

I believe this is a feature request.

What is the current behavior?

When you put:

  :global(div.clicked.reviving.${ghostMain.className}) {
    div {
      animation-name: blink-red;
      animation-duration: 0.4s;
      animation-timing-function: steps(1);
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
  }

the animation name get's name spaced even though it's under a global and the animation is not in the namespace. It would be nice if you could wrap the animation-name in :global() and have it not be name spaced. This currently doesn't fix it.

A temporary work around is to do string interpolation with the name like so animation-name: ${"blink-red"};. This prevents the name from getting name spaced.

Environment (include versions)

• OS: Mac OS 10.14.1

• Browser: Google Chrome Version 70.0.3538.77

• styled-jsx (version): "styled-jsx": "^3.1.0" "styled-jsx-plugin-sass": "^0.3.0",

GitHub Project: https://github.com/ssmith-wombatweb/CSSinJS/tree/master/styled-jsx

[giuseppeg]

Stylis https://github.com/thysultan/stylis.js does the scoping so this is something we should fix there. You might want to open an issue there and see if they are interested in implementing this behavior