Merge pull request #20 from dcastil/feature/17/improve-performance-by…

…-removing-map-filter-join-in-hot-path

Improve performance by removing map/filter/join methods in hot path (failed)

.github/release-drafter.yml

@@ -8,7 +8,7 @@ change-title-escapes: '\<*_&'
 no-changes-template: 'No changes'
 categories:
     - title: '⚠️ Needs Changelog Edit'
-      label: 'needs-changelog-edit'
+      label: 'needs changelog edit'
     - title: 'Breaking Changes'
       label: 'breaking'
     - title: 'Features'
@@ -18,7 +18,7 @@ categories:
     - title: 'Other'
       label: 'other'
 exclude-labels:
-    - 'skip-changelog'
+    - 'skip changelog'
 version-resolver:
     major:
         labels:

.gitignore

@@ -7,6 +7,6 @@
 !/.yarn/sdks/
 !/.yarn/versions/
 /dist/
-/node_modules/
+node_modules/
 .DS_Store
 *.local

README.md

@@ -126,14 +126,20 @@ twMerge('p-5 p-2 my-non-tailwind-class p-4') // → 'my-non-tailwind-class p-4'
 twMerge('text-red text-secret-sauce') // → 'text-secret-sauce'
 ```
 
+### Ignores `undefined` and `null` values
+
+```ts
+twMerge('some-class', undefined, null) // → 'some-class'
+```
+
 ## API reference
 
 Reference to all exports of tailwind-merge.
 
 ### `twMerge`
 
 ```ts
-function twMerge(...classLists: Array<string | undefined>): string
+function twMerge(...classLists: Array<string | undefined | null>): string
 ```
 
 Default function to use if you're using the default Tailwind config or are close enough to the default config. You can use this function if all of the following points apply to your Tailwind config:

src/tailwind-merge.ts

@@ -4,7 +4,8 @@ import { Config } from './types'
 import { mergeClassList } from './merge-classlist'
 
 type CreateConfig = (getDefault: typeof getDefaultConfig) => Config
-type ClassLists = Array<string | undefined>
+type ClassLists = ClassListElement[]
+type ClassListElement = string | undefined | null
 type TailwindMerge = (...classLists: ClassLists) => string
 type ConfigUtils = ReturnType<typeof createConfigUtils>
 
@@ -14,17 +15,16 @@ export function createTailwindMerge(createConfig: CreateConfig): TailwindMerge {
     let cacheSet: ConfigUtils['cache']['set']
     let functionToCall = initTailwindMerge
 
-    function initTailwindMerge(classLists: ClassLists) {
+    function initTailwindMerge(classList: string) {
         configUtils = createConfigUtils(createConfig(getDefaultConfig))
         cacheGet = configUtils.cache.get
         cacheSet = configUtils.cache.set
         functionToCall = tailwindMerge
 
-        return tailwindMerge(classLists)
+        return tailwindMerge(classList)
     }
 
-    function tailwindMerge(classLists: ClassLists) {
-        const classList = classLists.filter(Boolean).join(' ')
+    function tailwindMerge(classList: string) {
         const cachedResult = cacheGet(classList)
 
         if (cachedResult) {
@@ -37,7 +37,7 @@ export function createTailwindMerge(createConfig: CreateConfig): TailwindMerge {
         return result
     }
 
-    return function callTailwindMerge(...classLists) {
-        return functionToCall(classLists)
+    return function callTailwindMerge(...classLists: ClassLists) {
+        return functionToCall(classLists.join(' '))
     }
 }

tests/public-api.test.ts

@@ -14,6 +14,7 @@ test('twMerge() has correct inputs and outputs', () => {
         expect.any(String)
     )
     expect(twMerge('hello world', undefined)).toStrictEqual(expect.any(String))
+    expect(twMerge('hello world', undefined, null)).toStrictEqual(expect.any(String))
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const noRun = () => {
@@ -22,8 +23,6 @@ test('twMerge() has correct inputs and outputs', () => {
         // @ts-expect-error
         twMerge(123)
         // @ts-expect-error
-        twMerge(null)
-        // @ts-expect-error
         twMerge(true)
         // @ts-expect-error
         twMerge({})
@@ -68,6 +67,7 @@ test('createTailwindMerge() has correct inputs and outputs', () => {
         expect.any(String)
     )
     expect(tailwindMerge('hello world', undefined)).toStrictEqual(expect.any(String))
+    expect(tailwindMerge('hello world', undefined, null)).toStrictEqual(expect.any(String))
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const noRun = () => {
@@ -76,8 +76,6 @@ test('createTailwindMerge() has correct inputs and outputs', () => {
         // @ts-expect-error
         tailwindMerge(123)
         // @ts-expect-error
-        tailwindMerge(null)
-        // @ts-expect-error
         tailwindMerge(true)
         // @ts-expect-error
         tailwindMerge({})

tests/readme-examples.test.ts

@@ -6,7 +6,7 @@ const twMergeExampleRegex =
     /twMerge\((?<arguments>[\w\s\-:[\]#(),!\n'"]+?)\)(?!.*(?<!\/\/.*)')\s*\n?\s*\/\/\s*→\s*['"](?<result>.+)['"]/g
 
 test('readme examples', () => {
-    expect.assertions(16)
+    expect.assertions(17)
 
     return fs.promises
         .readFile(`${__dirname}/../README.md`, { encoding: 'utf-8' })