Fix css prop inline media style applied

[tkow]

This PR fixes css prop passed from parent component doesn't interpret media prop.

Now,

<Component
  css={{
    '@bp1': {
      margin: 1
    }
  }}
/>

is valid as css type defined.

[tkow]

@Temzasse
Hi, sorry to interrupt you, but I made two more PRs fixes bugs. When you have time to spare them, could you check them?

[Temzasse]

Thanks! 🙏🏻 ✨

Not directly related to this PR but I realized we are calculating the mediaKey partially incorrectly in resolveMediaRangeQuery. It only handles media queries but not boolean flags for cases where you just want to have something like this:

const isTablet = DeviceInfo().isTablet();

createStitches({
  media: {
    phone: !isTablet,
    tablet: isTablet,
  }
});

const Example = styled('View', {
  backgroundColor: 'red',
  '@tablet': {
    backgroundColor: 'blue',
  }
});

I will take a look at resolveMediaRangeQuery and try to fix this. Basically mediaKey should be an array since it's possible to have two media keys be valid at the same time, eg. tablet and lg.

[Temzasse]

Thanks! 🙏🏻 ✨

Not directly related to this PR but I realized we are calculating the mediaKey partially incorrectly in resolveMediaRangeQuery. It only handles media queries but not boolean flags for cases where you just want to have something like this:

const isTablet = DeviceInfo().isTablet();

createStitches({
  media: {
    phone: !isTablet,
    tablet: isTablet,
  }
});

const Example = styled('View', {
  backgroundColor: 'red',
  '@tablet': {
    backgroundColor: 'blue',
  }
});

I will take a look at resolveMediaRangeQuery and try to fix this. Basically mediaKey should be an array since it's possible to have two media keys be valid at the same time, eg. tablet and lg.

Added a new issue about this: #39

[Temzasse]

@tkow this was release in v0.3.1.