fix: auto-convert dynamic property keys and values

kripod · Mar 30, 2020 · 4bca582 · 4bca582
1 parent ff203cd
commit 4bca582
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/example-gatsby/src/components/Text.tsx b/packages/example-gatsby/src/components/Text.tsx
@@ -10,7 +10,10 @@ export function Text({ className = '', ...restProps }: TextProps): JSX.Element {
 
   return (
     <p
-      className={`${className} ${sx({ color: 'white', bg: 'black' })}`}
+      className={`${className} ${sx({
+        color: 'white',
+        backgroundColor: 'black',
+      })}`}
       {...restProps}
     />
   );

diff --git a/packages/glaze/src/useStyling.treat.ts b/packages/glaze/src/useStyling.treat.ts
@@ -6,7 +6,7 @@ export default styleMap((theme) => {
     if (scale) {
       const tokens = Object.entries(theme.scales[scale] || {});
       tokens.forEach(([key, value]) => {
-        result[`${property}:${key}`] = { [property]: value };
+        result[`${property}-${key}`] = { [property]: value };
       });
     }
   });

diff --git a/packages/glaze/src/useStyling.ts b/packages/glaze/src/useStyling.ts
@@ -8,6 +8,10 @@ import { Style } from 'treat';
 import { GlazeContext } from './GlazeContext';
 import styleRefs from './useStyling.treat';
 
+function kebabCaseReplacer(match: string): string {
+  return `-${match.toLowerCase()}`;
+}
+
 export type ThemedStyle = Style & {
   // TODO: Add more precise styles for aliases and shorthands
   [key: string]: CSSProperties[keyof CSSProperties];
@@ -53,11 +57,9 @@ export function useStyling(): (themedStyle: ThemedStyle) => string {
 
       // eslint-disable-next-line no-loop-func
       (theme.shorthands[shorthand] || [shorthand]).forEach((key) => {
-        const style = `${key}:${value}`;
-
         // TODO: Support selectors and media queries
         if (typeof value !== 'object') {
-          let appendedClassName = staticClassNames[style];
+          let appendedClassName = staticClassNames[`${key}-${value}`];
 
           // Attach a class dynamically if needed
           // TODO: Improve support for SSR
@@ -66,10 +68,14 @@ export function useStyling(): (themedStyle: ThemedStyle) => string {
             appendedClassName =
               process.env.NODE_ENV !== 'production'
                 ? `DYNAMIC_${key}-${value}`
-                : `d_${hash(style)}`;
+                : `d_${hash(`${key}-${value}`)}`;
             let usageCount = instancesByClassName.get(appendedClassName);
             if (!usageCount) {
               usageCount = 0;
+              // Convert CSS property to kebab-case and normalize numeric value
+              const style = `${key.replace(/[A-Z]/g, kebabCaseReplacer)}:${
+                typeof value !== 'number' ? value : `${value}px`
+              }`;
               const element = document.createElement('style');
               element.id = appendedClassName;
               element.textContent = `.${appendedClassName}{${style}}`;