Styled-jsx: External styles break when using className generated with props

[soulchainer]

With https://github.com/zeit/styled-jsx/issues/215 solved, I was trying to finally migrate my styles to external styles. It works in most situations (good!), but it breaks again when you generate the className of the component according to props.

I mean, specifically, this usage:

const SimonButton = ({
  active,
  color,
  cpuActive,
  gameMode,
  position,
  ...
}) => (
  <div
    className={`SimonButton--${position} u-${color}${(active) ? ' is-active' : ''}${(cpuActive) ? ' is-cpu-active' : ''}${(gameMode === 'listen') ? ' is-disabled-animation' : ''}`}
    ...
  >
    <style jsx>{SimonButtonCSS}</style>
  </div>
);

Note: the parts of conditional className seems to work (if active/cpuActive/gameMode add this class), it's just the composed className which won't.

As you see, I change the className to use according of some props: position,color`...
This is for a Simon game, where every button has a color, different position, you know.
I could made a component for each colored button of the Simon, but that would be... awkward.

Of course, the classes aren't dinamically generated in the external styles. In the styles I have:

.u-blue {
    ...
  }

  .SimonButton--top-left {
    ...
  }

Etcétera.
Previously, this was working. Now, the CSS doesn't even get injected or return to the classic:

  <style>undefined</style>

Next.js didn't update still with the new styled-jsx, so I can't put a minimal repo with it right now.

[giuseppeg]

Do you mind pasting the external styles? Are you using expressions inside of it?

I tried to transpile the react component and it works just fine:

import _JSXStyle from 'styled-jsx/style';
import styles from './styles';

const SimonButton = ({
  active,
  color,
  cpuActive,
  gameMode,
  position
}) => <div className={`
      SimonButton--${position}
      u-${color}
      ${active ? ' is-active' : ''}
      ${cpuActive ? ' is-cpu-active' : ''}
      ${gameMode === 'listen' ? ' is-disabled-animation' : ''}
    `} data-jsx-ext={styles.__scopedHash}>
    <_JSXStyle styleId={styles.__scopedHash} css={styles.__scoped} />
  </div>;

[soulchainer]

Absolutely. I didn't do it previously because the file is a bit long (oh, now that I look at this again, I can reuse some more strings). And yes: I'm using expressions.
The complete file is:

import {
  buttonBorder as border,
  colors,
  NEXT_SEQUENCE_DELAY,
  USER_MOVE_FADE_DURATION } from '../constants';

const colorTransition = `transition: color ${NEXT_SEQUENCE_DELAY}s;`;

export const SimonButtonCSS = `
  div {
    background-color: currentcolor;
    box-sizing: border-box;
    height: 50%;
    position: relative;
    ${colorTransition}
    width: 50%;
  }

  .u-green {
    color: ${colors.green};
    ${colorTransition}
  }

  .u-red {
    color: ${colors.red};
    ${colorTransition}
  }

  .u-yellow {
    color: ${colors.yellow};
    ${colorTransition}
  }

  .u-blue {
    color: ${colors.blue};
    ${colorTransition}
  }

  .SimonButton--top-left {
    border-top-left-radius: ${border.radius};
    border-width: 0 ${border.width} ${border.width} 0;
  }

  .SimonButton--top-right {
    border-top-right-radius: ${border.radius};
    border-width: 0 0 ${border.width} ${border.width};
  }

  .SimonButton--bottom-left {
    border-bottom-left-radius: ${border.radius};
    border-width: ${border.width} ${border.width} 0 0;
  }

  .SimonButton--bottom-right {
    border-bottom-right-radius: ${border.radius};
    border-width: ${border.width} 0 0 ${border.width};
  }

  .is-active {
    animation-name: user-activated;
    animation-duration: ${USER_MOVE_FADE_DURATION}s;
    animation-fill-mode: forwards;
  }

  .is-cpu-active {
    animation-name: cpu-activated;
    animation-fill-mode: forwards;
  }

  .is-cpu-active.is-disabled-animation {
    animation: none;
  }

  @keyframes cpu-activated {
    0%, 100% {
      transform: perspective(800px);
      z-index: 2;
    }
    50% {
      box-shadow: 0 0 2vmin 1vmin #fff, 0 0 2vmin 2vmin currentcolor;
      transform: perspective(800px) translateZ(4vmin);
      z-index: 2;
    }
  }

  @keyframes user-activated {
    from {
      transform: perspective(800px);
      z-index: 2;
    }
    to {
      box-shadow: 0 0 2vmin 1vmin #fff, 0 0 2vmin 2vmin currentcolor;
      transform: perspective(800px) translateZ(4vmin);
      z-index: 2;
    }
  }
`;

[giuseppeg]

ok if you remove the expressions it should work, especially when they are full properties like in this case:

`
  div {
    background-color: currentcolor;
    box-sizing: border-box;
    height: 50%;
    position: relative;
    ${colorTransition}
    width: 50%;
  }
`

(I am talking about ${colorTransition}) Can you confirm?

[soulchainer]

@giuseppeg Yup. Removing that it's working again.
I mean, just removing the ${colorTransition} one.
But... it's a pity. It was working previously. In that case, the gaining what not so much, but in the keyframes... it would be several lines. In some cases, can help to avoid some redundancy. But I don't know if it worth the effort or not.

In any case, it works now, so I'm happy. Thanks, @giuseppeg 👍.

[giuseppeg]

no worries I will fix this too :)