Fix leaking CSS variables

[itsdouges]

Describe the bug
Non-inherited CSS properties are being inherited thanks to the shared CSS variable declaration (they have the same name).

This is OK behaviour for properties that inherit - not ok for ones that shouldn't.

To Reproduce
Steps to reproduce the behavior:

import React from 'react';
import { styled } from '@compiled/core';

const Box = styled.div<{ border?: string }>`
  border: ${(props) => props.border || ''};
`;

export const NestedWithDynamicValues = () => (
  <Box border="2px solid red">
    Should have border
    <Box>Should not have border</Box>
  </Box>
);

Expected behavior

Nested Box should not have a border.

Additional context

We can fix this by unsetting the CSS variable when it resolves to undefined.

--value: ;

Currently we resolve to an empty string if it has a prefix/suffix - to fix this we will probably have to always do it for everything.

Testing notes

• Css prop interpolations
• Styled component interpolations

[pgmanutd]

🤔 What is this about?

Edit: Is it variables we create for classes 🤔?

[itsdouges]

Blocked by facebook/react#20497

Edit: Unblocked!