From 26bbcac01eb073d46aa134e26410c3998fce377e Mon Sep 17 00:00:00 2001 From: Adam Laycock Date: Fri, 5 May 2023 15:20:35 +0100 Subject: [PATCH] fix: fix tailwind function for classes with multiple hyphens --- src/functions/tailwind.spec.ts | 6 ++++++ src/functions/tailwind.ts | 10 ++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/functions/tailwind.spec.ts b/src/functions/tailwind.spec.ts index 6d3f952..5bf7bfd 100644 --- a/src/functions/tailwind.spec.ts +++ b/src/functions/tailwind.spec.ts @@ -21,4 +21,10 @@ describe('Tailwind', () => { 'w-full border border-gray-300 rounded xl:p-4 mt-2 mb-4 shadow-xl p-4' ) }) + + it('should support multi `-` classes', () => { + const gridClasses = twClassNameFn('grid grid-cols-3') + + expect(gridClasses('grid-cols-4')).toBe('grid grid-cols-4') + }) }) diff --git a/src/functions/tailwind.ts b/src/functions/tailwind.ts index f905ca5..3afd016 100644 --- a/src/functions/tailwind.ts +++ b/src/functions/tailwind.ts @@ -28,13 +28,19 @@ export const twClassNameFn = (twClasses: string[] | string) => { typeof classNames === 'string' ? classNames.split(' ') : classNames let classesToApply = defaultClasses.map(className => { - const [prefix, value] = className.split('-') + const parts = className.split('-') + + const value = parts.length > 1 ? parts.pop() : undefined + const prefix = parts.join('-') return {prefix, value, className} }) classes.forEach(className => { - const [prefix, value] = className.split('-') + const parts = className.split('-') + + const value = parts.length > 1 ? parts.pop() : undefined + const prefix = parts.join('-') classesToApply = classesToApply.filter(applicable => { return applicable.prefix !== prefix