perf(css): caching css property names

swordev · May 11, 2023 · bfd31f1 · bfd31f1
1 parent ba63359
commit bfd31f1
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/.changeset/chilled-melons-wash.md b/.changeset/chilled-melons-wash.md
@@ -0,0 +1,5 @@
+---
+"@suid/css": patch
+---
+
+Caching CSS property names
diff --git a/packages/css/src/createStyleObject.ts b/packages/css/src/createStyleObject.ts
@@ -12,6 +12,7 @@ export type StyleObject = {
 export class StyleCache {
   ids = new Map<string /* id */, number>();
   rules = new Map<string /* rule */, StyleObject>();
+  propertyNames = new Map<string /* property */, string>();
   create(name: string, rules: string, componentId: string) {
     let styleObject = this.rules.get(rules);
     if (styleObject) return styleObject;
@@ -62,12 +63,14 @@ function create(name: string, rules: string, id: string) {
 function createStyleObject(options: StyleObjectOptions) {
   const className = `${options.name}-$id`;
   const propsValues = toArray(resolveFunction(options.props));
+  const propertyNameCache = options.cache?.propertyNames;
   const rules = propsValues
     .map((v) =>
       typeof v === "string"
         ? `.${className} {\n${v}\n}`
         : render(v, [`.${className}`], {
             extraProperties: options.extraProperties,
+            propertyNameCache,
           }).join("\n")
     )
     .join("\n");

diff --git a/packages/css/src/render.ts b/packages/css/src/render.ts
@@ -14,6 +14,7 @@ type RenderOptions = {
     [name: string]: (value: any) => any;
   };
   onPropertyValue?: (name: string, value: unknown) => any;
+  propertyNameCache?: Map<string, string>;
 };
 function renderSelector(
   propKey: string,
@@ -36,6 +37,14 @@ function renderSelector(
   );
 }
 
+function snakeCaseWithCache(name: string, cache?: Map<string, string>) {
+  if (!cache) return snakeCase(name);
+  let result = cache.get(name);
+  if (result) return result;
+  cache.set(name, (result = snakeCase(name)));
+  return result;
+}
+
 function render(
   css: Record<string, any>,
   selectors: string[] = [],
@@ -84,10 +93,15 @@ function render(
           ? options.onPropertyValue(extraPropKey, inValue)
           : inValue;
         if (value !== undefined && value !== null)
-          props.push(`${snakeCase(extraPropKey)}: ${value};`);
+          props.push(
+            `${snakeCaseWithCache(
+              extraPropKey,
+              options.propertyNameCache
+            )}: ${value};`
+          );
       }
     } else {
-      propKey = snakeCase(propKey);
+      propKey = snakeCaseWithCache(propKey, options.propertyNameCache);
       const value = options.onPropertyValue
         ? options.onPropertyValue(propKey, propValue)
         : propValue;