styled-jsx: Can't keep styles for more than one component in separate files: it breaks

I was pretty excited when, at last, this feature got shipped. Last night, at last, I could try it.

I first tried moving the global CSS I have and it worked flawlessly.

Then, I tried to add any other CSS, from any component. And it breaks. Doesn’t matter what component, at any level or deep… it just break.

As example, I’m creating this file:

animatedTitle.js

const AnimatedTitleCSS = `
  .AnimatedTitle {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%; /* If the width isn't setted, the SVG won't scale */
  }

  /* Put some space between the letters */
  svg {
    margin-left: 2vmin;
    top: 10vmin;
  }
`;
export default AnimatedTitleCSS;

And using it like this:

AnimatedTitle.jsx

...
import animatedTitleCSS from '../styles/animatedTitle';
...
render() {
    return (
      <div className="AnimatedTitle">
        ...
        <style jsx>{animatedTitleCSS}</style>
      </div>
    );
  }
...

In theory, I’m using it the right way, right? Or not?

When I try this, the project build without problem, but the only thing it injects for the mentioned component is:

<style>undefined</style>

And, even more, it breaks/avoid the inyecting of the global styles at all, so the previously working global styles don’t get neither applied. You think about declaring this second styles also global (even when not what you want, and not desired at all)? OK. Then styles of this component get injected, yes: but keeps breaking the global CSS. Avoids it to be injected at all. And, because of that, renders the feature not usable at all T_T.

At the state it is, I can only keep in a separate file… one file, with the global styles. That’s it. So it loses all the magic.

Am I the only one with this problem/issue?

If so, I can push a branch of my project with this fail. The global.js (file with the global styles) isn’t doing anything special, or weird, to get banned out just when any other style is keep isolated from their component. And, if you remove the extra CSS module, the global.js works again just OK.

global.js

import { colors } from '../constants';

const GlobalCSS = `
  * { box-sizing: border-box; }

  body {
    background-color: ${colors.black};
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100vw;
  }

  #root {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    opacity: 0;
  }

  .Root {
    align-items: center;
    display: flex;
    font-family: 'Titillium Web', sans-serif;
    height: 100%;
    justify-content: center;
    width: 100vw;
  }
`;

export default GlobalCSS;