fix(plugin-theme-value): support numeric keys, return correctly negated value

- add tests.
- numeric keys were not supported in previous implementation.
- negated value was always negating as a string type.  Preserve the
  original numeric type if identified.
- cleanup formatting in relating files.

Author: chrisrzhou

cypress/tests/components/element.js

@@ -38,7 +38,7 @@ describe('Element', () => {
           .should('have.prop', 'href', 'https://uinix.dev/');
       });
 
-      it.only('should render as the specified custom element passing through Element props', () => {
+      it('should render as the specified custom element passing through Element props', () => {
         const CustomElement = ({x, ...rest}) => (
           <Element as="a" {...rest}>
             Custom Element: {x}

cypress/tests/renderer/plugin-theme-value.js

@@ -1,9 +1,129 @@
-import {themeValue} from '../../../lib/renderer/plugin-theme-value.js';
+import {
+  _resolveThemeValues as resolveThemeValues,
+  themeValue,
+} from '../../../lib/renderer/plugin-theme-value.js';
 
 describe('themeValue', () => {
   it('should not throw when initialized', () => {
     expect(() => themeValue()).to.not.throw();
   });
 
   it('is tested in system/theme/', () => {});
+
+  describe('resolveThemeValues', () => {
+    it('should return themed style if values do not exist in theme', () => {
+      const style = {
+        backgroundColor: 'blue',
+        padding: 9999,
+      };
+
+      const theme = {
+        colors: {
+          primary: 'red',
+        },
+        spacings: {
+          m: 42,
+        },
+      };
+
+      expect(resolveThemeValues(style, theme)).to.deep.equal({
+        backgroundColor: 'blue',
+        padding: 9999,
+      });
+    });
+
+    it('should resolve a themed style based on provided theme', () => {
+      const style = {
+        backgroundColor: 'brand',
+        padding: 'm',
+      };
+
+      const theme = {
+        colors: {
+          brand: 'red',
+        },
+        spacings: {
+          m: 42,
+        },
+      };
+
+      expect(resolveThemeValues(style, theme)).to.deep.equal({
+        backgroundColor: 'red',
+        padding: 42,
+      });
+    });
+
+    it('should resolve a themed style with nested theme property keys', () => {
+      const style = {
+        backgroundColor: 'brand.primary',
+        padding: 'large.m',
+      };
+
+      const theme = {
+        colors: {
+          brand: {
+            primary: 'red',
+          },
+        },
+        spacings: {
+          large: {
+            m: 42,
+          },
+        },
+      };
+
+      expect(resolveThemeValues(style, theme)).to.deep.equal({
+        backgroundColor: 'red',
+        padding: 42,
+      });
+    });
+
+    it('should resolve a negative theme values', () => {
+      const style = {
+        margin: '-m',
+        padding: '-large.m',
+      };
+
+      const theme = {
+        spacings: {
+          m: '42px',
+          large: {
+            m: 9999,
+          },
+        },
+      };
+
+      expect(resolveThemeValues(style, theme)).to.deep.equal({
+        margin: '-42px',
+        padding: -9999,
+      });
+    });
+
+    it('should resolve a themed style with numeric theme property keys', () => {
+      const style = {
+        marginLeft: 2,
+        marginRight: -2,
+        marginTop: 'large.2',
+        marginBottom: '-large.2',
+        margin: -1234,
+      };
+
+      const theme = {
+        spacings: {
+          2: '42px',
+          large: {
+            2: 9999,
+          },
+        },
+      };
+
+      expect(resolveThemeValues(style, theme)).to.deep.equal({
+        marginLeft: '42px',
+        marginRight: '-42px',
+        marginTop: 9999,
+        marginBottom: -9999,
+        margin: -1234,
+      });
+    });
+  });
 });

lib/renderer/plugin-theme-value.js

@@ -2,6 +2,7 @@ import {isPlainObject, props} from 'uinix-fp';
 import {themeMapping} from 'uinix-theme';
 
 export {themeValue};
+export {resolveThemeValues as _resolveThemeValues};
 
 /**
  * @typedef {import('fela').IStyle} IStyle
@@ -51,22 +52,29 @@ const resolveThemeValues = (style, theme) => {
   const NEGATIVE_REGEXP = /^\s*-/;
   const mapping = createThemeMapping(themeMapping);
 
-  Object.entries(style).forEach(([property, value]) => {
+  Object.entries(style).forEach(([property, styleValue]) => {
     const resolveThemeValue = mapping[property];
-    if (resolveThemeValue && typeof value === 'string') {
-      const isNegative = NEGATIVE_REGEXP.test(value);
+    if (resolveThemeValue) {
+      const isNegative = NEGATIVE_REGEXP.test(styleValue);
       if (isNegative) {
-        value = value.split(NEGATIVE_REGEXP)[1].trim();
+        styleValue = String(styleValue).split(NEGATIVE_REGEXP)[1].trim();
       }
 
-      const themeValue = props(value)(resolveThemeValue(theme)) || value;
+      const resolvedValue =
+        props(String(styleValue))(resolveThemeValue(theme)) || styleValue;
+      const isNumber = !Number.isNaN(Number(resolvedValue));
       // @ts-ignore: we CAN access from IStyle
-      style[property] = isNegative ? `-${themeValue}` : themeValue;
-    } else if (isPlainObject(value)) {
+      style[property] = isNegative
+        ? isNumber
+          ? -resolvedValue
+          : `-${resolvedValue}`
+        : resolvedValue;
+    } else if (isPlainObject(styleValue)) {
       // @ts-ignore: we CAN access from IStyle
       style[property] = resolveThemeValues(style[property], theme);
     }
   });
+
   return style;
 };
 

lib/util/parse-svg-element.js

@@ -1,6 +1,8 @@
 import {toH} from 'hast-to-hyperscript';
 import {parse} from 'svg-parser';
 
+export {parseSvgElement};
+
 /**
  * @typedef {import('../types.js').H} H
  */
@@ -13,7 +15,7 @@ import {parse} from 'svg-parser';
  * @param {string} [options.svg]
  * @returns {ReturnType<H>|null}
  */
-export const parseSvgElement = ({h, svg}) => {
+const parseSvgElement = ({h, svg}) => {
   if (!svg) {
     return null;
   }