Merge pull request #478 from sherlockdoyle/main

Adds support for logical border color properties

Author: dcastil

src/lib/default-config.ts

@@ -1158,6 +1158,16 @@ export const getDefaultConfig = () => {
              * @see https://tailwindcss.com/docs/border-color
              */
             'border-color-y': [{ 'border-y': [borderColor] }],
+            /**
+             * Border Color S
+             * @see https://tailwindcss.com/docs/border-color
+             */
+            'border-color-s': [{ 'border-s': [borderColor] }],
+            /**
+             * Border Color E
+             * @see https://tailwindcss.com/docs/border-color
+             */
+            'border-color-e': [{ 'border-e': [borderColor] }],
             /**
              * Border Color Top
              * @see https://tailwindcss.com/docs/border-color
@@ -1821,6 +1831,8 @@ export const getDefaultConfig = () => {
             'border-w-x': ['border-w-r', 'border-w-l'],
             'border-w-y': ['border-w-t', 'border-w-b'],
             'border-color': [
+                'border-color-s',
+                'border-color-e',
                 'border-color-t',
                 'border-color-r',
                 'border-color-b',

src/lib/types.ts

@@ -210,8 +210,10 @@ export type DefaultClassGroupIds =
     | 'blur'
     | 'border-collapse'
     | 'border-color-b'
+    | 'border-color-e'
     | 'border-color-l'
     | 'border-color-r'
+    | 'border-color-s'
     | 'border-color-t'
     | 'border-color-x'
     | 'border-color-y'

tests/class-map.test.ts

@@ -55,8 +55,10 @@ test('class map has correct class groups at first part', () => {
             'border-collapse',
             'border-color',
             'border-color-b',
+            'border-color-e',
             'border-color-l',
             'border-color-r',
+            'border-color-s',
             'border-color-t',
             'border-color-x',
             'border-color-y',

tests/per-side-border-colors.test.ts

@@ -5,4 +5,6 @@ import { twMerge } from '../src'
 test('merges classes with per-side border colors correctly', () => {
     expect(twMerge('border-t-some-blue border-t-other-blue')).toBe('border-t-other-blue')
     expect(twMerge('border-t-some-blue border-some-blue')).toBe('border-some-blue')
+    expect(twMerge('border-some-blue border-s-some-blue')).toBe('border-some-blue border-s-some-blue')
+    expect(twMerge('border-e-some-blue border-some-blue')).toBe('border-some-blue')
 })