Memoize hash function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/css",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "description": "A lightweight and performant atomic CSS-in-JS library",
   "author": "Mathieu Acthernoene <[email protected]>",

src/hash.ts

@@ -0,0 +1,4 @@
+import rawHash from "@emotion/hash";
+import { memoize } from "./utils";
+
+export const hash = memoize(rawHash);

src/hyphenateName.ts

@@ -1,12 +1,9 @@
 // https://github.com/facebook/react/blob/v19.0.0/packages/react-dom-bindings/src/shared/hyphenateStyleName.js
 
-const uppercasePattern = /([A-Z])/g;
-const hyphenateNameCache: Record<string, string> = {};
+import { memoize } from "./utils";
 
-export const hyphenateName = (name: string): string => {
-  hyphenateNameCache[name] ??= name
-    .replace(uppercasePattern, "-$1")
-    .toLowerCase();
+const uppercasePattern = /([A-Z])/g;
 
-  return hyphenateNameCache[name];
-};
+export const hyphenateName = memoize((name: string): string =>
+  name.replace(uppercasePattern, "-$1").toLowerCase(),
+);

src/normalizeValue.ts

@@ -1,7 +1,7 @@
 import normalizeColor from "@react-native/normalize-colors";
 import { Property } from "./types";
 
-const normalizeValueCache: Record<string, string> = {};
+const normalizeValueCache: Record<string, string> = Object.create(null);
 
 /**
  * CSS properties which accept numbers but are not in units of "px"
@@ -64,16 +64,13 @@ const isWebColor = (color: string): boolean =>
   color === "inherit" ||
   color.indexOf("var(") === 0;
 
-export const normalizeValue = (
-  value: string | number | undefined,
-  property: string,
-): string | undefined => {
+export const normalizeValue = (key: string, value: string | number): string => {
   if (typeof value === "number") {
-    return unitlessProperties.has(property) ? String(value) : `${value}px`;
+    return unitlessProperties.has(key) ? String(value) : `${value}px`;
   }
 
-  if (colorProperties.has(property)) {
-    if (value == null || isWebColor(value)) {
+  if (colorProperties.has(key)) {
+    if (isWebColor(value)) {
       return value;
     }
 

src/sheet.ts

@@ -1,4 +1,4 @@
-import hash from "@emotion/hash";
+import { hash } from "./hash";
 import { hyphenateName } from "./hyphenateName";
 import { normalizeValue } from "./normalizeValue";
 import { ClassNames, Keyframes, Nestable, Style } from "./types";
@@ -53,15 +53,15 @@ const insertRule = (sheet: CSSMediaRule, rule: string): void => {
   }
 };
 
-const stringifyRule = (name: string, value: string | number): string => {
-  if (name === "appearance") {
+const stringifyRule = (key: string, value: string | number): string => {
+  if (key === "appearance") {
     return `-webkit-appearance: ${value}; appearance: ${value};`;
   }
-  if (name === "lineClamp") {
+  if (key === "lineClamp") {
     return `-webkit-line-clamp: ${value}; line-clamp: ${value};`;
   }
 
-  return `${hyphenateName(name)}: ${normalizeValue(value, name)};`;
+  return `${hyphenateName(key)}: ${normalizeValue(key, value)};`;
 };
 
 const extractClassNames = (items: ClassNames, acc: string[]): string[] => {

src/utils.ts

@@ -14,3 +14,15 @@ export const forEach = <T extends Record<PropertyKey, unknown>>(
     }
   }
 };
+
+export const memoize = <T>(fn: (arg: string) => T) => {
+  const cache: Record<string, T> = Object.create(null);
+
+  return (arg: string): T => {
+    if (cache[arg] == null) {
+      cache[arg] = fn(arg);
+    }
+
+    return cache[arg];
+  };
+};