feat: implement media queries with web selector support

Author: finkef

README.md

@@ -107,7 +107,7 @@ Add babel-plugin-macros to your `.babelrc` or `babel.config.js` and you're all s
 
 ### Using the `tw` prop
 
-The best and easiest usage is to simply use the `tw` prop that is artificially added to all JSX elements. Under the hood, the macro removes the `tw` prop completely and instead applies or extends a `style` prop and also adds a web-only media id used by [react-native-media-query](https://github.com/kasinskas/react-native-media-query) to apply CSS-based media queries.
+The best and easiest usage is to simply use the `tw` prop that is artificially added to all JSX elements. Under the hood, the macro removes the `tw` prop completely and instead applies or extends a `style` prop and also adds a web-only media id used to apply CSS-based media queries.
 
 All you have to do is have _any_ import of react-native-tailwind.macro in your file, either `import "react-native-tailwind.macro"` or `import { /* whatever import you need */ } from "react-native-tailwind.macro"`.
 
@@ -314,7 +314,7 @@ Behind the scenes, `react-native-tailwind.macro` turns your _simple_ code from t
 import "react-native-tailwind.macro"
 
 const Example = () => (
-  <View tw="w-[100px] h-[100px] bg-purple-500 dark:ios:lg:bg-pink-500" />
+  <View tw="w-[100px] h-[100px] bg-purple-500 dark:ios:lg:bg-pink-500 hover:bg-indigo-500" />
 )
 ```
 
@@ -330,6 +330,7 @@ const useStyles = ReactNativeTailwindMacro.createUseTailwindStyles({
   a7gsbs: [
     {
       dark: false,
+      selectors: [],
       style: {
         width: 100,
         height: 100,
@@ -338,13 +339,22 @@ const useStyles = ReactNativeTailwindMacro.createUseTailwindStyles({
     },
     {
       dark: true,
-      breakpoint: "lg",
+      breakpoint: {
+        label: "lg",
+        minWidth: "1024px",
+      },
+      selectors: [],
       platform: "ios",
       style: {
-        // Output for react-native-media-query
-        "@media(min-width: 1024px)": {
-          backgroundColor: "#ec4899",
-        },
+        backgroundColor: "#ec4899",
+      },
+    },
+    {
+      dark: false,
+      // Styles on web will only be applied on web
+      selectors: ["hover"],
+      style: {
+        backgroundColor: "#6366f1",
       },
     },
   ],
@@ -359,7 +369,7 @@ const Example = () => {
     <View
       // Apply the memoized style
       style={tailwindStyles["a7gsbs"]}
-      // Apply media id for CSS-based media queries using react-native-media-query
+      // Apply media id for CSS-based media queries
       dataSet={{ media: tailwindStyles["a7gsbs"].id }}
     />
   )
@@ -380,7 +390,7 @@ For more examples and use cases, check the [macro test snapshots](packages/react
 
 - [tailwind-react-native-classnames](https://github.com/jaredh159/tailwind-react-native-classnames): Used for compiling Tailwind styles
 
-- [react-native-media-query](https://github.com/kasinskas/react-native-media-query): Used for applying responsive styles with CSS media queries on the web
+- [react-native-media-query](https://github.com/kasinskas/react-native-media-query): Provides the base implementation used to enable CSS media query support
 
 - [twin.macro](https://github.com/ben-rogerson/twin.macro): Inspiration for writing a babel macro
 

examples/expo/package.json

@@ -18,7 +18,6 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-media-query": "^1.0.7",
     "react-native-tailwind.macro": "*",
     "react-native-unimodules": "~0.12.0",
     "react-native-web": "~0.14.9"

examples/next/components/Button.tsx

@@ -14,7 +14,7 @@ export const Button: FunctionComponent<ButtonProps> = ({ label, onPress }) => {
     (tw) => ({
       button: [
         tw`px-8 py-4 rounded-3xl bg-blue-500`,
-        pressed && tw`bg-blue-200`,
+        pressed ? tw`bg-blue-200` : tw`hover:bg-blue-400`,
       ],
       text: tw`text-white dark:text-black`,
     }),
@@ -27,7 +27,7 @@ export const Button: FunctionComponent<ButtonProps> = ({ label, onPress }) => {
       onPressOut={() => setPressed(false)}
       onPress={onPress}
     >
-      <View style={styles.button}>
+      <View style={styles.button} dataSet={{ media: styles.button.id }}>
         <Text style={styles.text}>{label}</Text>
       </View>
     </TouchableWithoutFeedback>

packages/react-native-tailwind.macro/package.json

@@ -47,7 +47,6 @@
     "@babel/template": "^7.15.4",
     "babel-plugin-macros": "^3.1.0",
     "nanoid": "^3.1.25",
-    "react-native-media-query": "^1.0.9",
     "twrnc": "2.1.0-beta.5"
   },
   "devDependencies": {

packages/react-native-tailwind.macro/src/__tests__/__snapshots__/macro.test.ts.snap

@@ -49,6 +49,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -95,6 +97,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -152,6 +156,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-QCNapfedmWWq_pCNAW1Vbw",
       style: {
         backgroundColor: "#3b82f6",
       },
@@ -163,23 +169,29 @@ const _useStyles2 = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-2": [
     {
       dark: false,
-      breakpoint: "md",
+      selectors: [],
+      breakpoint: {
+        label: "md",
+        minWidth: "768px",
+      },
+      id: "rntwm-ICQub9WQ6pxaCmSgEP_Dyw",
       style: {
-        "@media(min-width: 768px)": {
-          paddingLeft: 32,
-          paddingRight: 32,
-        },
+        paddingLeft: 32,
+        paddingRight: 32,
       },
     },
   ],
   "mockId-3": [
     {
       dark: false,
-      breakpoint: "lg",
+      selectors: [],
+      breakpoint: {
+        label: "lg",
+        minWidth: "1024px",
+      },
+      id: "rntwm-l8OzFlAAuhkMqH0mxSHFRA",
       style: {
-        "@media(min-width: 1024px)": {
-          paddingTop: 64,
-        },
+        paddingTop: 64,
       },
     },
   ],
@@ -224,6 +236,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-USsRiS2Y14wokhNvpfV_cA",
       style: {
         paddingTop: 32,
       },
@@ -281,6 +295,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -293,6 +309,8 @@ const _useStyles2 = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-2": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -359,6 +377,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -368,6 +388,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-2": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-rtskDjeUkZ+Qoz23W9Kucw",
       style: {
         paddingLeft: 64,
         paddingRight: 64,
@@ -412,6 +434,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -454,6 +478,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -505,34 +531,44 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-QCNapfedmWWq_pCNAW1Vbw",
       style: {
         backgroundColor: "#3b82f6",
       },
     },
     {
       dark: false,
-      breakpoint: "md",
+      selectors: [],
+      breakpoint: {
+        label: "md",
+        minWidth: "768px",
+      },
+      id: "rntwm-e0SKczQBFuXuSi8Lb9mOyA",
       style: {
-        "@media(min-width: 768px)": {
-          backgroundColor: "#ec4899",
-        },
+        backgroundColor: "#ec4899",
       },
     },
   ],
   "mockId-2": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-0YDC3qrbZAUxx0mzUCnxnw",
       style: {
         fontWeight: "bold",
       },
     },
     {
       dark: false,
-      breakpoint: "md",
+      selectors: [],
+      breakpoint: {
+        label: "md",
+        minWidth: "768px",
+      },
+      id: "rntwm-eLOoCGNsuFm4oGXCi6HChg",
       style: {
-        "@media(min-width: 768px)": {
-          fontWeight: "100",
-        },
+        fontWeight: "100",
       },
     },
   ],
@@ -573,6 +609,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -616,6 +654,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -668,6 +708,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -706,6 +748,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -753,6 +797,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,
@@ -791,6 +837,8 @@ const _useStyles = _ReactNativeTailwindMacro.createUseTailwindStyles({
   "mockId-1": [
     {
       dark: false,
+      selectors: [],
+      id: "rntwm-tgfXYl7K1yBpFmsixLSeHA",
       style: {
         paddingLeft: 32,
         paddingRight: 32,