next-css `:export` issue

cool-button.jsx

import styled from '@emotion/styled';
import variables from '../assets/styles/css';

export const CoolStyledButton = styled.button`
    color: ${variables.primaryText};
    background: ${variables.background};
`;

page.jsx

import CoolStyledButton from '../components/cool-button';

export default () => (
    <>
        <h1>Some cool thing</h1>
        <CoolStyledButton/>
    </>
);

styles.css

:export {
    primaryText: rgba(0, 0, 0, 0.87);
    secondaryText: rgba(0, 0, 0, 0.50);
    background: #C770F9;
}