fix: don't merge font family array, close #363

windicss · Jul 26, 2021 · bed55f6 · bed55f6
1 parent c5ef685
commit bed55f6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -137,7 +137,7 @@ export class Processor {
         );
         break;
       case 'object':
-        theme[key] = (theme, { negative, breakpoints }) => combineConfig(themeValue, (typeof value === 'function' ? value(theme, { negative, breakpoints }) : value ?? {}));
+        theme[key] = (theme, { negative, breakpoints }) => combineConfig(themeValue, (typeof value === 'function' ? value(theme, { negative, breakpoints }) : value ?? {}), 0 /* prevent fontfamily merge */);
         break;
       default:
         theme[key] = value;

diff --git a/src/utils/algorithm/combineConfig.ts b/src/utils/algorithm/combineConfig.ts
@@ -1,22 +1,24 @@
 export default function combineConfig(
   a: { [key: string]: unknown },
   b: { [key: string]: unknown },
+  arrayMergeDepth = Infinity,
 ): { [key: string]: unknown } {
   const output = { ...a };
   for (const [key_of_b, value_of_b] of Object.entries(b)) {
     if (key_of_b in a) {
       const value_of_a = a[key_of_b];
       if (value_of_a !== value_of_b) {
         if (value_of_b !== null && (value_of_b as string).constructor !== Object) {
-          if (Array.isArray(value_of_a) && Array.isArray(value_of_b)) {
+          if (arrayMergeDepth > 0 && Array.isArray(value_of_a) && Array.isArray(value_of_b)) {
             output[key_of_b] = [...value_of_a, ...value_of_b];
           } else {
             output[key_of_b] = value_of_b;
           }
         } else if (value_of_a !== null && (value_of_a as { [key: string]: unknown }).constructor === Object) {
           output[key_of_b] = combineConfig(
             value_of_a as { [key: string]: unknown },
-            value_of_b as { [key: string]: unknown }
+            value_of_b as { [key: string]: unknown },
+            arrayMergeDepth - 1
           );
         } else if (Array.isArray(value_of_a)){
           output[key_of_b] = [

diff --git a/test/processor/__snapshots__/config.test.ts.yml b/test/processor/__snapshots__/config.test.ts.yml
@@ -213,6 +213,10 @@ Tools / extend black / css / 0: |-
     --tw-bg-opacity: 1;
     background-color: rgba(34, 0, 0, var(--tw-bg-opacity));
   }
+Tools / extend fontFamily with array / css / 0: |-
+  .font-sans {
+    font-family: Graphik,sans-serif;
+  }
 Tools / handle colors test / css / 0: |-
   .bg-discord {
     --tw-bg-opacity: 1;

diff --git a/test/processor/config.test.ts b/test/processor/config.test.ts
@@ -538,6 +538,20 @@ describe('Config', () => {
     expect(processor.interpret('bg-transparent bg-primary bg-primary-focus text-primary-content').styleSheet.build()).toMatchSnapshot('css');
   });
 
+  // #363
+  it('extend fontFamily with array', () => {
+    const processor = new Processor({
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Graphik', 'sans-serif'],
+          },
+        },
+      },
+    });
+    expect(processor.interpret('font-sans').styleSheet.build()).toMatchSnapshot('css');
+  });
+
   // #402
   it('container with screens', () => {
     const processor = new Processor({

diff --git a/test/utils/combineConfig.test.ts b/test/utils/combineConfig.test.ts
@@ -34,6 +34,12 @@ describe('combineConfig', () => {
     });
   });
 
+  it('should override nested arrays when provide depth', () => {
+    expect(combineConfig({ a: [1, 2] }, { a: [3, 4] }, 0)).toEqual({
+      a: [3, 4],
+    });
+  });
+
   it('should combine deep nested two arrays', () => {
     expect(
       combineConfig({ a: { b: { c: [1, 2] } } }, { a: { b: { c: [3, 4] } } })