feat: align preprocessor API, adjust expand API

amzn · Apr 30, 2024 · 1cf13d4 · 1cf13d4
1 parent 3486daa
commit 1cf13d4
Show file tree

Hide file tree

Showing 22 changed files with 674 additions and 403 deletions.
diff --git a/.changeset/fuzzy-laws-hammer.md b/.changeset/fuzzy-laws-hammer.md
diff --git a/.changeset/short-jokes-sleep.md b/.changeset/short-jokes-sleep.md
@@ -0,0 +1,46 @@
+---
+'style-dictionary': major
+---
+
+BREAKING: preprocessors must now also be explicitly applied on global or platform level, rather than only registering it. This is more consistent with how the other hooks work and allows applying it on a platform level rather than only on the global level.
+
+`preprocessors` property that contains the registered preprocessors has been moved under a wrapping property called `hooks`.
+
+Before:
+
+```js
+export default {
+  // register it inline or by SD.registerPreprocessor
+  // applies automatically, globally
+  preprocessors: {
+    foo: (dictionary) => {
+      // preprocess it
+      return dictionary;
+    }
+  }
+}
+```
+
+After:
+
+```js
+export default {
+  // register it inline or by SD.registerPreprocessor
+  hooks: {
+    preprocessors: {
+      foo: (dictionary) => {
+        // preprocess it
+        return dictionary;
+      }
+    }
+  },
+  // apply it globally
+  preprocessors: ['foo'],
+  platforms: {
+    css: {
+      // or apply is per platform
+      preprocessors: ['foo']
+    }
+  }
+}
+```
diff --git a/.changeset/sweet-toes-fly.md b/.changeset/sweet-toes-fly.md
@@ -1,5 +1,5 @@
 ---
-'style-dictionary': minor
+'style-dictionary': major
 ---
 
 BREAKING: expose getReferences and usesReference utilities as standalone utils rather than requiring them to be bound to dictionary object. This makes it easier to use.
