Merge pull request #50 from dcastil/feature/39/do-not-validate-tailwi…

…nd-prefixes

Consider all prefixes as valid Tailwind prefixes

.github/release-drafter.yml

@@ -36,17 +36,17 @@ version-resolver:
 autolabeler:
     - label: 'feature'
       branch:
-          - '/feature/i'
+          - '/\bfeature\b/i'
       title:
-          - '/feature/i'
+          - '/\bfeature\b/i'
     - label: 'bugfix'
       branch:
-          - '/fix/i'
+          - '/\b(bugfix|fix)\b/i'
       title:
-          - '/fix/i'
+          - '/\b(bugfix|fix)\b/i'
     - label: 'other'
       branch:
-          - '/^other/i'
+          - '/^other\b/i'
     - label: 'breaking'
       branch:
           - '/^breaking-/i'

src/config-utils.ts

@@ -1,14 +1,12 @@
 import { getLruCache } from './lru-cache'
 import { Config } from './types'
 import { createClassUtils } from './class-utils'
-import { createPrefixUtils } from './prefix-utils'
 
 export type ConfigUtils = ReturnType<typeof createConfigUtils>
 
 export function createConfigUtils(config: Config) {
     return {
         cache: getLruCache<string>(config.cacheSize),
-        ...createPrefixUtils(config),
         ...createClassUtils(config),
     }
 }

src/default-config.ts

@@ -51,66 +51,9 @@ export function getDefaultConfig() {
         ] as const
     const getAlign = () => ['start', 'end', 'center', 'between', 'around', 'evenly'] as const
     const getZeroAndEmpty = () => ['', '0'] as const
