Использование переменной в функции cssnext с styled-jsx

Question

У меня есть приложение Next.js, где я пытаюсь стилизовать элемент на основе переменной, которая устанавливается во время выполнения, например:

import React from 'react';

export default ({ myVar }) => (
  <div>
    <button>Click me!</button>
    <style jsx>{`
      button {
        color: ${myVar};
      }
    `}
    </style>
  </div>
);

Пока все хорошо, но когда я пытаюсь использовать функцию cssnext с переменной, она не работает:

import React from 'react';

export default ({ myVar }) => (
  <div>
    <button>Click me!</button>
    <style jsx>{`
      button {
        color: ${myVar};
        
        &:hover {
          color: color(${myVar} tint(10%));
        }
      }
    `}
    </style>
  </div>
);

Если я заменил ${myVar} в функции color() на простой цвет CSS, это работает, поэтому я знаю, что cssnext настроен правильно.

Можно ли добиться того, что я пытаюсь сделать, или это никогда не сработает, поскольку PostCSS всегда будет работать до того, как будет установлена ​​переменная?

Спасибо