diff --git a/README.md b/README.md
@@ -162,7 +162,7 @@ This tells the style dictionary build system how and what to build. The default
 }
 ```
 
-| Attribute                            | Type              | Description                                                                                                                                                                                                                                                                   |
+| Property                             | Type              | Description                                                                                                                                                                                                                                                                   |
 | :----------------------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | source                               | Array             | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files. Style Dictionary will do a deep merge of all of the token files, allowing you to organize your files files however you want.                                                        |
 | include                              | Array             | An array of file path [globs](https://github.com/isaacs/node-glob) to design token files that contain default styles. The Style Dictionary uses this as a base collection of tokens. The tokens found using the "source" attribute will overwrite tokens found using include. |

diff --git a/__integration__/async.test.js b/__integration__/async.test.js
@@ -91,6 +91,7 @@ describe('integration', async function () {
 
     const sd = new SDExtension({
       source: [`__integration__/tokens/**/[!_]*.json?(c)`],
+      preprocessors: ['foo-processor'],
       platforms: {
         css: {
           transforms: [

diff --git a/__tests__/StyleDictionary.test.js b/__tests__/StyleDictionary.test.js
@@ -363,11 +363,6 @@ describe('StyleDictionary class + extend method', () => {
       const sd = new StyleDictionary({
         tokens: input,
         expand: true,
-        expandTypesMap: {
-          border: {
-            style: 'other',
-          },
-        },
       });
       await sd.hasInitialized;
       expect(sd.tokens).to.eql({
@@ -377,11 +372,11 @@ describe('StyleDictionary class + extend method', () => {
             value: '#000',
           },
           style: {
-            type: 'other',
+            type: 'strokeStyle',
             value: 'solid',
           },
           width: {
-            type: 'width',
+            type: 'dimension',
             value: '2px',
           },
         },
@@ -401,11 +396,6 @@ describe('StyleDictionary class + extend method', () => {
       };
       const sd = new StyleDictionary({
         tokens: input,
-        expandTypesMap: {
-          border: {
-            style: 'other',
-          },
-        },
         platforms: {
           css: {
             expand: true,
@@ -423,11 +413,11 @@ describe('StyleDictionary class + extend method', () => {
             value: '#000',
           },
           style: {
-            type: 'other',
+            type: 'strokeStyle',
             value: 'solid',
           },
           width: {
-            type: 'width',
+            type: 'dimension',
             value: '2px',
           },
         },
@@ -456,17 +446,18 @@ describe('StyleDictionary class + extend method', () => {
       };
       const sd = new StyleDictionary({
         tokens: input,
-        expand: (token) => {
-          return token.value.width === '2px';
-        },
-        expandTypesMap: {
-          border: {
-            style: 'other',
+        expand: {
+          include: (token) => {
+            return token.value.width === '2px';
           },
         },
         platforms: {
           css: {},
-          js: { expand: true },
+          js: {
+            expand: {
+              typesMap: true,
+            },
+          },
         },
       });
       await sd.hasInitialized;
@@ -480,11 +471,11 @@ describe('StyleDictionary class + extend method', () => {
             value: '#000',
           },
           style: {
-            type: 'other',
+            type: 'strokeStyle',
             value: 'solid',
           },
           width: {
-            type: 'width',
+            type: 'dimension',
             value: '2px',
           },
         },
@@ -497,11 +488,11 @@ describe('StyleDictionary class + extend method', () => {
             value: '#000',
           },
           style: {
-            type: 'other',
+            type: 'strokeStyle',
             value: 'solid',
           },
           width: {
-            type: 'width',
+            type: 'dimension',
             value: '2px',
           },
         },
@@ -511,11 +502,11 @@ describe('StyleDictionary class + extend method', () => {
             value: '#ccc',
           },
           style: {
-            type: 'other',
+            type: 'strokeStyle',
             value: 'dashed',
           },
           width: {
-            type: 'width',
+            type: 'dimension',
             value: '1px',
           },
         },

diff --git a/__tests__/register/preprocessor.test.js b/__tests__/register/preprocessor.test.js
@@ -20,12 +20,13 @@ registerSuite({
   },
   registerMethod: 'registerPreprocessor',
   prop: 'preprocessors',
+  hooks: true,
 });
 
 describe('register/transformGroup', async () => {
   let StyleDictionaryExtended;
   beforeEach(async () => {
-    StyleDictionary.preprocessors = {};
+    StyleDictionary.hooks.preprocessors = {};
     StyleDictionaryExtended = new StyleDictionary({});
     await StyleDictionaryExtended.hasInitialized;
   });
@@ -35,8 +36,8 @@ describe('register/transformGroup', async () => {
       name: 'example-preprocessor',
       preprocessor: (dict) => dict,
     });
-    expect(StyleDictionary.preprocessors['example-preprocessor']).to.not.be.undefined;
-    expect(StyleDictionaryExtended.preprocessors['example-preprocessor']).to.not.be.undefined;
+    expect(StyleDictionary.hooks.preprocessors['example-preprocessor']).to.not.be.undefined;
+    expect(StyleDictionaryExtended.hooks.preprocessors['example-preprocessor']).to.not.be.undefined;
   });
 
   it('should throw if the preprocessor name is not a string', () => {
@@ -76,6 +77,7 @@ describe('register/transformGroup', async () => {
     });
 
     StyleDictionaryExtended = new StyleDictionary({
+      preprocessors: ['strip-descriptions'],
       tokens: {
         foo: {
           value: '4px',
@@ -120,6 +122,7 @@ describe('register/transformGroup', async () => {
     });
 
     StyleDictionaryExtended = new StyleDictionary({
+      preprocessors: ['strip-descriptions'],
       tokens: {
         foo: {
           value: '4px',

diff --git a/__tests__/register/register.suite.js b/__tests__/register/register.suite.js
@@ -17,7 +17,11 @@ export function registerSuite(opts) {
 
   describe('Register Test Suite', () => {
     const reset = () => {
-      StyleDictionary[prop] = defaultPropVal;
+      if (opts.hooks) {
+        StyleDictionary.hooks[prop] = defaultPropVal;
+      } else {
+        StyleDictionary[prop] = defaultPropVal;
+      }
     };
     beforeEach(() => {
       reset();
@@ -33,10 +37,15 @@ export function registerSuite(opts) {
         const sd1 = new StyleDictionary();
         const sd2 = new StyleDictionary();
         const sd3 = await sd2.extend();
-
-        expect(sd1[prop][configFoo.name]).to.not.be.undefined;
-        expect(sd2[prop][configFoo.name]).to.not.be.undefined;
-        expect(sd3[prop][configFoo.name]).to.not.be.undefined;
+        if (opts.hooks) {
+          expect(sd1.hooks[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd2.hooks[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd3.hooks[prop][configFoo.name]).to.not.be.undefined;
+        } else {
+          expect(sd1[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd2[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd3[prop][configFoo.name]).to.not.be.undefined;
+        }
       });
 
       it(`should allow registering ${prop} on instance, affecting only that instance`, async () => {
@@ -45,10 +54,15 @@ export function registerSuite(opts) {
         const sd3 = await sd2.extend();
 
         sd2[registerMethod](configFoo);
-
-        expect(sd1[prop][configFoo.name]).to.be.undefined;
-        expect(sd2[prop][configFoo.name]).to.not.be.undefined;
-        expect(sd3[prop][configFoo.name]).to.be.undefined;
+        if (opts.hooks) {
+          expect(sd1.hooks[prop][configFoo.name]).to.be.undefined;
+          expect(sd2.hooks[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd3.hooks[prop][configFoo.name]).to.be.undefined;
+        } else {
+          expect(sd1[prop][configFoo.name]).to.be.undefined;
+          expect(sd2[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd3[prop][configFoo.name]).to.be.undefined;
+        }
       });
 
       it(`should combine class and instance registrations for ${prop} on the instance`, async () => {
@@ -59,14 +73,25 @@ export function registerSuite(opts) {
         sd2[registerMethod](configBar);
         const sd3 = await sd2.extend();
 
-        expect(sd1[prop][configFoo.name]).to.not.be.undefined;
-        expect(sd2[prop][configFoo.name]).to.not.be.undefined;
-        expect(sd3[prop][configFoo.name]).to.not.be.undefined;
-        // should not be registered on sd1, because we registered only on sd2
-        expect(sd1[prop][configBar.name]).to.be.undefined;
-        expect(sd2[prop][configBar.name]).to.not.be.undefined;
-        // should be registered because sd3 extends sd2
-        expect(sd3[prop][configBar.name]).to.not.be.undefined;
+        if (opts.hooks) {
+          expect(sd1.hooks[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd2.hooks[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd3.hooks[prop][configFoo.name]).to.not.be.undefined;
+          // should not be registered on sd1, because we registered only on sd2
+          expect(sd1.hooks[prop][configBar.name]).to.be.undefined;
+          expect(sd2.hooks[prop][configBar.name]).to.not.be.undefined;
+          // should be registered because sd3 extends sd2
+          expect(sd3.hooks[prop][configBar.name]).to.not.be.undefined;
+        } else {
+          expect(sd1[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd2[prop][configFoo.name]).to.not.be.undefined;
+          expect(sd3[prop][configFoo.name]).to.not.be.undefined;
+          // should not be registered on sd1, because we registered only on sd2
+          expect(sd1[prop][configBar.name]).to.be.undefined;
+          expect(sd2[prop][configBar.name]).to.not.be.undefined;
+          // should be registered because sd3 extends sd2
+          expect(sd3[prop][configBar.name]).to.not.be.undefined;
+        }
       });
     });
   });