perf: remove memoization, just return the compiled string

Author: jaredLunde

src/index.test.ts

@@ -33,11 +33,7 @@ describe("mq()", () => {
 
   it("should return a css getter when first argument is an object", () => {
     const breakpoint = mq(styles, breakpoints);
-    expect(
-      breakpoint({ phone: ({ color }) => `color: ${color.blue};` })({
-        color: { blue: "var(--color-blue)" },
-      })
-    ).toBe(
+    expect(breakpoint({ phone: ({ color }) => `color: ${color.blue};` })).toBe(
       "@media only screen and (min-width: 0em){color: var(--color-blue);}"
     );
   });
@@ -48,8 +44,6 @@ describe("mq()", () => {
       breakpoint({
         default: `color: green;`,
         phone: ({ color }) => `color: ${color.blue};`,
-      })({
-        color: { blue: "var(--color-blue)" },
       })
     ).toBe(
       "color: green;@media only screen and (min-width: 0em){color: var(--color-blue);}"
@@ -62,8 +56,6 @@ describe("mq()", () => {
       breakpoint({
         default: `color: green;`,
         phone: `color:var(--color-blue);`,
-      })({
-        color: { blue: "var(--color-blue)" },
       })
     ).toBe(
       "color: green;@media only screen and (min-width: 0em){color:var(--color-blue);}"
@@ -72,22 +64,12 @@ describe("mq()", () => {
 
   it("should apply styles for breakpoint objects w/ object style", () => {
     const breakpoint = mq(styles, breakpoints);
-    const bp = breakpoint({
-      default: `color: green;`,
-      phone: {
-        color: "var(--color-blue)",
-      },
-    });
     expect(
-      bp({
-        color: { blue: "var(--color-blue)" },
-      })
-    ).toBe(
-      "color: green;@media only screen and (min-width: 0em){color:var(--color-blue);}"
-    );
-    expect(
-      bp({
-        color: { blue: "var(--color-blue)" },
+      breakpoint({
+        default: `color: green;`,
+        phone: {
+          color: "var(--color-blue)",
+        },
       })
     ).toBe(
       "color: green;@media only screen and (min-width: 0em){color:var(--color-blue);}"

src/index.ts

@@ -19,7 +19,6 @@ function mq<
   Themes extends DashThemes = DashThemes,
   QueryNames extends string = string
 >(styles: Styles<Tokens, Themes>, mediaQueries: MediaQueries<QueryNames>) {
-  const oneMemo = memoize(styles.one);
   /**
    * A utility for adding media queries and breakpoints to Dash styles
    *
@@ -39,47 +38,29 @@ function mq<
     if (typeof queryName === "string") {
       return `@media ${mediaQueries[queryName]}`;
     } else {
-      return () => {
-        let css = "";
+      let css = "";
 
-        for (const key in queryName) {
-          let value =
-            queryName[
-              key as keyof MediaQueryObject<QueryNames, Tokens, Themes>
-            ];
-          value =
-            !value || typeof value === "string" ? value || "" : oneMemo(value);
+      for (const key in queryName) {
+        let value =
+          queryName[key as keyof MediaQueryObject<QueryNames, Tokens, Themes>];
+        value =
+          !value || typeof value === "string"
+            ? value || ""
+            : styles.one(value).css();
 
-          css +=
-            key === "default"
-              ? value
-              : `@media ${mediaQueries[key as QueryNames]}{${value}}`;
-        }
+        css +=
+          key === "default"
+            ? value
+            : `@media ${mediaQueries[key as QueryNames]}{${value}}`;
+      }
 
-        return css;
-      };
+      return css;
     }
   }
 
   return mqStyles;
 }
 
-function memoize(fn: Styles<any, any>["one"]) {
-  const cache = new WeakMap<StyleObject | StyleCallback<any, any>, string>();
-
-  return (value: StyleObject | StyleCallback<any, any>) => {
-    const cached = cache.get(value);
-
-    if (cached) {
-      return cached;
-    }
-
-    const css = fn(value).css();
-    cache.set(value, css);
-    return css;
-  };
-}
-
 export default mq;
 
 export type MediaQueries<QueryNames extends string> = {