fix(custom-properties): use default key name if pluralize returns empty string

Author: wahidrahim

packages/custom-properties/src/index.ts

@@ -14,7 +14,7 @@ export default function makeCustomProperties(theme: Theme, prefix?: string) {
 
   const generateProperties = (object: object, previousKey?: string) => {
     Object.entries(object).forEach(([key, value]) => {
-      let formattedKey = pluralize(key, 1)
+      let formattedKey = pluralize(key, 1) || key
 
       if (
         process.env.NODE_ENV !== 'production' &&

packages/custom-properties/test/__snapshots__/test.mjs.snap

@@ -18,6 +18,9 @@ exports[`transforms a theme config to CSS custom properties 1`] = `
   "--fontWeight-heading": 700,
   "--lineHeight-0": 1.5,
   "--lineHeight-1": 1.125,
+  "--radius-l": "0.5em",
+  "--radius-m": "0.25em",
+  "--radius-s": "0.125em",
   "--size-0": "10em",
   "--size-1": "20em",
   "--size-2": "30em",
@@ -49,6 +52,9 @@ exports[`transforms a theme config to CSS custom properties with prefix 1`] = `
   "--🍭-fontWeight-heading": 700,
   "--🍭-lineHeight-0": 1.5,
   "--🍭-lineHeight-1": 1.125,
+  "--🍭-radius-l": "0.5em",
+  "--🍭-radius-m": "0.25em",
+  "--🍭-radius-s": "0.125em",
   "--🍭-size-0": "10em",
   "--🍭-size-1": "20em",
   "--🍭-size-2": "30em",

packages/custom-properties/test/test.mjs

@@ -37,6 +37,11 @@ const theme = {
   lineHeights: [1.5, 1.125],
   space: [0, 2, 3, 4, 5, 6],
   size: ['10em', '20em', '30em', '40em'],
+  radii: {
+    s: '0.125em',
+    m: '0.25em',
+    l: '0.5em',
+  },
 }
 
 it('transforms a theme config to CSS custom properties', () => {