fix: dark mode variables

nativewind · Aug 1, 2023 · a116367 · a116367
1 parent fe3b9bd
commit a116367
Show file tree

Hide file tree

Showing 13 changed files with 219 additions and 125 deletions.
diff --git a/packages/nativewind/src/__tests__/custom-theme.tsx b/packages/nativewind/src/__tests__/custom-theme.tsx
@@ -1,7 +1,8 @@
 import { View } from "react-native";
 import { createMockComponent, renderTailwind } from "../test-utils";
 import { resetStyles } from "react-native-css-interop/testing-library";
-import { screen } from "@testing-library/react-native";
+import { act, screen } from "@testing-library/react-native";
+import { StyleSheet } from "react-native-css-interop";
 
 const testID = "react-native-css-interop";
 const A = createMockComponent(View);
@@ -19,7 +20,11 @@ test("Using css variables", async () => {
       @layer base {
         :root {
           --color-primary: 255 115 179;
-          --color-secondary: 111 114 185;
+        }
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --color-primary: 155 100 255;
+          }
         }
       }
     `,
@@ -35,5 +40,9 @@ test("Using css variables", async () => {
 
   const component = screen.getByTestId(testID);
 
-  expect(component).toHaveStyle({ color: "rgba(0, 0, 0, 1)" });
+  expect(component).toHaveStyle({ color: "rgba(255,115,179,1)" });
+
+  act(() => StyleSheet.setColorScheme("dark"));
+
+  expect(component).toHaveStyle({ color: "rgba(155,100,255,1)" });
 });
diff --git a/packages/nativewind/src/__tests__/dark-mode.tsx b/packages/nativewind/src/__tests__/dark-mode.tsx
@@ -26,28 +26,42 @@ test("darkMode: media", async () => {
   expect(component).toHaveStyle({ color: "rgba(0, 0, 0, 1)" });
 });
 
-test("darkMode: class", async () => {
-  await renderTailwind(<A testID={testID} className="dark:text-black" />, {
-    base: true,
-    config: {
-      darkMode: "class",
+test("darkMode: media variable switching", async () => {
+  await renderTailwind(
+    <A testID={testID} className="text-[color:rgb(var(--color))]" />,
+    {
+      css: `
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+
+          @layer base {
+            :root {
+              --color: 255 115 179;
+            }
+            @media (prefers-color-scheme: dark) {
+              :root {
+                --color: 155 100 255;
+              }
+            }
+          }`,
     },
-  });
+  );
 
   const component = screen.getByTestId(testID);
 
-  expect(component).toHaveStyle({});
+  expect(component).toHaveStyle({ color: "rgb(255,115,179)" });
 
   act(() => StyleSheet.setColorScheme("dark"));
 
-  expect(component).toHaveStyle({ color: "rgba(0, 0, 0, 1)" });
+  expect(component).toHaveStyle({ color: "rgb(155,100,255)" });
 });
 
-test("darkMode: custom class", async () => {
+test("darkMode: class", async () => {
   await renderTailwind(<A testID={testID} className="dark:text-black" />, {
     base: true,
     config: {
-      darkMode: ["class", ".dark-mode"],
+      darkMode: "class",
     },
   });
 
@@ -60,37 +74,36 @@ test("darkMode: custom class", async () => {
   expect(component).toHaveStyle({ color: "rgba(0, 0, 0, 1)" });
 });
 
-test.only("darkMode: root variables", async () => {
-  await renderTailwind(<A testID={testID} className="dark:text-primary" />, {
-    css: `
-      @tailwind base;
-      @tailwind components;
-      @tailwind utilities;
-
-      @layer base {
-        @media(prefers-color-scheme: dark) {
-          :root {
-            --color-primary: 255 115 179;
-            --color-secondary: 111 114 185;
+test.only("darkMode: class variable switching", async () => {
+  await renderTailwind(
+    <A testID={testID} className="text-[color:rgb(var(--color))]" />,
+    {
+      css: `
+          @tailwind base;
+          @tailwind components;
+          @tailwind utilities;
+
+          @layer base {
+            :root {
+              --color: 255 115 179;
+            }
+
+            .dark {
+              --color: 155 100 255;
+            }
           }
-        }
-      }
-      `,
-    config: {
-      theme: {
-        colors: {
-          primary: "rgb(var(--color-primary) / <alpha-value>)",
-          secondary: "rgb(var(--color-secondary) / <alpha-value>)",
-        },
+          `,
+      config: {
+        darkMode: "class",
       },
     },
-  });
+  );
 
   const component = screen.getByTestId(testID);
 
-  expect(component).toHaveStyle({});
+  expect(component).toHaveStyle({ color: "rgb(255,115,179)" });
 
   act(() => StyleSheet.setColorScheme("dark"));
 
-  expect(component).toHaveStyle({ color: "rgba(0, 0, 0, 1)" });
+  expect(component).toHaveStyle({ color: "rgb(155,100,255)" });
 });
diff --git a/packages/nativewind/src/tailwind/native.ts b/packages/nativewind/src/tailwind/native.ts
@@ -2,6 +2,7 @@ import { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
 
 import { darkModeAtRule } from "./dark-mode";
+import { ContentConfig } from "tailwindcss/types/config";
 
 export default function nativewindPreset() {
   const preset: Config = {
@@ -27,12 +28,25 @@ export default function nativewindPreset() {
         },
       },
     },
-    plugins: [platforms, darkModeAtRule],
+    plugins: [forceDark, platforms, darkModeAtRule],
   };
 
   return preset;
 }
 
+/**
+ * The native module requires the `.dark` selector to pickup darkMode variables
+ * when using darkMode: 'class'
+ *
+ * If the user never uses the word 'dark' the selector will never be processed
+ * This is an edge, but one we often encounter in testing (where .dark)
+ * will only contain CSS variables and never referenced directly
+ */
+const forceDark = plugin(function ({ config }) {
+  const content = config<Extract<ContentConfig, { files: any }>>("content");
+  content.files.push({ raw: "dark" });
+});
+
 const platforms = plugin(function ({ addVariant }) {
   const nativePlatforms = ["android", "ios", "windows", "macos"];
 

diff --git a/packages/nativewind/src/test-utils.tsx b/packages/nativewind/src/test-utils.tsx
@@ -45,7 +45,7 @@ export async function renderTailwind<T extends { className: string }>(
     }),
   ]).process(css, { from: undefined });
 
-  console.log(output);
+  // console.log(output);
 
   registerCSS(output, cssToReactNativeRuntimeOptions);
 

diff --git a/packages/react-native-css-interop/src/css-to-rn/index.ts b/packages/react-native-css-interop/src/css-to-rn/index.ts
@@ -118,6 +118,7 @@ function extractRule(
   rule: Rule | CSSInteropAtRule,
   extractOptions: ExtractRuleOptions,
   parseOptions: CssToReactNativeRuntimeOptions,
+  partialStyle: Partial<ExtractedStyle> = {},
 ) {
   // Check the rule's type to determine which extraction function to call
   switch (rule.type) {
@@ -141,7 +142,7 @@ function extractRule(
       if (rule.value.declarations) {
         setStyleForSelectorList(
           {
-            ...extractOptions.style,
+            ...partialStyle,
             ...getExtractedStyle(rule.value.declarations, parseOptions),
           },
           rule.value.selectors,
@@ -215,16 +216,9 @@ function extractMedia(
     return;
   }
 
-  const newExtractOptions: ExtractRuleOptions = {
-    ...extractOptions,
-    style: {
-      media,
-    },
-  };
-
   // Iterate over all rules in the mediaRule and extract their styles using the updated ExtractRuleOptions
   for (const rule of mediaRule.rules) {
-    extractRule(rule, newExtractOptions, parseOptions);
+    extractRule(rule, extractOptions, parseOptions, { media });
   }
 }
 
@@ -238,22 +232,16 @@ function extractedContainer(
   extractOptions: ExtractRuleOptions,
   parseOptions: CssToReactNativeRuntimeOptions,
 ) {
-  // Create a new ExtractRuleOptions object with the updated container query information
-  const newExtractOptions: ExtractRuleOptions = {
-    ...extractOptions,
-    style: {
+  // Iterate over all rules inside the containerRule and extract their styles using the updated ExtractRuleOptions
+  for (const rule of containerRule.rules) {
+    extractRule(rule, extractOptions, parseOptions, {
       containerQuery: [
         {
           name: containerRule.name,
           condition: containerRule.condition,
         },
       ],
-    },
-  };
-
-  // Iterate over all rules inside the containerRule and extract their styles using the updated ExtractRuleOptions
-  for (const rule of containerRule.rules) {
-    extractRule(rule, newExtractOptions, parseOptions);
+    });
   }
 }
 
@@ -293,7 +281,7 @@ function setStyleForSelectorList(
         (!options.darkMode || options.darkMode?.type === "media")
       ) {
         // You can only have 1 media condition
-        if (style.media.length > 1) {
+        if (style.media.length !== 1) {
           continue;
         }
 
@@ -320,6 +308,7 @@ function setStyleForSelectorList(
       Object.assign<ExtractRuleOptions, Partial<ExtractRuleOptions>>(options, {
         [key]: style.variables,
       });
+
       continue;
     }
 

diff --git a/packages/react-native-css-interop/src/css-to-rn/normalize-selectors.ts b/packages/react-native-css-interop/src/css-to-rn/normalize-selectors.ts
@@ -26,6 +26,7 @@ export function normalizeSelectors(
   for (let selector of selectorList) {
     // Ignore `:is()`, and just process its selectors
     if (isIsPseudoClass(selector)) {
+      console.log(selector[0].selectors);
       normalizeSelectors(selector[0].selectors, options, normalizedSelectors);
       continue;
     }
@@ -39,7 +40,7 @@ export function normalizeSelectors(
       continue;
     }
 
-    // Matches: :root .dark {}
+    // Matches: .dark {}
     if (isRootDarkVariableSelector(selector, options)) {
       normalizedSelectors.push({
         type: "variables",
@@ -210,20 +211,15 @@ function isDefaultVariableSelector([first, second]: Selector) {
 
 // Matches:  :root .dark {}
 function isRootDarkVariableSelector(
-  [first, second, third]: Selector,
+  [first, second]: Selector,
   options: ExtractRuleOptions,
 ) {
   return (
     options.darkMode?.type === "class" &&
     first &&
-    second &&
-    third &&
-    first.type === "pseudo-class" &&
-    first.kind === "root" &&
-    second.type === "combinator" &&
-    second.value === "descendant" &&
-    third.type === "class" &&
-    third.name === options.darkMode.value
+    !second &&
+    first.type === "class" &&
+    first.name === options.darkMode.value
   );
 }
 

diff --git a/packages/react-native-css-interop/src/css-to-rn/parseDeclaration.ts b/packages/react-native-css-interop/src/css-to-rn/parseDeclaration.ts
@@ -1496,6 +1496,12 @@ function parseUnparsed(
     }
     case "function": {
       switch (tokenOrValue.value.name) {
+        case "rgb":
+          tokenOrValue.value.name = "rgb";
+          return unparsedFunction(tokenOrValue, options);
+        case "hsl":
+          tokenOrValue.value.name = "hsla";
+          return unparsedFunction(tokenOrValue, options);
         case "translate":
           return unparsedKnownShorthand(
             {
@@ -1521,7 +1527,7 @@ function parseUnparsed(
         case "platformColor":
         case "getPixelSizeForLayoutSize":
         case "roundToNearestPixel":
-        case "getfontScale":
+        case "getFontScale":
         case "getPixelRatio":
           return unparsedFunction(tokenOrValue, options);
         case "hairlineWidth":

diff --git a/packages/react-native-css-interop/src/runtime/native/css-interop.ts b/packages/react-native-css-interop/src/runtime/native/css-interop.ts
@@ -20,7 +20,12 @@ import { flattenStyleProps } from "./flatten-style";
 import { ContainerContext, globalStyles, styleMetaMap } from "./globals";
 import { useInteractionHandlers, useInteractionSignals } from "./interaction";
 import { useComputation } from "../shared/signals";
-import { StyleSheet, VariableContext, useVariables } from "./stylesheet";
+import {
+  StyleSheet,
+  VariableContext,
+  defaultVariables,
+  rootVariables,
+} from "./stylesheet";
 import { DevHotReloadSubscription } from "../../shared";
 
 type CSSInteropWrapperProps = {
@@ -148,10 +153,27 @@ const CSSInteropWrapper = forwardRef(function CSSInteropWrapper(
   ref,
 ) {
   const rerender = useRerender();
-  const inheritedVariables = useVariables();
   const inheritedContainers = useContext(ContainerContext);
   const interaction = useInteractionSignals();
 
+  const $variables = useContext(VariableContext);
+
+  const inheritedVariables = useComputation(
+    () => {
+      // $variables will be null if this is a top-level component
+      if ($variables === null) {
+        return rootVariables.get();
+      } else {
+        return {
+          ...$variables,
+          ...defaultVariables.get(),
+        };
+      }
+    },
+    [$variables],
+    rerender,
+  );
+
   /**
    * If the development environment is enabled, we should rerender all components if the StyleSheet updates.
    * This is because things like :root variables may have updated.

diff --git a/packages/react-native-css-interop/src/runtime/native/flatten-style.ts b/packages/react-native-css-interop/src/runtime/native/flatten-style.ts
@@ -405,6 +405,19 @@ function extractValue(
         spreadCallbackArgs: true,
       });
     }
+    case "rgb": {
+      return createRuntimeFunction(value, flatStyle, flatStyleMeta, options, {
+        joinArgs: false,
+        callback(value: any) {
+          const args = value.slice(4, -1).split(",");
+
+          if (args.length === 4) {
+            return `rgba(${args.join(",")})`;
+          }
+          return value;
+        },
+      });
+    }
     default: {
       return createRuntimeFunction(value, flatStyle, flatStyleMeta, options);
     }