valeriavg/fresh-emotion

CSS-in-JS Emotion plugin for Deno Fresh framework

fresh-emotion's Issues

Dynamic styles aren't rendered

Add or replace existing islands/Counter.tsx within new fresh project:

import { useState } from "preact/hooks";
import { css } from "@emotion/css";
import { Button } from "../components/Button.tsx";

interface CounterProps {
  start: number;
}


export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.start);

  const color = count>5?'red':'lime';

  const buttonStyle = css`
  border: 1px solid lime;
  background: ${color};
  color: black;
  &:hover{
    background: yellow;
  }
`;

  return (
    <div>
      <p>{count}</p>
      <Button onClick={() => setCount(count - 1)} class={buttonStyle}>-1</Button>
      <Button onClick={() => setCount(count + 1)} class={buttonStyle}>+1</Button>
    </div>
  );
}

Attempt to increase count above 5 and observe that buttons lose their styles.
Expected behaviour: Buttons should keep the styling and have a red background