fix: border side prefix match (#536)

windicss · Oct 28, 2021 · 42e5590 · 42e5590
1 parent 8d9ed6a
commit 42e5590
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/lib/utilities/dynamic.ts b/src/lib/utilities/dynamic.ts
@@ -805,7 +805,7 @@ function border(utility: Utility, plugin: PluginUtils, dir = '*', real?: Utility
     ?.updateMeta('utilities', 'borderOpacity', pluginOrder.borderOpacity, 1, true)
 
   // handle border side
-  || dir === '*' && handler.catchPrefix(/^border-[tlbr]/, true)
+  || dir === '*' && handler.catchPrefix(/^(border-[tlbr])-/, true, 1)
     ?.then(() => border(utility.clone('border' + utility.raw.slice(8)), plugin, expandDirection(handler.prefix?.slice(-1) as string, false)?.[0], utility))
 
   // handle border color

diff --git a/src/lib/utilities/handler.ts b/src/lib/utilities/handler.ts
@@ -27,7 +27,7 @@ export type Handler = {
   _prefix_expr?: string
   opacity?: string | undefined
   color?: colorCallback
-  catchPrefix: (regex: RegExp, match?: boolean) => Handler | undefined,
+  catchPrefix: (regex: RegExp, match?: boolean, matchIndex?: number) => Handler | undefined,
   isStatic: (map: { [key: string]: string | string[] }, amount?: string) => boolean,
   isTime: (start: number, end: number, type: 'int' | 'float') => boolean,
   isNumber: (start: number, end: number, type: 'int' | 'float') => boolean,
@@ -111,13 +111,13 @@ export function createHandler(handlers: Handlers = { static: true }): HandlerCre
       _amount: utility.amount,
       _slices: utility.slices,
 
-      catchPrefix: (regex, match = false) => {
+      catchPrefix: (regex, match = false, matchIndex = 0) => {
         handler._prefix_expr = regex.source;
 
         if (match) {
           const matched = utility.raw.match(regex);
           if (!matched) return;
-          handler.prefix = matched[0];
+          handler.prefix = matched[matchIndex];
         }
         return handler;
       },

diff --git a/test/processor/__snapshots__/utilities.test.ts.yml b/test/processor/__snapshots__/utilities.test.ts.yml
@@ -534,6 +534,10 @@ Tools / border top/left/bottom/right color / css / 0: |-
     --tw-border-opacity: 1;
     border-color: rgba(167, 243, 208, var(--tw-border-opacity));
   }
+  .border-true-gray-300 {
+    --tw-border-opacity: 1;
+    border-color: rgba(212, 212, 212, var(--tw-border-opacity));
+  }
   .border-green-200\/50 {
     --tw-border-opacity: 0.5;
     border-color: rgba(167, 243, 208, var(--tw-border-opacity));

diff --git a/test/processor/utilities.test.ts b/test/processor/utilities.test.ts
@@ -265,7 +265,7 @@ describe('Utilities', () => {
   });
 
   it('border top/left/bottom/right color', () => {
-    expect(processor.interpret('border-t-green-200 border-t-green-200/50 border-b-green-200 border-green-200 border-green-200/50').styleSheet.build()).toMatchSnapshot('css');
+    expect(processor.interpret('border-t-green-200 border-t-green-200/50 border-b-green-200 border-green-200 border-true-gray-300 border-green-200/50').styleSheet.build()).toMatchSnapshot('css');
   });
 
   it('gradient colors', () => {