feat: make ref utils consistent API, apply strict typing (breaking)

* feat: make ref utils consistent API, apply strict typing (breaking) * feat: align reference utils function signatures for consistency (breaking) * chore: type StyleDictionary register methods, make it behave consistent * chore: remove old args formatter
amzn · Dec 23, 2023 · 6cc7f31 · 6cc7f31
1 parent f47f308
commit 6cc7f31
Show file tree

Hide file tree

Showing 149 changed files with 2,633 additions and 2,622 deletions.
diff --git a/.changeset/angry-balloons-yell.md b/.changeset/angry-balloons-yell.md
@@ -0,0 +1,20 @@
+---
+'style-dictionary': major
+---
+
+BREAKING: 
+- `usesReference` util function is now `usesReferences` to be consistent plural form like the other reference util functions.
+- `getReferences` first and second parameters have been swapped to be consistent with `resolveReferences`, so value first, then the full token object (instead of the entire dictionary instance).
+- `getReferences` accepts a third options parameter which can be used to set reference Regex options as well as an unfilteredTokens object which can be used as a fallback when references are made to tokens that have been filtered out. There will be warnings logged for this.
+- `format.formatter` removed old function signature of `(dictionary, platform, file)` in favor of `({ dictionary, platform, options, file })`.
+- Types changes:
+
+  - Style Dictionary is entirely strictly typed now, and there will be `.d.ts` files published next to every file, this means that if you import from one of Style Dictionary's entrypoints, you automatically get the types implicitly with it. This is a big win for people using TypeScript, as the majority of the codebase now has much better types, with much fewer `any`s.
+  - There is no more hand-written Style Dictionary module `index.d.ts` anymore that exposes all type interfaces on itself. This means that you can no longer grab types that aren't members of the Style Dictionary class directly from the default export of the main entrypoint. External types such as `Parser`, `Transform`, `DesignTokens`, etc. can be imported from the newly added types entrypoint:
+
+  ```ts
+  import type { DesignTokens, Transform, Parser } from 'style-dictionary/types';
+  ```
+
+  Please raise an issue if you find anything missing or suddenly broken.
+  - `Matcher`, `Transformer`, `Formatter`, etc. are still available, although no longer directly but rather as properties on their parents, so `Filter['matcher']`, `Transform['transformer']`, `Format['formatter']`
diff --git a/__integration__/__snapshots__/android.test.snap.js b/__integration__/__snapshots__/android.test.snap.js
@@ -171,7 +171,6 @@ snapshots["android/resources should match snapshot"] =
   <dimen name="size_padding_medium">16.00dp</dimen>
   <dimen name="size_padding_large">16.00dp</dimen>
   <dimen name="size_padding_xl">16.00dp</dimen>
-  
 </resources>`;
 /* end snapshot android/resources should match snapshot */
 
@@ -345,7 +344,6 @@ snapshots["android/resources with references should match snapshot"] =
   <dimen name="size_padding_medium">16.00dp</dimen>
   <dimen name="size_padding_large">16.00dp</dimen>
   <dimen name="size_padding_xl">16.00dp</dimen>
-  
 </resources>`;
 /* end snapshot android/resources with references should match snapshot */
 
@@ -510,7 +508,6 @@ snapshots["android/resources with filter should match snapshot"] =
   <color name="color_font_danger">#ff6d1313</color>
   <color name="color_font_warning">#ff601700</color>
   <color name="color_font_success">#ff08422f</color>
