feat: support max-* screen prefix variants

[Simek]

Why

Tailwind automatically defines max-* prefix variants of default or user-provided screen values:

• https://v3.tailwindcss.com/docs/responsive-design#targeting-a-breakpoint-range

How

Add automatic support for stand alone max-* screen prefix variants and related tests. Prefix ranges like xl:max-lg:* are not yet supported.

[jaredh159]

I have a slight hesitation about adding these without supporting the combined use case of xl:max-lg:*. and i guess also about the worth of these utilities vs cost of complexity and speed. these don't really introduce anything you can't do now with more utilities (basically by manually resetting a value at a higher breakpoint), right? or am i missing something.

[Simek]

Adding range support will complicate the logic a bit, since we would need to cache prefixes locally, but it should be not that difficult. When it comes to speed, is there any benchmark that we can run to compare the results with base code, and asses the impact of the changes?

these don't really introduce anything you can't do now with more utilities (basically by manually resetting a value at a higher breakpoint), right?

Yup, it's just different approach, since by default Tailwind screen breakpoints setup is mobile-first, while max-* variants allow you to switch to desktop-first approach, (where you overwrite for smaller screens) which is more familiar for web developers.

[jaredh159]

@Simek appreciate all the contributions lately. can you tell me a little bit about what you're working on that is motivating all these changes, and a little more about who you are?

[Simek]

Thanks! 🙏 All of the changes are motivated by this refactor effort of React Native Directory styling:

• add tailwind styling setup react-native-community/directory#2047

I have chosen twrnc due to the simple approach and ability to pass Tailwind classes directly as style prop value to the components. The only thing that seems to be affecting the website responsiveness is cache busting, to avoid a lot of re-renders (especially on window resize) I have switched to only bust the cache on theme change, and retain the old layout helpers to overwrite styles on given breakpoints. In near future, after resolving few last TODOs, and shipping the refactor I want to look at the ways to optimize the theme switching and screen size matching.

As for the part who am I - I'm the React Native Core contributor and community member for few years, helping Meta with different OSS projects and website, in Expo I was working mainly on EAS and helping other teams with UI/UX/DX.

[jaredh159]

ok, thanks for the context, I appreciate it.

back to this PR, i don't have a simple way to test for a performance regression i'm afraid. so, i guess we'd need to make a judgment call, i think i'm ok merging this, if it seems useful to you. i'm not doing any active RN development any more (though i have apps using this library still being maintained), so i'm a bit out of touch with the day to day realities of RN.