fix: typeDtcgDelegate at any position, size/rem apply to unitless values (#1210)

Author: jorenbroekema

Diff for: .changeset/eleven-llamas-raise.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': patch
+---
+
+Fix typeDtcgDelegate util $type property position to be allowed anywhere in the object, not just at the top.

Diff for: .changeset/fuzzy-gorillas-prove.md

@@ -0,0 +1,5 @@
+---
+'style-dictionary': minor
+---
+
+'size/rem' transform to not transform tokens that already have a unit, such as `"4px"`, this should not be transformed to `"4rem"`.

Diff for: __tests__/utils/typeDtcgDelegate.test.js

@@ -92,5 +92,83 @@ describe('utils', () => {
         },
       });
     });
+
+    it('should work regardless at which position the $type property sits', () => {
+      const tokens = {
+        dimension: {
+          scale: {
+            $value: '2',
+            $type: 'math',
+          },
+          xs: {
+            $value: '4',
+          },
+          nested: {
+            deep: {
+              deeper: {
+                $value: '12',
+              },
+            },
+            deep2: {
+              $type: 'math',
+              deeper: {
+                $type: 'other',
+                evenDeeper: {
+                  $value: '12',
+                  $type: 'math',
+                },
+                evenDeeper2: {
+                  $value: '12',
+                },
+              },
+            },
+          },
+          sm: {
+            $value: '8',
+          },
+          $type: 'dimension',
+        },
+      };
+
+      expect(typeDtcgDelegate(tokens)).to.eql({
+        dimension: {
+          $type: 'dimension',
+          scale: {
+            $value: '2',
+            $type: 'math',
+          },
+          xs: {
+            $value: '4',
+            $type: 'dimension',
+          },
+          nested: {
+            deep: {
+              deeper: {
+                $value: '12',
+                $type: 'dimension',
+              },
+            },
+            deep2: {
+              $type: 'math',
+              deeper: {
+                $type: 'other',
+                evenDeeper: {
+                  $value: '12',
+                  $type: 'math',
+                },
+                evenDeeper2: {
+                  $value: '12',
+                  $type: 'other',
+                },
+              },
+            },
+          },
+          sm: {
+            $value: '8',
+            $type: 'dimension',
+          },
+        },
+      });
+    });
   });
 });

Diff for: lib/common/transforms.js

@@ -786,6 +786,10 @@ export default {
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, _, options) {
       const nonParsed = options.usesDtcg ? token.$value : token.value;
+      // if the dimension already has a unit (non-digit / . period character)
+      if (`${nonParsed}`.match(/[^0-9.]/g)) {
+        return nonParsed;
+      }
       const parsedVal = parseFloat(nonParsed);
       if (isNaN(parsedVal)) throwSizeError(token.name, nonParsed, 'rem');
       return parsedVal + 'rem';

Diff for: lib/utils/typeDtcgDelegate.js

@@ -23,11 +23,11 @@ export function typeDtcgDelegate(tokens) {
       slice.$type = type;
     }
 
-    Object.entries(slice).forEach(([key, val]) => {
-      if (key === '$type') {
-        type = val;
-      }
+    if (slice['$type']) {
+      type = /** @type {string} */ (slice.$type);
+    }
 
+    Object.values(slice).forEach((val) => {
       if (isPlainObject(val)) {
         recurse(val, type);
       }