Fix leaking CSS variables

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]

Actually I thought you will do on Monday and I should not do it 😛. But then we discussed and did today hehehehe.

[pgmanutd]

Yeah, sorry about that 🙏 thanks for filling it in … On Fri, 30 Oct 2020, 7:06 pm Prashant Goel, @.***> wrote: I’ll fill in details later just made this so I don’t forget about it 😂 Did you make watermelon update?? 😁 Hehehe no worries. Yups I did. You didn’t tell me to do though 😞 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#333 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABT4PHNHO4OI6DDNW2M7NFDSNJX2FANCNFSM4TELJWNA .

No worries mate ❤️