Merge pull request #5 from finkef/feature/media-queries

Reimplement CSS Media Queries

Author: finkef

README.md

@@ -75,6 +75,10 @@ const Status = ({ isActive, labelColor }) => {
 
   `ios:bg-blue-800 android:bg-purple-800`
 
+- 🖥   Web only selectors
+
+  `focus:bg-blue-400 active:bg-indigo-400`
+
 - 🕺   Stackable selectors
 
   `ios:md:font-bold android:(text-blue-800 sm:dark:text-blue-100)`
@@ -107,7 +111,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 data-tw 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"`.
 
@@ -197,7 +201,7 @@ const Example = ({ rounded, backgroundColor }) => {
       <Animated.View
         style={styles.box}
         {/* Required for responsive styles on the web, hence it's preferred to apply all responsive styles through the `tw` prop */}
-        dataSet={{ media: styles.box.id }}
+        dataSet={{ tw: styles.box.id }}
       />
       <TouchableOpacity
         {/* Mix and match tw prop and styles in your code */}
@@ -228,20 +232,31 @@ const styles = useTailwindStyles(
 
 By default, the device's color scheme preference is used to enable dark mode. If you want to dynamically change whether dark mode is enabled, you can wrap your App with `TailwindProvider` and pass in your dark mode preference.
 
+On the web, the set value will automatically be persisted in a cookie to enable SSR and SSG without flashes on load.
+
 ```ts
-import { Appearance } from "react-native"
-import { TailwindProvider } from "react-native-tailwind.macro"
+import {
+  TailwindProvider,
+  getInitialColorScheme,
+} from "react-native-tailwind.macro"
 
 const App = () => {
-  const [darkMode, setDarkMode] = useState(
-    // Use device preference as default
-    Appearance.getColorScheme() === "dark"
-  )
+  const [darkMode, setDarkMode] = useState(getInitialColorScheme() === "dark")
 
   return <TailwindProvider dark={darkMode}>{/* ... */}</TailwindProvider>
 }
 ```
 
+### `getInitialColorScheme`
+
+Returns either the cookie-persisted preference on web or falls back to the system preference.
+
+```ts
+import { getInitialColorScheme } from "react-native-tailwind.macro"
+
+getInitialColorScheme() // returns "light" or "dark"
+```
+
 ### Macro Options
 
 You can apply options to the macro by adding a `babel-plugin-macros.config.js` or specifying them in your `package.json` like below:
@@ -282,9 +297,10 @@ Alternatively:
 
 In order to enable SSR support via media queries on Next.js, update your [custom document](https://nextjs.org/docs/advanced-features/custom-document) as follows:
 
-```ts
-// Add the flush import
-import { flush } from "react-native-tailwind.macro"
+```diff
+// pages/_document.js
+
++ import { flush } from "react-native-tailwind.macro"
 
 /* ... */
 
@@ -295,7 +311,7 @@ export class Document extends NextDocument {
     const page = renderPage()
     const styles = [
       getStyleElement(),
-      flush(), // Add this call
++     flush(),
     ]
     return { ...page, styles: React.Children.toArray(styles) }
   }
@@ -314,7 +330,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 +346,7 @@ const useStyles = ReactNativeTailwindMacro.createUseTailwindStyles({
   a7gsbs: [
     {
       dark: false,
+      selectors: [],
       style: {
         width: 100,
         height: 100,
@@ -338,13 +355,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,8 +385,8 @@ const Example = () => {
     <View
       // Apply the memoized style
       style={tailwindStyles["a7gsbs"]}
-      // Apply media id for CSS-based media queries using react-native-media-query
-      dataSet={{ media: tailwindStyles["a7gsbs"].id }}
+      // Apply data-tw id for CSS-based media queries
+      dataSet={{ tw: tailwindStyles["a7gsbs"].id }}
     />
   )
 }
@@ -380,7 +406,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/expo/src/App.tsx

@@ -1,7 +1,10 @@
 import * as React from "react"
 
 import { View, Text } from "react-native"
-import { TailwindProvider } from "react-native-tailwind.macro"
+import {
+  getInitialColorScheme,
+  TailwindProvider,
+} from "react-native-tailwind.macro"
 import { Button } from "./Button"
 
 interface AppProps {
@@ -39,7 +42,7 @@ const App: React.FunctionComponent<AppProps> = ({ toggleTheme }) => {
 }
 
 export default () => {
-  const [dark, setDark] = React.useState(false)
+  const [dark, setDark] = React.useState(getInitialColorScheme() === "dark")
 
   return (
     <TailwindProvider dark={dark}>

examples/next/App.tsx

@@ -1,7 +1,10 @@
 import * as React from "react"
 
 import { View, Text } from "react-native"
-import { TailwindProvider } from "react-native-tailwind.macro"
+import {
+  TailwindProvider,
+  getInitialColorScheme,
+} from "react-native-tailwind.macro"
 import { Button } from "./components/Button"
 
 interface AppProps {
@@ -25,11 +28,21 @@ const App: React.FunctionComponent<AppProps> = ({ toggleTheme }) => {
       </Text>
 
       <Text tw="mt-16 font-bold text-xl dark:text-white">Breakpoints</Text>
-      <Text tw="dark:text-white xs:(font-bold text-blue-500)">xs</Text>
-      <Text tw="dark:text-white sm:(font-bold text-blue-500)">sm</Text>
-      <Text tw="dark:text-white md:(font-bold text-blue-500)">md</Text>
-      <Text tw="dark:text-white lg:(font-bold text-blue-500)">lg</Text>
-      <Text tw="dark:text-white xl:(font-bold text-blue-500)">xl</Text>
+      <Text tw="dark:text-white xs:(font-bold text-blue-500 dark:text-pink-500)">
+        xs
+      </Text>
+      <Text tw="dark:text-white sm:(font-bold text-blue-500 dark:text-pink-500)">
+        sm
+      </Text>
+      <Text tw="dark:text-white md:(font-bold text-blue-500 dark:text-pink-500)">
+        md
+      </Text>
+      <Text tw="dark:text-white lg:(font-bold text-blue-500 dark:text-pink-500)">
+        lg
+      </Text>
+      <Text tw="dark:text-white xl:(font-bold text-blue-500 dark:text-pink-500)">
+        xl
+      </Text>
 
       <Text tw="mt-8 text-custom">
         Text using custom color from tailwind.config.js
@@ -39,7 +52,7 @@ const App: React.FunctionComponent<AppProps> = ({ toggleTheme }) => {
 }
 
 export default () => {
-  const [dark, setDark] = React.useState(false)
+  const [dark, setDark] = React.useState(getInitialColorScheme() === "dark")
 
   return (
     <TailwindProvider dark={dark}>

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={{ tw: styles.button.id }}>
         <Text style={styles.text}>{label}</Text>
       </View>
     </TouchableWithoutFeedback>

examples/next/package.json

@@ -21,6 +21,8 @@
   },
   "scripts": {
     "start": "yarn clean && yarn next dev",
+    "build": "yarn clean && yarn next build",
+    "serve": "yarn next start",
     "clean": "rimraf .expo/web/cache"
   },
   "prettier": {

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__/__fixtures__/component-with-hook.js

@@ -6,5 +6,5 @@ const Comp = () => {
     [isFocused]
   )
 
-  return <View tw="bg-blue-500" style={box} dataSet={{ media: box.id }} />
+  return <View tw="bg-blue-500" style={box} dataSet={{ tw: box.id }} />
 }

packages/react-native-tailwind.macro/src/__tests__/__fixtures__/existing-data-set-prop.js

@@ -2,4 +2,4 @@ import tw from "../../macro"
 
 const Comp = () => <View tw="px-8" dataSet={{ foo: "bar" }} />
 
-const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", media: "baz" }} />
+const Comp2 = () => <View tw="px-8" dataSet={{ foo: "bar", tw: "baz" }} />