-  
 </resources>`;
 /* end snapshot android/resources with filter should match snapshot */
 
diff --git a/__integration__/__snapshots__/customFormats.test.snap.js b/__integration__/__snapshots__/customFormats.test.snap.js
@@ -165,7 +165,7 @@ snapshots["inline custom with old args should match snapshot"] =
           ]
         }
       ],
-      "_tokens": {
+      "unfilteredTokens": {
         "size": {
           "padding": {
             "small": {
@@ -430,6 +430,7 @@ snapshots["inline custom with old args should match snapshot"] =
           }
         }
       ],
+      "log": "warn",
       "transforms": [
         {
           "type": "attribute"
@@ -480,6 +481,7 @@ snapshots["inline custom with old args should match snapshot"] =
         }
       }
     ],
+    "log": "warn",
     "transforms": [
       {
         "type": "attribute"
@@ -669,7 +671,7 @@ snapshots["inline custom with new args should match snapshot"] =
         ]
       }
     ],
-    "_tokens": {
+    "unfilteredTokens": {
       "size": {
         "padding": {
           "small": {
@@ -934,6 +936,7 @@ snapshots["inline custom with new args should match snapshot"] =
         }
       }
     ],
+    "log": "warn",
     "transforms": [
       {
         "type": "attribute"
@@ -1128,7 +1131,7 @@ snapshots["register custom format with old args should match snapshot"] =
           ]
         }
       ],
-      "_tokens": {
+      "unfilteredTokens": {
         "size": {
           "padding": {
             "small": {
@@ -1378,13 +1381,6 @@ snapshots["register custom format with old args should match snapshot"] =
         "otherOption": "platform option"
       },
       "files": [
-        {
-          "destination": "registerCustomFormatWithOldArgs.json",
-          "options": {
-            "showFileHeader": true,
-            "otherOption": "Test"
-          }
-        },
         {
           "destination": "registerCustomFormatWithNewArgs.json",
           "options": {
@@ -1393,6 +1389,7 @@ snapshots["register custom format with old args should match snapshot"] =
           }
         }
       ],
+      "log": "warn",
       "transforms": [
         {
           "type": "attribute"
@@ -1409,13 +1406,6 @@ snapshots["register custom format with old args should match snapshot"] =
       ],
       "actions": []
     },
-    "file": {
-      "options": {
-        "otherOption": "Test",
-        "showFileHeader": true
-      },
-      "destination": "registerCustomFormatWithOldArgs.json"
-    },
     "options": {
       "otherOption": "Test",
       "showFileHeader": true
@@ -1428,13 +1418,6 @@ snapshots["register custom format with old args should match snapshot"] =
       "otherOption": "platform option"
     },
     "files": [
-      {
-        "destination": "registerCustomFormatWithOldArgs.json",
-        "options": {
-          "showFileHeader": true,
-          "otherOption": "Test"
-        }
-      },
       {
         "destination": "registerCustomFormatWithNewArgs.json",
         "options": {
@@ -1443,6 +1426,7 @@ snapshots["register custom format with old args should match snapshot"] =
         }
       }
     ],
+    "log": "warn",
     "transforms": [
       {
         "type": "attribute"
@@ -1458,13 +1442,6 @@ snapshots["register custom format with old args should match snapshot"] =
       }
     ],
     "actions": []
-  },
-  "file": {
-    "destination": "registerCustomFormatWithOldArgs.json",
-    "options": {
-      "showFileHeader": true,
-      "otherOption": "Test"
-    }
   }
 }`;
 /* end snapshot register custom format with old args should match snapshot */
@@ -1632,7 +1609,7 @@ snapshots["register custom format with new args should match snapshot"] =
         ]
       }
     ],
