Merge pull request #210 from tokens-studio/order-themes

fix: order enabled sets after source sets for SD integration

.changeset/tame-buckets-push.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Fix permutateThemes to order "enabled" sets below "source" sets so enabled sets overrides are prioritized in Style-Dictionary.

src/permutateThemes.ts

@@ -53,9 +53,20 @@ export function permutateThemes(themes: ThemeObject[], { separator = '-' } = {}
 }
 
 function filterTokenSets(tokensets: Record<string, TokenSetStatus>) {
-  return Object.entries(tokensets)
-    .filter(([, val]) => val !== 'disabled')
-    .map(entry => entry[0]);
+  return (
+    Object.entries(tokensets)
+      .filter(([, val]) => val !== 'disabled')
+      // ensure source type sets are always ordered before enabled type sets
+      .sort((a, b) => {
+        if (a[1] === 'source' && b[1] === 'enabled') {
+          return -1;
+        } else if (a[1] === 'enabled' && b[1] === 'source') {
+          return 1;
+        }
+        return 0;
+      })
+      .map(entry => entry[0])
+  );
 }
 
 // cartesian permutations: [[1,2], [3,4]] -> [[1,3], [1,4], [2,3], [2,4]]

test/spec/permutateThemes.spec.ts

@@ -144,6 +144,36 @@ describe('transform dimension', () => {
     });
   });
 
+  it('orders enabled sets to the bottom compared to source sets', () => {
+    expect(
+      permutateThemes([
+        {
+          id: '0',
+          name: 'light',
+          group: 'theme',
+          selectedTokenSets: {
+            light: enabled,
+            theme: enabled,
+            core: source,
+          },
+        },
+        {
+          id: '1',
+          name: 'dark',
+          group: 'theme',
+          selectedTokenSets: {
+            dark: enabled,
+            theme: enabled,
+            core: source,
+          },
+        },
+      ]),
+    ).to.eql({
+      dark: ['core', 'dark', 'theme'],
+      light: ['core', 'light', 'theme'],
+    });
+  });
+
   it('throws when not all themes have a group property', () => {
     expect(() =>
       permutateThemes([