Fix issue with nested tokens (johnsonandjohnson#1455)

wodenx · Mar 24, 2022 · 151c13d · 151c13d
1 parent 8d03ecb
commit 151c13d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/packages/cx-templates/src/components/StyleGuideTemplate/tokens/cxStyleGuideTemplate.ts b/packages/cx-templates/src/components/StyleGuideTemplate/tokens/cxStyleGuideTemplate.ts
@@ -17,7 +17,9 @@ import {
   EditorPlainClean, cxEditorPlain, RichTextClean, cxRichText
 } from '@bodiless/cx-editors';
 import { withNodeKey } from '@bodiless/core';
-import { on, replaceWith, Fragment, as } from '@bodiless/fclasses';
+import {
+  on, replaceWith, Fragment, as
+} from '@bodiless/fclasses';
 import { cxLayout, LayoutClean } from '@bodiless/cx-layout';
 import { asStyleGuideTemplateToken } from '../StyleGuideTemplateClean';
 

diff --git a/packages/fclasses/__tests__/tokenSpec.test.tsx b/packages/fclasses/__tests__/tokenSpec.test.tsx
@@ -87,6 +87,30 @@ describe('extendMeta', () => {
 });
 
 describe('asTokenSpec', () => {
+  it('Properly merges nested tokens', () => {
+    const nested = asTestTokenSpec({
+      Layout: {
+        _: 'bar',
+      },
+    });
+    const a = {
+      Core: {
+        A: 'foo',
+      },
+    };
+    const b = {
+      Layout: {
+        A: nested,
+        B: nested,
+      },
+    };
+    const token = asTestTokenSpec(a, b);
+    const Test = as(token)(TestClean);
+    const wrapper = mount(<Test />);
+    expect(wrapper.find('span#test-a').prop('className')).toBe('bar foo');
+    expect(wrapper.find('span#test-b').prop('className')).toBe('bar');
+  });
+
   it('Adds the $TokenSpec property', () => {
     const t = asTestTokenSpec({ Core: { _: 'foo' } });
     expect(t[$TokenSpec]).toBeTruthy();

diff --git a/packages/fclasses/src/tokenSpec.ts b/packages/fclasses/src/tokenSpec.ts
@@ -70,11 +70,11 @@ function as(
   const args = args$.filter(Boolean);
 
   // Ensure that all token specs have been passed through `asTokenSpec`
-  // args.forEach(a => {
-  //   if (typeof a !== 'function' && typeof a !== 'string' && !a![$TokenSpec]) {
-  //     throw new Error('All token specifications passed to "as" must be created by a version of "asTokenSpec"');
-  //   }
-  // });
+  args.forEach(a => {
+    if (typeof a !== 'function' && typeof a !== 'string' && !a![$TokenSpec]) {
+      throw new Error('All token specifications passed to "as" must be created by a version of "asTokenSpec"');
+    }
+  });
 
   const tokens: TokenDef[] = args.map(arg => {
     if (typeof arg === 'function' || typeof arg === 'undefined') return arg;
@@ -147,7 +147,8 @@ const tokenMergeCustomizer = (...args: any) => {
     }
     return undefined;
   }
-  if (!a || !b) return undefined;
+  if (!a) return b;
+  if (!b) return a;
   return as(a, b);
 };