-    "_tokens": {
+    "unfilteredTokens": {
       "size": {
         "padding": {
           "small": {
@@ -1882,13 +1859,6 @@ snapshots["register custom format with new args should match snapshot"] =
       "otherOption": "platform option"
     },
     "files": [
-      {
-        "destination": "registerCustomFormatWithOldArgs.json",
-        "options": {
-          "showFileHeader": true,
-          "otherOption": "Test"
-        }
-      },
       {
         "destination": "registerCustomFormatWithNewArgs.json",
         "options": {
@@ -1897,6 +1867,7 @@ snapshots["register custom format with new args should match snapshot"] =
         }
       }
     ],
+    "log": "warn",
     "transforms": [
       {
         "type": "attribute"

diff --git a/__integration__/__snapshots__/objectValues.test.snap.js b/__integration__/__snapshots__/objectValues.test.snap.js
@@ -121,3 +121,123 @@ $border-primary: $size-border solid $color-red;
 `;
 /* end snapshot scss/variables with references should match snapshot */
 
+snapshots["integration object values css/variables shadow should match snapshot with references"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --shadow-light: var(--color-red), var(--color-green);
+  --shadow-dark: var(--color-green), var(--color-red);
+}
+`;
+/* end snapshot integration object values css/variables shadow should match snapshot with references */
+
+snapshots["integration object values css/variables hsl syntax should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --color-red: #ff0000;
+  --color-green: hsl(120, 50%, 50%);
+}
+`;
+/* end snapshot integration object values css/variables hsl syntax should match snapshot */
+
+snapshots["integration object values css/variables hsl syntax with references should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --color-red: #ff0000;
+  --color-green: hsl(120, 50%, 50%);
+}
+`;
+/* end snapshot integration object values css/variables hsl syntax with references should match snapshot */
+
+snapshots["integration object values css/variables hex syntax should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --color-red: #ff0000;
+  --color-green: #40bf40;
+}
+`;
+/* end snapshot integration object values css/variables hex syntax should match snapshot */
+
+snapshots["integration object values css/variables hex syntax with references should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --color-red: #ff0000;
+  --color-green: #40bf40;
+}
+`;
+/* end snapshot integration object values css/variables hex syntax with references should match snapshot */
+
+snapshots["integration object values css/variables border should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --border-primary: 0.125rem solid #ff0000;
+}
+`;
+/* end snapshot integration object values css/variables border should match snapshot */
+
+snapshots["integration object values css/variables border with references should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --border-primary: var(--size-border) solid var(--color-red);
+}
+`;
+/* end snapshot integration object values css/variables border with references should match snapshot */
+
+snapshots["integration object values css/variables shadow should match snapshot"] = 
+`/**
+ * Do not edit directly
+ * Generated on Sat, 01 Jan 2000 00:00:00 GMT
+ */
+
+:root {
+  --shadow-light: #ff0000, #40bf40;
+  --shadow-dark: #40bf40, #ff0000;
+}
+`;
+/* end snapshot integration object values css/variables shadow should match snapshot */
+
+snapshots["integration object values scss/variables should match snapshot"] = 
+`
+// Do not edit directly
+// Generated on Sat, 01 Jan 2000 00:00:00 GMT
+
+$border-primary: 0.125rem solid #ff0000;
+`;
+/* end snapshot integration object values scss/variables should match snapshot */
+
+snapshots["integration object values scss/variables with references should match snapshot"] = 
+`
+// Do not edit directly
+// Generated on Sat, 01 Jan 2000 00:00:00 GMT
+
+$border-primary: $size-border solid $color-red;
+`;
+/* end snapshot integration object values scss/variables with references should match snapshot */
+
diff --git a/__integration__/android.test.js b/__integration__/android.test.js
@@ -23,7 +23,7 @@ describe('integration', () => {
 
   describe('android', async () => {
     const sd = new StyleDictionary({
-      source: [`__integration__/tokens/**/*.json?(c)`],
+      source: [`__integration__/tokens/**/[!_]*.json?(c)`],
       platforms: {
         android: {
           transformGroup: `android`,

diff --git a/__integration__/compose.test.js b/__integration__/compose.test.js
@@ -23,7 +23,7 @@ describe('integration', () => {
 
   describe('compose', async () => {
     const sd = new StyleDictionary({
-      source: [`__integration__/tokens/**/*.json?(c)`],
+      source: [`__integration__/tokens/**/[!_]*.json?(c)`],
       platforms: {
         compose: {
           transformGroup: `compose`,

diff --git a/__integration__/css.test.js b/__integration__/css.test.js
@@ -23,7 +23,7 @@ describe('integration', () => {
 
   describe('css', async () => {
     const sd = new StyleDictionary({
-      source: [`__integration__/tokens/**/*.json?(c)`],
+      source: [`__integration__/tokens/**/[!_]*.json?(c)`],
       // Testing proper string interpolation with multiple references here.
       // This is a CSS/web-specific thing so only including them in this
       // integration test.