feat: add preExpand meta info to expanded tokens

amzn · Jul 8, 2024 · 59a1f2e · 59a1f2e
1 parent e8aea2f
commit 59a1f2e
Show file tree

Hide file tree

Showing 4 changed files with 499 additions and 5 deletions.
diff --git a/.changeset/swift-scissors-cover.md b/.changeset/swift-scissors-cover.md
@@ -0,0 +1,5 @@
+---
+'style-dictionary': minor
+---
+
+When expanding object-value tokens, add some metadata about what type the token belonged to before expanding, and which property. This is useful e.g. for transforms to target specific object-value properties like lineHeights. When expanding, the type is aligned to the `number` type (DTCG), but you may want to transform `lineHeight` (not a known DTCG type) tokens but not all `number` tokens.
diff --git a/__tests__/StyleDictionary.test.js b/__tests__/StyleDictionary.test.js
@@ -506,14 +506,38 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.
           color: {
             type: 'color',
             value: '#000',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'color',
+                  type: 'border',
+                },
+              },
+            },
           },
           style: {
             type: 'strokeStyle',
             value: 'solid',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'style',
+                  type: 'border',
+                },
+              },
+            },
           },
           width: {
             type: 'dimension',
             value: '2px',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'width',
+                  type: 'border',
+                },
+              },
+            },
           },
         },
       });
@@ -547,14 +571,38 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.
           color: {
             type: 'color',
             value: '#000',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'color',
+                  type: 'border',
+                },
+              },
+            },
           },
           style: {
             type: 'strokeStyle',
             value: 'solid',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'style',
+                  type: 'border',
+                },
+              },
+            },
           },
           width: {
             type: 'dimension',
             value: '2px',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'width',
+                  type: 'border',
+                },
+              },
+            },
           },
         },
       });
@@ -605,14 +653,38 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.
           color: {
             type: 'color',
             value: '#000',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'color',
+                  type: 'border',
+                },
+              },
+            },
           },
           style: {
             type: 'strokeStyle',
             value: 'solid',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'style',
+                  type: 'border',
+                },
+              },
+            },
           },
           width: {
             type: 'dimension',
             value: '2px',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'width',
+                  type: 'border',
+                },
+              },
+            },
           },
         },
         borderTwo: input.borderTwo,
@@ -622,28 +694,76 @@ Use log.verbosity "verbose" or use CLI option --verbose for more details.
           color: {
             type: 'color',
             value: '#000',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'color',
+                  type: 'border',
+                },
+              },
+            },
           },
           style: {
             type: 'strokeStyle',
             value: 'solid',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'style',
+                  type: 'border',
+                },
+              },
+            },
           },
           width: {
             type: 'dimension',
             value: '2px',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'width',
+                  type: 'border',
+                },
+              },
+            },
           },
         },
         borderTwo: {
           color: {
             type: 'color',
             value: '#ccc',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'color',
+                  type: 'border',
+                },
+              },
+            },
           },
           style: {
             type: 'strokeStyle',
             value: 'dashed',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'style',
+                  type: 'border',
+                },
+              },
+            },
           },
           width: {
             type: 'dimension',
             value: '1px',
+            $extensions: {
+              'com.styledictionary': {
+                preExpand: {
+                  prop: 'width',
+                  type: 'border',
+                },
+              },
+            },
           },
         },
       });