add support for content utilities, caret color and jit-only prefixes

dcastil · Jul 18, 2021 · fd097c6 · fd097c6
1 parent 6cd9ee2
commit fd097c6
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/src/config/config-validators.ts b/src/config/config-validators.ts
@@ -27,6 +27,10 @@ export function isInteger(classPart: string) {
     return Number.isInteger(Number(classPart))
 }
 
+export function isCustomValue(classPart: string) {
+    return customValueRegex.test(classPart)
+}
+
 export function isAny() {
     return true
 }
diff --git a/src/config/default-config.ts b/src/config/default-config.ts
@@ -1,4 +1,4 @@
-import { isAny, isInteger, isLength } from './config-validators'
+import { isAny, isCustomValue, isInteger, isLength } from './config-validators'
 
 const SIZES_SIMPLE = ['sm', 'md', 'lg', 'xl', '2xl'] as const
 const SIZES_EXTENDED = ['3xl', '4xl', '5xl', '6xl', '7xl'] as const
@@ -66,6 +66,30 @@ export function getDefaultConfig() {
             'focus-visible',
             'active',
             'disabled',
+            'before',
+            'after',
+            'first-letter',
+            'first-line',
+            'selection',
+            'marker',
+            'only',
+            'first-of-type',
+            'last-of-type',
+            'only-of-type',
+            'target',
+            'default',
+            'indeterminate',
+            'placeholder-shown',
+            'autofill',
+            'required',
+            'valid',
+            'invalid',
+            'in-range',
+            'out-of-range',
+            'peer-hover',
+            'peer-focus',
+            'peer-checked',
+            'peer-disabled',
         ],
         dynamicClasses: {
             // Layout
@@ -333,6 +357,11 @@ export function getDefaultConfig() {
                  * @see https://tailwindcss.com/docs/align-content
                  */
                 ['center', 'start', 'end', 'between', 'around', 'evenly'],
+                /**
+                 * Content
+                 * @see https://tailwindcss.com/docs/just-in-time-mode#content-utilities
+                 */
+                [isCustomValue],
             ],
             items: [
                 /**
@@ -1213,6 +1242,13 @@ export function getDefaultConfig() {
                  */
                 LENGTH,
             ],
+            caret: [
+                /**
+                 * Caret Color
+                 * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
+                 */
+                ANY,
+            ],
         },
         standaloneClasses: [
             // Layout

diff --git a/tests/content-utilities.test.ts b/tests/content-utilities.test.ts
@@ -0,0 +1,7 @@
+import { twMerge } from '../src'
+
+test('merges content utilities correctly', () => {
+    expect(twMerge("content-['hello'] content-[attr(data-content)]")).toBe(
+        'content-[attr(data-content)]'
+    )
+})