Fix boolean flag based media style handling #39
Description
The recent changes to resolveMediaRangeQuery broke the case where you would want to have boolean flag based media conditions like this:
const isTablet = DeviceInfo().isTablet();
createStitches({
media: {
phone: !isTablet,
tablet: isTablet,
}
});
const Example = styled('View', {
backgroundColor: 'red',
'@tablet': {
backgroundColor: 'blue',
}
});This feature should be added back.
One problem we need to figure out is what is the specificity order when both boolean flag based and range queries are used and they overlap, eg:
createStitches({
media: {
phone: !isTablet,
tablet: isTablet,
md: '(width >= 750px)',
lg: '(width >= 1080px)',
xl: '(width >= 1284px)',
xxl: '(width >= 1536px)',
}
});If for example tablet and xl would be both used and the device would match both which one should overwrite the other?
const Example = styled('View', {
backgroundColor: 'red',
'@tablet': {
backgroundColor: 'blue',
},
'@xl': {
backgroundColor: 'yellow',
}
});