Map dynamic variables to css variables

[Daniel Del Core]

... to avoid remounting the same styles with dynamic expressions multiple times...

Inspired by https://compiledcssinjs.com/

import React from 'react';
import { CC, CS } from '@compiled/css-in-js';
export const EmphasisText = (props) => {
  const color = props.massive ? '#00B8D9' : '#36B37E';
  return (
    <CC>
      <CS hash="vmwvfg">
        {[
          '.cc-vmwvfg{color:var(--var-1ylxx6h);text-transform:uppercase;font-weight:600}',
        ]}
      </CS>
      <span className="cc-vmwvfg" style={{ '--var-1ylxx6h': color }}>
        {props.children}
      </span>
    </CC>
  );
};