-    const getPseudoVariants = () =>
-        [
-            // Positional
-            'first',
-            'last',
-            'only',
-            'odd',
-            'even',
-            'first-of-type',
-            'last-of-type',
-            'only-of-type',
-
-            // State
-            'visited',
-            'target',
-
-            // Forms
-            'default',
-            'checked',
-            'indeterminate',
-            'placeholder-shown',
-            'autofill',
-            'required',
-            'valid',
-            'invalid',
-            'in-range',
-            'out-of-range',
-            'read-only',
-
-            // Content
-            'empty',
-
-            // Interactive
-            'focus-within',
-            'hover',
-            'focus',
-            'focus-visible',
-            'active',
-            'disabled',
-        ] as const
 
     return {
         cacheSize: 500,
-        prefixes: [
-            ...getSizesSimple(),
-            'dark',
-            'motion-safe',
-            'motion-reduce',
-            'before',
-            'after',
-            'first-letter',
-            'first-line',
-            'selection',
-            'marker',
-            ...getPseudoVariants(),
-            {
-                group: getPseudoVariants(),
-                peer: getPseudoVariants(),
-            },
-        ],
         classGroups: {
             // Layout
             /**

src/merge-classlist.ts

@@ -8,15 +8,14 @@ const PREFIX_SEPARATOR_REGEX = /:(?![^[]*\])/
 const PREFIX_SEPARATOR = ':'
 
 export function mergeClassList(classList: string, configUtils: ConfigUtils) {
-    const { isPrefixValid, getClassGroupId, comparePrefixes, getConflictingClassGroupIds } =
-        configUtils
+    const { getClassGroupId, getConflictingClassGroupIds } = configUtils
 
     /**
      * Set of classGroupIds in following format:
      * `{importantModifier}{variantPrefixes}{classGroupId}`
-     * @example ':standaloneClasses.1'
-     * @example 'hover:focus:dynamicClasses.bg.2'
-     * @example '!md:dynamicClasses.bg.0'
+     * @example 'float'
+     * @example 'hover:focus:bg-color'
+     * @example '!md:pr'
      */
     const classGroupsInConflict = new Set<string>()
 
@@ -34,8 +33,7 @@ export function mergeClassList(classList: string, configUtils: ConfigUtils) {
                     ? classNameWithImportantModifier.substring(1)
                     : classNameWithImportantModifier
 
-                const arePrefixesValid = prefixes.every(isPrefixValid)
-                const classGroupId = arePrefixesValid ? getClassGroupId(className) : undefined
+                const classGroupId = getClassGroupId(className)
 
                 if (!classGroupId) {
                     return {
@@ -45,9 +43,7 @@ export function mergeClassList(classList: string, configUtils: ConfigUtils) {
                 }
 
                 const variantPrefix =
-                    prefixes.length === 0
-                        ? ''
-                        : prefixes.sort(comparePrefixes).concat('').join(PREFIX_SEPARATOR)
+                    prefixes.length === 0 ? '' : prefixes.sort().concat('').join(PREFIX_SEPARATOR)
 
                 const fullPrefix = hasImportantModifier
                     ? IMPORTANT_MODIFIER + variantPrefix

src/types.ts

@@ -1,9 +1,4 @@
 export interface Config {
-    /**
-     * Prefixes which can be prepended to Tailwind CSS classes
-     * @example ['hover', 'focus']
-     */
-    prefixes: readonly Prefix[]
     /**
      * Integer indicating size of LRU cache used for memoizing results.
      * - Cache might be up to twice as big as `cacheSize`
@@ -30,7 +25,6 @@ export interface Config {
     conflictingClassGroups: Record<ClassGroupId, readonly ClassGroupId[]>
 }
 
-export type Prefix = string | Record<string, readonly Prefix[]>
 export type ClassGroup = readonly ClassDefinition[]
 type ClassDefinition = string | ClassValidator | ClassObject
 export type ClassValidator = (classPart: string) => boolean

tests/create-tailwind-merge.test.ts

@@ -3,7 +3,6 @@ import { createTailwindMerge } from '../src'
 test('createTailwindMerge works with single config function', () => {
     const tailwindMerge = createTailwindMerge(() => ({
         cacheSize: 20,
-        prefixes: ['my-prefix'],
         classGroups: {
             fooKey: [{ fooKey: ['bar', 'baz'] }],
             fooKey2: [{ fooKey: ['qux', 'quux'] }, 'other-2'],
@@ -18,7 +17,7 @@ test('createTailwindMerge works with single config function', () => {
     expect(tailwindMerge('')).toBe('')
     expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz')
     expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe(
-        'other-prefix:fooKey-bar other-prefix:fooKey-baz'
+        'other-prefix:fooKey-baz'
     )
     expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar')
     expect(tailwindMerge('fooKey-bar group')).toBe('group')
@@ -40,7 +39,6 @@ test('createTailwindMerge works with multiple config functions', () => {
     const tailwindMerge = createTailwindMerge(
         () => ({
             cacheSize: 20,
-            prefixes: ['my-prefix'],
             classGroups: {
                 fooKey: [{ fooKey: ['bar', 'baz'] }],
                 fooKey2: [{ fooKey: ['qux', 'quux'] }, 'other-2'],
@@ -53,7 +51,6 @@ test('createTailwindMerge works with multiple config functions', () => {
         }),
         (config) => ({
             ...config,
-            prefixes: [...config.prefixes, 'second'],
             classGroups: {
                 ...config.classGroups,
                 helloFromSecondConfig: ['hello-there'],
@@ -68,7 +65,7 @@ test('createTailwindMerge works with multiple config functions', () => {
     expect(tailwindMerge('')).toBe('')
     expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz')
     expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe(
-        'other-prefix:fooKey-bar other-prefix:fooKey-baz'
+        'other-prefix:fooKey-baz'
     )
     expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar')
     expect(tailwindMerge('fooKey-bar group')).toBe('group')

tests/extend-tailwind-merge.test.ts

@@ -3,7 +3,6 @@ import { extendTailwindMerge } from '../src'
 test('extendTailwindMerge works corectly with single config', () => {
     const tailwindMerge = extendTailwindMerge({
         cacheSize: 20,
-        prefixes: ['my-prefix'],
         classGroups: {
             fooKey: [{ fooKey: ['bar', 'baz'] }],
             fooKey2: [{ fooKey: ['qux', 'quux'] }, 'other-2'],
@@ -18,7 +17,7 @@ test('extendTailwindMerge works corectly with single config', () => {
     expect(tailwindMerge('')).toBe('')
     expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz')
     expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe(
-        'other-prefix:fooKey-bar other-prefix:fooKey-baz'
+        'other-prefix:fooKey-baz'
     )
     expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar')
     expect(tailwindMerge('fooKey-bar group')).toBe('group')
@@ -45,15 +44,16 @@ test('extendTailwindMerge works corectly with multiple configs', () => {
         },
         (config) => ({
             ...config,
-            prefixes: [...config.prefixes, 'my-prefix'],
+            classGroups: {
+                ...config.classGroups,
+                secondConfigKey: ['hi-there', 'hello'],
+            },
         })
     )
 
     expect(tailwindMerge('')).toBe('')
     expect(tailwindMerge('my-prefix:fooKey-bar my-prefix:fooKey-baz')).toBe('my-prefix:fooKey-baz')
-    expect(tailwindMerge('other-prefix:fooKey-bar other-prefix:fooKey-baz')).toBe(
-        'other-prefix:fooKey-bar other-prefix:fooKey-baz'
-    )
+    expect(tailwindMerge('other-prefix:hi-there other-prefix:hello')).toBe('other-prefix:hello')
     expect(tailwindMerge('group fooKey-bar')).toBe('fooKey-bar')
     expect(tailwindMerge('fooKey-bar group')).toBe('group')
     expect(tailwindMerge('group other-2')).toBe('group other-2')

tests/merge-configs.test.ts

@@ -5,15 +5,13 @@ test('mergeConfigs has correct behavior', () => {
         mergeConfigs(
             {
                 cacheSize: 50,
-                prefixes: ['my-prefix'],
                 classGroups: {
                     fooKey: [{ fooKey: ['one', 'two'] }],
                     bla: [{ bli: ['blub', 'blublub'] }],
                 },
                 conflictingClassGroups: {},
             },
             {
-                prefixes: ['my-prefix-2'],
                 classGroups: {
                     fooKey: [{ fooKey: ['bar', 'baz'] }],
                     fooKey2: [{ fooKey: ['qux', 'quux'] }],
@@ -27,7 +25,6 @@ test('mergeConfigs has correct behavior', () => {
         )
     ).toEqual({
         cacheSize: 50,
-        prefixes: ['my-prefix', 'my-prefix-2'],
         classGroups: {
             fooKey: [{ fooKey: ['one', 'two'] }, { fooKey: ['bar', 'baz'] }],
             bla: [{ bli: ['blub', 'blublub'] }],

tests/public-api.test.ts

@@ -125,7 +125,6 @@ test('mergeConfigs has correct inputs and outputs', () => {
         mergeConfigs(
             {
                 cacheSize: 50,
-                prefixes: ['my-prefix'],
                 classGroups: {
                     fooKey: [{ fooKey: ['one', 'two'] }],
                     bla: [{ bli: ['blub', 'blublub'] }],