CSS with different interpolations not mounted

[danieldelcore]

Having an instance of <Grid> and <Grid column={2}> on the page at the same time does not remount the class to the head of the document. Could be something to do with the hashing logic.

/** @jsx jsx */
import { FC, ReactNode } from 'react';

import { css, jsx } from '@trousers/core';

export const Grid = ({ columns = 3, children }) => (
    <div
        css={css`
            display: grid;
            grid-template-columns: repeat(${columns}, 1fr);
            gap: 1.5rem;
            width: 100%;
        `}
    >
        {children}
    </div>
);

[danieldelcore]

Looks like this is because we hash the css before the expressions are evaluated...