refactor: MediaRecord

__tests__/tailwindcss/container.ts

@@ -14,11 +14,11 @@ tailwindRunner("Layout - Container", [
       },
       media: {
         container: [
-          { media: ["(min-width: 640px)"], suffix: 1 },
-          { media: ["(min-width: 768px)"], suffix: 2 },
-          { media: ["(min-width: 1024px)"], suffix: 3 },
-          { media: ["(min-width: 1280px)"], suffix: 4 },
-          { media: ["(min-width: 1536px)"], suffix: 5 },
+          ["(min-width: 640px)", 1],
+          ["(min-width: 768px)", 2],
+          ["(min-width: 1024px)", 3],
+          ["(min-width: 1280px)", 4],
+          ["(min-width: 1536px)", 5],
         ],
       },
     },
@@ -27,33 +27,21 @@ tailwindRunner("Layout - Container", [
     "sm:container",
     {
       styles: {
-        "sm_container_0": { width: "100%" },
-        "sm_container_1": { maxWidth: 640 },
-        "sm_container_2": { maxWidth: 768 },
-        "sm_container_3": { maxWidth: 1024 },
-        "sm_container_4": { maxWidth: 1280 },
-        "sm_container_5": { maxWidth: 1536 },
+        sm_container_0: { width: "100%" },
+        sm_container_1: { maxWidth: 640 },
+        sm_container_2: { maxWidth: 768 },
+        sm_container_3: { maxWidth: 1024 },
+        sm_container_4: { maxWidth: 1280 },
+        sm_container_5: { maxWidth: 1536 },
       },
       media: {
-        "sm_container": [
-          { media: ["(min-width: 640px)"], suffix: 0 },
-          { media: ["(min-width: 640px)"], suffix: 1 },
-          {
-            media: ["(min-width: 640px)", "(min-width: 768px)"],
-            suffix: 2,
-          },
-          {
-            media: ["(min-width: 640px)", "(min-width: 1024px)"],
-            suffix: 3,
-          },
-          {
-            media: ["(min-width: 640px)", "(min-width: 1280px)"],
-            suffix: 4,
-          },
-          {
-            media: ["(min-width: 640px)", "(min-width: 1536px)"],
-            suffix: 5,
-          },
+        sm_container: [
+          ["(min-width: 640px)", 0],
+          ["(min-width: 640px)", 1],
+          ["(min-width: 640px) and (min-width: 768px)", 2],
+          ["(min-width: 640px) and (min-width: 1024px)", 3],
+          ["(min-width: 640px) and (min-width: 1280px)", 4],
+          ["(min-width: 640px) and (min-width: 1536px)", 5],
         ],
       },
     },

__tests__/tailwindcss/runner.ts

@@ -1,7 +1,7 @@
-import { MediaRecord, StyleRecord } from "../../src/babel/types";
 import { getNativeTailwindConfig } from "../../src/babel/tailwind/native-config";
 import { extractStyles } from "../../src/babel/native-style-extraction";
 import { normaliseSelector } from "../../src/shared/selector";
+import { MediaRecord, StyleRecord } from "../../src/types/common";
 
 const nativeConfig = getNativeTailwindConfig();
 

__tests__/visitor/allow-modules/output.tsx

@@ -43,25 +43,10 @@ Object.assign(
 );
 Object.assign(globalThis.tailwindcss_react_native_media, {
   container: [
-    {
-      media: ["(min-width: 640px)"],
-      suffix: 1,
-    },
-    {
-      media: ["(min-width: 768px)"],
-      suffix: 2,
-    },
-    {
-      media: ["(min-width: 1024px)"],
-      suffix: 3,
-    },
-    {
-      media: ["(min-width: 1280px)"],
-      suffix: 4,
-    },
-    {
-      media: ["(min-width: 1536px)"],
-      suffix: 5,
-    },
+    ["(min-width: 640px)", 1],
+    ["(min-width: 768px)", 2],
+    ["(min-width: 1024px)", 3],
+    ["(min-width: 1280px)", 4],
+    ["(min-width: 1536px)", 5],
   ],
 });

__tests__/visitor/basic-tw/output.tsx

@@ -41,25 +41,10 @@ Object.assign(
 );
 Object.assign(globalThis.tailwindcss_react_native_media, {
   container: [
-    {
-      media: ["(min-width: 640px)"],
-      suffix: 1,
-    },
-    {
-      media: ["(min-width: 768px)"],
-      suffix: 2,
-    },
-    {
-      media: ["(min-width: 1024px)"],
-      suffix: 3,
-    },
-    {
-      media: ["(min-width: 1280px)"],
-      suffix: 4,
-    },
-    {
-      media: ["(min-width: 1536px)"],
-      suffix: 5,
-    },
+    ["(min-width: 640px)", 1],
+    ["(min-width: 768px)", 2],
+    ["(min-width: 1024px)", 3],
+    ["(min-width: 1280px)", 4],
+    ["(min-width: 1536px)", 5],
   ],
 });

__tests__/visitor/basic/output.tsx

@@ -41,25 +41,10 @@ Object.assign(
 );
 Object.assign(globalThis.tailwindcss_react_native_media, {
   container: [
-    {
-      media: ["(min-width: 640px)"],
-      suffix: 1,
-    },
-    {
-      media: ["(min-width: 768px)"],
-      suffix: 2,
-    },
-    {
-      media: ["(min-width: 1024px)"],
-      suffix: 3,
-    },
-    {
-      media: ["(min-width: 1280px)"],
-      suffix: 4,
-    },
-    {
-      media: ["(min-width: 1536px)"],
-      suffix: 5,
-    },
+    ["(min-width: 640px)", 1],
+    ["(min-width: 768px)", 2],
+    ["(min-width: 1024px)", 3],
+    ["(min-width: 1280px)", 4],
+    ["(min-width: 1536px)", 5],
   ],
 });

__tests__/visitor/skip-transform/output.tsx

@@ -38,25 +38,10 @@ Object.assign(
 );
 Object.assign(globalThis.tailwindcss_react_native_media, {
   container: [
-    {
-      media: ["(min-width: 640px)"],
-      suffix: 1,
-    },
-    {
-      media: ["(min-width: 768px)"],
-      suffix: 2,
-    },
-    {
-      media: ["(min-width: 1024px)"],
-      suffix: 3,
-    },
-    {
-      media: ["(min-width: 1280px)"],
-      suffix: 4,
-    },
-    {
-      media: ["(min-width: 1536px)"],
-      suffix: 5,
-    },
+    ["(min-width: 640px)", 1],
+    ["(min-width: 768px)", 2],
+    ["(min-width: 1024px)", 3],
+    ["(min-width: 1280px)", 4],
+    ["(min-width: 1536px)", 5],
   ],
 });

src/babel/native-style-extraction/get-parsed-rules.ts

@@ -2,12 +2,12 @@ import { parse, AtRule, Comment, Media, Rule } from "css";
 import { TailwindConfig } from "tailwindcss/tailwind-config";
 
 import { normaliseSelector } from "../../shared/selector";
-import { Style } from "../types";
+import { Style } from "../../types/common";
 import { ruleToReactNative } from "./rule-to-react-native";
 
 interface CssRule {
   selector: string;
-  media: string[];
+  media: string;
   style: Style;
 }
 
@@ -51,7 +51,7 @@ function* cssRuleIterator(
       for (const selector of cssRule.selectors ?? []) {
         yield {
           selector: normaliseSelector(selector, tailwindConfig),
-          media,
+          media: media.join(" and "),
           style,
         };
       }

src/babel/native-style-extraction/index.ts

@@ -1,12 +1,11 @@
-import { MediaRecord, StyleRecord } from "../types";
-
+import { TailwindConfig } from "tailwindcss/tailwind-config";
 import postcss from "postcss";
 import tailwind from "tailwindcss";
 import postcssCssvariables from "postcss-css-variables";
 import postcssColorFunctionalNotation from "postcss-color-functional-notation";
 
 import { getParsedRules } from "./get-parsed-rules";
-import { TailwindConfig } from "tailwindcss/tailwind-config";
+import { MediaRecord, StyleRecord } from "../../types/common";
 
 export function extractStyles(
   tailwindConfig: TailwindConfig,
@@ -36,7 +35,7 @@ export function cssToRn(processedCss: string, tailwindConfig: TailwindConfig) {
       styles[`${selector}_${suffix}`] = style;
       // Store the conditions, along with the suffix
       mediaRules[selector] = mediaRules[selector] ?? [];
-      mediaRules[selector].push({ media, suffix });
+      mediaRules[selector].push([media, suffix]);
     } else {
       // If there are no conditions, we merge the rules
       styles[selector] = {

src/babel/transforms/append-variables.ts

@@ -13,7 +13,7 @@ import {
   stringLiteral,
   unaryExpression,
 } from "@babel/types";
-import { MediaRecord, StyleRecord } from "../types";
+import { MediaRecord, StyleRecord } from "../../types/common";
 import { globalMedia, globalStyle } from "./constants";
 
 export function appendVariables(

src/babel/types.d.ts

@@ -1,12 +1,5 @@
 import { ViewStyle, TextStyle, ImageStyle } from "react-native";
 
-export type Style = ViewStyle | TextStyle | ImageStyle;
-export type StyleRecord = Record<string, Style>;
-export type MediaRecord = Record<
-  string,
-  Array<{ media: string[]; suffix: number }>
->;
-
 export type PathOption = string;
 export type AllowPathOptions = "*" | PathOption[];
 

src/context.ts

@@ -1,25 +1,12 @@
 import { createContext } from "react";
-import {
-  Appearance,
-  ColorSchemeName,
-  ImageStyle,
-  Platform,
-  TextStyle,
-  ViewStyle,
-} from "react-native";
-
-export type StyleRecord = Record<string, ViewStyle | TextStyle | ImageStyle>;
-
-export type MediaRules = Record<
-  string,
-  Array<{ media: string[]; suffix: number }>
->;
+import { Appearance, ColorSchemeName, Platform } from "react-native";
+import { MediaRecord, StyleRecord } from "./types/common";
 
 declare global {
   // eslint-disable-next-line no-var
   var tailwindcss_react_native_style: StyleRecord;
   // eslint-disable-next-line no-var
-  var tailwindcss_react_native_media: MediaRules;
+  var tailwindcss_react_native_media: MediaRecord;
 }
 
 globalThis.tailwindcss_react_native_style ??= {};
@@ -28,7 +15,7 @@ globalThis.tailwindcss_react_native_media ??= {};
 export const TailwindStyleContext = createContext<StyleRecord>(
   globalThis.tailwindcss_react_native_style
 );
-export const TailwindMediaContext = createContext<MediaRules>(
+export const TailwindMediaContext = createContext<MediaRecord>(
   globalThis.tailwindcss_react_native_media
 );
 

src/provider.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren, useState } from "react";
 import { ColorSchemeName, Appearance, Platform } from "react-native";
 
+import type { MediaRecord, StyleRecord } from "./types/common";
+
 import {
-  MediaRules,
-  StyleRecord,
   TailwindColorSchemeContext,
   TailwindMediaContext,
   TailwindPlatformContext,
@@ -13,7 +13,7 @@ import {
 
 export interface TailwindProviderProps {
   styles?: StyleRecord;
-  media?: MediaRules;
+  media?: MediaRecord;
   colorScheme?: ColorSchemeName;
   platform?: typeof Platform.OS | "native";
 }

src/types/common.d.ts

@@ -0,0 +1,10 @@
+import type {
+  ImageStyle,
+  TextStyle,
+  ViewStyle,
+} from "react-native";
+
+export type Style = ViewStyle | TextStyle | ImageStyle;
+export type StyleRecord = Record<string, Style>;
+export type Media = [string, number];
+export type MediaRecord = Record<string, Media[]>;

src/use-tailwind.ts

@@ -15,10 +15,7 @@ import {
   TailwindPlatformContext,
   TailwindStyleContext,
 } from "./context";
-import {
-  // useAccessibilityInfo,
-  useDeviceOrientation,
-} from "@react-native-community/hooks";
+import { useDeviceOrientation } from "@react-native-community/hooks";
 
 export function useTailwind<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,7 +40,7 @@ export function useTailwind<
   const mediaRules = useContext(TailwindMediaContext);
   const colorScheme = useContext(TailwindColorSchemeContext);
   const { width, height } = useWindowDimensions();
-  // const { reduceMotionEnabled: reduceMotion } = useAccessibilityInfo()
+  // const { reduceMotionEnabled: reduceMotion } = useAccessibilityInfo() // We should support this
   const orientation = useDeviceOrientation().portrait
     ? "portrait"
     : "landscape";
@@ -57,21 +54,19 @@ export function useTailwind<
       tailwindStyleIds.push(styles[selector] as P);
     }
 
-    for (const { media, suffix } of mediaRules[selector] ?? []) {
-      if (!media) {
-        tailwindStyleIds.push(styles[`${className}_${suffix}`] as P);
-        continue;
-      }
-
-      const isMatch = matchMediaQuery(media.join(" and "), {
+    for (const [media, suffix] of mediaRules[selector] ?? []) {
+      const isMatch = matchMediaQuery(media, {
         width,
+        "device-width": width,
+        "device-height": width,
         height,
         orientation,
+
         "prefers-color-scheme": colorScheme,
       });
 
       if (isMatch) {
-        tailwindStyleIds.push(styles[`${selector}${suffix}`] as P);
+        tailwindStyleIds.push(styles[`${selector}_${suffix}`] as P);
       }
     }
   }