tailwind_merge 0.5.2 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 841da2a133c0b534ffaf670b2d392f22ea11ed1f073f196af0cb7a2faef236b0
-  data.tar.gz: 0f3acf7e784203b48b89bf6edc0607971c5dadd3da378e3f098ecd4ae0f289a2
+  metadata.gz: 14ce1b50125c55e8f6d320cb0886d221ca2b91ddaf70e3c57fdb3147416d751f
+  data.tar.gz: dcedb7f0b798ae164669cccfd3f2c41385c5f33c36ea289d79062c8cdd806393
 SHA512:
-  metadata.gz: b094c38211947c3110c538c982e0e38ac85aebc39d10619caf2d5fe9dadae8d81413f4ab052a789398cd728d1070c206401d7f8691cd17af87ef8bb784e09609
-  data.tar.gz: a2aaf8d635559f1055f4324f3dd622daf8bb75e3ff36cf24dd118261165dcc90f2272143bbca31dc1350101682cde21bb38d5c1a18ba8271138a4a6f7a470eec
+  metadata.gz: a02d67ea60287416a8c1a9b2076aedf1e0864dec8c2fd36ffe69492c1eac386e99eac2b84bd035a9e2d69728bd9711d256550329015d6056708a2f836260f8f4
+  data.tar.gz: 94bec180c77255b7d74cfc730fffbc28869150b8d0efdb3ebef019e7a0b7e36c9552887884c72c7d1104a9dc525b93a367555dd0f122ecbb9d01aa4108df03a2

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [v0.7.0](https://github.com/gjtorikian/tailwind_merge/tree/v0.7.0) (2023-04-03)
+
+[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.6.0...v0.7.0)
+
+**Merged pull requests:**
+
+- Add postfix support [\#10](https://github.com/gjtorikian/tailwind_merge/pull/10) ([gjtorikian](https://github.com/gjtorikian))
+
+## [v0.6.0](https://github.com/gjtorikian/tailwind_merge/tree/v0.6.0) (2023-03-29)
+
+[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.5.2...v0.6.0)
+
+**Merged pull requests:**
+
+- Support 3.3 [\#9](https://github.com/gjtorikian/tailwind_merge/pull/9) ([gjtorikian](https://github.com/gjtorikian))
+
 ## [v0.5.2](https://github.com/gjtorikian/tailwind_merge/tree/v0.5.2) (2023-02-21)
 
 [Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.5.1...v0.5.2)

data/Gemfile

@@ -15,5 +15,5 @@ gem "github_changelog_generator", "~> 1.16"
 
 gem "rubocop-standard"
 
-gem "amazing_print"
-gem "debug"
+gem "amazing_print", require: false
+gem "debug", require: false

data/README.md

@@ -122,6 +122,12 @@ Similarly to arbitrary properties, `tailwind_merge` does not resolve conflicts b
 @merger.merge('!right-2 !-inset-x-1') # → '!-inset-x-1'
 ```
 
+## Supports postfix modifiers
+
+ ```ts
+ twMerge('text-sm leading-6 text-lg/7') // → 'text-lg/7'
+ ```
+
 ### Preserves non-Tailwind classes
 
 ```ruby
@@ -266,6 +272,7 @@ In the Tailwind config you can modify theme scales. `tailwind_merge` follows the
 - `invert`
 - `gap`
 - `gradientColorStops`
+- `gradientColorStopPositions`
 - `inset`
 - `margin`
 - `opacity`
@@ -286,6 +293,7 @@ Here's a brief summary for each validator:
 - `IS_LENGTH` checks whether a class part is a number (`3`, `1.5`), a fraction (`3/4`), a arbitrary length (`[3%]`, `[4px]`, `[length:var(--my-var)]`), or one of the strings `px`, `full` or `screen`.
 - `IS_ARBITRARY_LENGTH` checks for arbitrary length values (`[3%]`, `[4px]`, `[length:var(--my-var)]`).
 - `IS_INTEGER` checks for integer values (`3`) and arbitrary integer values (`[3]`).
+- `IS_PERCENT` checks for percent values (`12.5%`) which is used for color stop positions.
 - `IS_ARBITRARY_VALUE` checks whether the class part is enclosed in brackets (`[something]`)
 - `IS_TSHIRT_SIZE`checks whether class part is a T-shirt size (`sm`, `xl`), optionally with a preceding number (`2xl`).
 - `IS_ARBITRARY_SIZE` checks whether class part is an arbitrary value which starts with `size:` (`[size:200px_100px]`) which is necessary for background-size classNames.

data/lib/tailwind_merge/class_utils.rb

@@ -39,18 +39,26 @@ module TailwindMerge
       class_rest = class_parts.join(CLASS_PART_SEPARATOR)
 
       result = class_part_object[:validators].find do |v|
-        if from_theme?(v[:validator])
-          v[:validator].call(@config)
+        validator = v[:validator]
+
+        if from_theme?(validator)
+          validator.call(@config)
         else
-          v[:validator].call(class_rest)
+          validator.call(class_rest)
         end
       end
 
       result.nil? ? result : result[:class_group_id]
     end
 
-    def get_conflicting_class_group_ids(class_group_id)
-      @config[:conflicting_class_groups][class_group_id] || []
+    def get_conflicting_class_group_ids(class_group_id, has_postfix_modifier)
+      conflicts = @config[:conflicting_class_groups][class_group_id] || []
+
+      if has_postfix_modifier && @config[:conflicting_class_group_modifiers][class_group_id]
+        return [...conflicts, ...@config[:conflicting_class_group_modifiers][class_group_id]]
+      end
+
+      conflicts
     end
 
     private def create_class_map(config)

data/lib/tailwind_merge/config.rb

@@ -22,6 +22,7 @@ module TailwindMerge
     INVERT = ->(config) { FROM_THEME.call(config, "invert") }
     GAP = ->(config) { FROM_THEME.call(config, "gap") }
     GRADIENT_COLOR_STOPS = ->(config) { FROM_THEME.call(config, "gradient-color-stops") }
+    GRADIENT_COLOR_STOP_POSITIONS = ->(config) { FROM_THEME.call(config, "gradient-color-stop-positions") }
     INSET = ->(config) { FROM_THEME.call(config, "inset") }
     MARGIN = ->(config) { FROM_THEME.call(config, "margin") }
     OPACITY = ->(config) { FROM_THEME.call(config, "opacity") }
@@ -48,6 +49,7 @@ module TailwindMerge
       INVERT.object_id,
       GAP.object_id,
       GRADIENT_COLOR_STOPS.object_id,
+      GRADIENT_COLOR_STOP_POSITIONS.object_id,
       INSET.object_id,
       MARGIN.object_id,
       OPACITY.object_id,
@@ -100,7 +102,7 @@ module TailwindMerge
         "plus-lighter",
       ]
     }
-    ALIGN = -> { ["start", "end", "center", "between", "around", "evenly"] }
+    ALIGN = -> { ["start", "end", "center", "between", "around", "evenly", "stretch"] }
     ZERO_AND_EMPTY = -> { ["", "0", IS_ARBITRARY_VALUE] }
     BREAKS = -> { ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"] }
     NUMBER = -> { [IS_NUMBER, IS_ARBITRARY_NUMBER] }
@@ -124,6 +126,7 @@ module TailwindMerge
         "invert" => ZERO_AND_EMPTY.call,
         "gap" => [SPACING],
         "gradient-color-stops" => [COLORS],
+        "gradient-color-stop-positions" => [IS_PERCENT, IS_ARBITRARY_LENGTH],
         "inset" => SPACING_WITH_AUTO.call,
         "margin" => SPACING_WITH_AUTO.call,
         "opacity" => NUMBER.call,
@@ -135,7 +138,7 @@ module TailwindMerge
         "space" => [SPACING],
         "translate" => [SPACING],
       },
-      class_groups: {
+      class_groups: { # rubocop:disable Metrics/CollectionLiteralLength
         # Layout
         ##
         # Aspect Ratio
@@ -279,6 +282,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/top-right-bottom-left
         ##
         "inset-y" => [{ "inset-y" => [INSET] }],
+        #
+        # Start
+        # @see https://tailwindcss.com/docs/top-right-bottom-left
+        #
+        "start" => [{ "start" => [INSET] }],
+        #
+        # End
+        # @see https://tailwindcss.com/docs/top-right-bottom-left
+        #
+        "end" => [{ "end" => [INSET] }],
         ##
         # Top
         # @see https://tailwindcss.com/docs/top-right-bottom-left
@@ -419,7 +432,7 @@ module TailwindMerge
         # Justify Content
         # @see https://tailwindcss.com/docs/justify-content
         ##
-        "justify-content" => [{ "justify" => ALIGN.call }],
+        "justify-content" => [{ "justify" => ["normal", *ALIGN.call] }],
         ##
         # Justify Items
         # @see https://tailwindcss.com/docs/justify-items
@@ -434,7 +447,7 @@ module TailwindMerge
         # Align Content
         # @see https://tailwindcss.com/docs/align-content
         ##
-        "align-content" => [{ content: [*ALIGN.call, "baseline"] }],
+        "align-content" => [{ "content" => ["normal", *ALIGN.call, "baseline"] }],
         ##
         # Align Items
         # @see https://tailwindcss.com/docs/align-items
@@ -449,7 +462,7 @@ module TailwindMerge
         # Place Content
         # @see https://tailwindcss.com/docs/place-content
         ##
-        "place-content" => [{ "place-content" => [*ALIGN.call, "baseline", "stretch"] }],
+        "place-content" => [{ "place-content" => [*ALIGN.call, "baseline"] }],
         ##
         # Place Items
         # @see https://tailwindcss.com/docs/place-items
@@ -476,6 +489,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/padding
         ##
         "py" => [{ "py" => [PADDING] }],
+        #
+        # Padding Start
+        # @see https://tailwindcss.com/docs/padding
+        #
+        "ps" => [{ "ps" => [PADDING] }],
+        #
+        # Padding End
+        # @see https://tailwindcss.com/docs/padding
+        #
+        "pe" => [{ "pe" => [PADDING] }],
         ##
         # Padding Top
         # @see https://tailwindcss.com/docs/padding
@@ -511,6 +534,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/margin
         ##
         "my" => [{ "my" => [MARGIN] }],
+        #
+        # Margin Start
+        # @see https://tailwindcss.com/docs/margin
+        #
+        "ms" => [{ "ms" => [MARGIN] }],
+        #
+        # Margin End
+        # @see https://tailwindcss.com/docs/margin
+        #
+        "me" => [{ "me" => [MARGIN] }],
         ##
         # Margin Top
         # @see https://tailwindcss.com/docs/margin
@@ -683,8 +716,13 @@ module TailwindMerge
               "widest",
               IS_ARBITRARY_LENGTH,
             ],
-          },
+          }, # rubocop:enable Metrics/CollectionLiteralLength
         ],
+        #
+        # Line Clamp
+        # @see https://tailwindcss.com/docs/line-clamp
+        #
+        "line-clamp" => [{ "line-clamp" => ["none", IS_NUMBER, IS_ARBITRARY_NUMBER] }],
         ##
         # Line Height
         # @see https://tailwindcss.com/docs/line-height
@@ -692,6 +730,11 @@ module TailwindMerge
         "leading" => [
           { "leading" => ["none", "tight", "snug", "normal", "relaxed", "loose", IS_LENGTH] },
         ],
+        #
+        # List Style Image
+        # @see https://tailwindcss.com/docs/list-style-image
+        #
+        "list-image" => [{ "list-image" => ["none", IS_ARBITRARY_VALUE] }],
         ##
         # List Style Type
         # @see https://tailwindcss.com/docs/list-style-type
@@ -791,12 +834,17 @@ module TailwindMerge
         # Whitespace
         # @see https://tailwindcss.com/docs/whitespace
         ##
-        "whitespace" => [{ "whitespace" => ["normal", "nowrap", "pre", "pre-line", "pre-wrap"] }],
+        "whitespace" => [{ "whitespace" => ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"] }],
         ##
         # Word Break
         # @see https://tailwindcss.com/docs/word-break
         ##
         "break" => [{ "break" => ["normal", "words", "all", "keep"] }],
+        #
+        # Hyphens
+        # @see https://tailwindcss.com/docs/hyphens
+        #
+        "hyphens" => [{ "hyphens" => ["none", "manual", "auto"] }],
         ##
         # Content
         # @see https://tailwindcss.com/docs/content
@@ -857,6 +905,21 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/background-color
         ##
         "bg-color" => [{ "bg" => [COLORS] }],
+        #
+        # Gradient Color Stops From Position
+        # @see https://tailwindcss.com/docs/gradient-color-stops
+        #
+        "gradient-from-pos" => [{ "from" => [GRADIENT_COLOR_STOP_POSITIONS] }],
+        #
+        # Gradient Color Stops Via Position
+        # @see https://tailwindcss.com/docs/gradient-color-stops
+        #
+        "gradient-via-pos" => [{ "via" => [GRADIENT_COLOR_STOP_POSITIONS] }],
+        #
+        # Gradient Color Stops To Position
+        # @see https://tailwindcss.com/docs/gradient-color-stops
+        #
+        "gradient-to-pos" => [{ "to" => [GRADIENT_COLOR_STOP_POSITIONS] }],
         ##
         # Gradient Color Stops From
         # @see https://tailwindcss.com/docs/gradient-color-stops
@@ -878,6 +941,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/border-radius
         ##
         "rounded" => [{ "rounded" => [BORDER_RADIUS] }],
+        #
+        # Border Radius Start
+        # @see https://tailwindcss.com/docs/border-radius
+        #
+        "rounded-s" => [{ "rounded-s" => [BORDER_RADIUS] }],
+        #
+        # Border Radius End
+        # @see https://tailwindcss.com/docs/border-radius
+        #
+        "rounded-e" => [{ "rounded-e" => [BORDER_RADIUS] }],
         ##
         # Border Radius Top
         # @see https://tailwindcss.com/docs/border-radius
@@ -898,6 +971,26 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/border-radius
         ##
         "rounded-l" => [{ "rounded-l" => [BORDER_RADIUS] }],
+        #
+        # Border Radius Start Start
+        # @see https://tailwindcss.com/docs/border-radius
+        #
+        "rounded-ss" => [{ "rounded-ss" => [BORDER_RADIUS] }],
+        #
+        # Border Radius Start End
+        # @see https://tailwindcss.com/docs/border-radius
+        #
+        "rounded-se" => [{ "rounded-se" => [BORDER_RADIUS] }],
+        #
+        # Border Radius End End
+        # @see https://tailwindcss.com/docs/border-radius
+        #
+        "rounded-ee" => [{ "rounded-ee" => [BORDER_RADIUS] }],
+        #
+        # Border Radius End Start
+        # @see https://tailwindcss.com/docs/border-radius
+        #
+        "rounded-es" => [{ "rounded-es" => [BORDER_RADIUS] }],
         ##
         # Border Radius Top Left
         # @see https://tailwindcss.com/docs/border-radius
@@ -933,6 +1026,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/border-width
         ##
         "border-w-y" => [{ "border-y" => [BORDER_WIDTH] }],
+        #
+        # Border Width Start
+        # @see https://tailwindcss.com/docs/border-width
+        #
+        "border-w-s" => [{ "border-s" => [BORDER_WIDTH] }],
+        #
+        # Border Width End
+        # @see https://tailwindcss.com/docs/border-width
+        #
+        "border-w-e" => [{ "border-e" => [BORDER_WIDTH] }],
         ##
         # Border Width Top
         # @see https://tailwindcss.com/docs/border-width
@@ -1238,6 +1341,11 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/table-layout
         ##
         "table-layout" => [{ "table" => ["auto", "fixed"] }],
+        #
+        # Caption Side
+        # @see https://tailwindcss.com/docs/caption-side
+        #
+        "caption" => [{ "caption" => ["top", "bottom"] }],
         # Transitions and Animation
         ##
         # Tranisition Property
@@ -1261,7 +1369,7 @@ module TailwindMerge
         # Transition Duration
         # @see https://tailwindcss.com/docs/transition-duration
         ##
-        "duration" => [{ "duration" => [NUMBER_AND_ARBITRARY] }],
+        "duration" => [{ "duration" => NUMBER_AND_ARBITRARY.call }],
         ##
         # Transition Timing Function
         # @see https://tailwindcss.com/docs/transition-timing-function
@@ -1271,7 +1379,7 @@ module TailwindMerge
         # Transition Delay
         # @see https://tailwindcss.com/docs/transition-delay
         ##
-        "delay" => [{ "delay" => [NUMBER_AND_ARBITRARY] }],
+        "delay" => [{ "delay" => NUMBER_AND_ARBITRARY.call }],
         ##
         # Animation
         # @see https://tailwindcss.com/docs/animation
@@ -1436,6 +1544,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/scroll-margin
         ##
         "scroll-my" => [{ "scroll-my" => [SPACING] }],
+        #
+        # Scroll Margin Start
+        # @see https://tailwindcss.com/docs/scroll-margin
+        #
+        "scroll-ms" => [{ "scroll-ms" => [SPACING] }],
+        #
+        # Scroll Margin End
+        # @see https://tailwindcss.com/docs/scroll-margin
+        #
+        "scroll-me" => [{ "scroll-me" => [SPACING] }],
         ##
         # Scroll Margin Top
         # @see https://tailwindcss.com/docs/scroll-margin
@@ -1471,6 +1589,16 @@ module TailwindMerge
         # @see https://tailwindcss.com/docs/scroll-padding
         ##
         "scroll-py" => [{ "scroll-py" => [SPACING] }],
+        #
+        # Scroll Padding Start
+        # @see https://tailwindcss.com/docs/scroll-padding
+        #
+        "scroll-ps" => [{ "scroll-ps" => [SPACING] }],
+        #
+        # Scroll Padding End
+        # @see https://tailwindcss.com/docs/scroll-padding
+        #
+        "scroll-pe" => [{ "scroll-pe" => [SPACING] }],
         ##
         # Scroll Padding Top
         # @see https://tailwindcss.com/docs/scroll-padding
@@ -1564,15 +1692,15 @@ module TailwindMerge
       conflicting_class_groups: {
         "overflow" => ["overflow-x", "overflow-y"],
         "overscroll" => ["overscroll-x", "overscroll-y"],
-        "inset" => ["inset-x", "inset-y", "top", "right", "bottom", "left"],
+        "inset" => ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
         "inset-x" => ["right", "left"],
         "inset-y" => ["top", "bottom"],
         "flex" => ["basis", "grow", "shrink"],
         "gap" => ["gap-x", "gap-y"],
-        "p" => ["px", "py", "pt", "pr", "pb", "pl"],
+        "p" => ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
         "px" => ["pr", "pl"],
         "py" => ["pt", "pb"],
-        "m" => ["mx", "my", "mt", "mr", "mb", "ml"],
+        "m" => ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
         "mx" => ["mr", "ml"],
         "my" => ["mt", "mb"],
         "font-size" => ["leading"],
@@ -1589,21 +1717,36 @@ module TailwindMerge
         "fvn-spacing" => ["fvn-normal"],
         "fvn-fraction" => ["fvn-normal"],
         "rounded" => [
+          "rounded-s",
+          "rounded-e",
           "rounded-t",
           "rounded-r",
           "rounded-b",
           "rounded-l",
+          "rounded-ss",
+          "rounded-se",
+          "rounded-ee",
+          "rounded-es",
           "rounded-tl",
           "rounded-tr",
           "rounded-br",
           "rounded-bl",
         ],
+        "rounded-s" => ["rounded-ss", "rounded-es"],
+        "rounded-e" => ["rounded-se", "rounded-ee"],
         "rounded-t" => ["rounded-tl", "rounded-tr"],
         "rounded-r" => ["rounded-tr", "rounded-br"],
         "rounded-b" => ["rounded-br", "rounded-bl"],
         "rounded-l" => ["rounded-tl", "rounded-bl"],
         "border-spacing" => ["border-spacing-x", "border-spacing-y"],
-        "border-w" => ["border-w-t", "border-w-r", "border-w-b", "border-w-l"],
+        "border-w" => [
+          "border-w-s",
+          "border-w-e",
+          "border-w-t",
+          "border-w-r",
+          "border-w-b",
+          "border-w-l",
+        ],
         "border-w-x" => ["border-w-r", "border-w-l"],
         "border-w-y" => ["border-w-t", "border-w-b"],
         "border-color" => [
@@ -1617,6 +1760,8 @@ module TailwindMerge
         "scroll-m" => [
           "scroll-mx",
           "scroll-my",
+          "scroll-ms",
+          "scroll-me",
           "scroll-mt",
           "scroll-mr",
           "scroll-mb",
@@ -1627,6 +1772,8 @@ module TailwindMerge
         "scroll-p" => [
           "scroll-px",
           "scroll-py",
+          "scroll-ps",
+          "scroll-pe",
           "scroll-pt",
           "scroll-pr",
           "scroll-pb",
@@ -1635,6 +1782,9 @@ module TailwindMerge
         "scroll-px" => ["scroll-pr", "scroll-pl"],
         "scroll-py" => ["scroll-pt", "scroll-pb"],
       },
+      conflicting_class_group_modifiers: {
+        "font-size": ["leading"],
+      },
     }.freeze
 
     def merge_configs(extension_config)

data/lib/tailwind_merge/modifier_utils.rb

@@ -7,22 +7,29 @@ module TailwindMerge
     def split_modifiers(class_name, separator: nil)
       separator ||= ":"
       separator_length = separator.length
+      seperator_is_single_char = separator_length == 1
+      first_seperator_char = separator[0]
 
       modifiers = []
       bracket_depth = 0
       modifier_start = 0
+      postfix_modifier_position = 0
 
       class_name.each_char.with_index do |char, index|
-        if bracket_depth.zero? && char == separator[0]
-          if separator_length == 1 || class_name[index..(index + separator_length - 1)] == separator
+        if bracket_depth.zero?
+          if char == first_seperator_char && (seperator_is_single_char || class_name[index..(index + separator_length - 1)] == separator)
             modifiers << class_name[modifier_start..index]
             modifier_start = index + separator_length
+            next
+          elsif char == "/"
+            postfix_modifier_position = index
+            next
           end
         end
 
-        if class_name[index] == "["
+        if char == "["
           bracket_depth += 1
-        elsif class_name[index] == "]"
+        elsif char == "]"
           bracket_depth -= 1
         end
       end
@@ -30,8 +37,9 @@ module TailwindMerge
       base_class_name_with_important_modifier = modifiers.empty? ? class_name : class_name[modifier_start..-1]
       has_important_modifier = base_class_name_with_important_modifier.start_with?(IMPORTANT_MODIFIER)
       base_class_name = has_important_modifier ? base_class_name_with_important_modifier[1..-1] : base_class_name_with_important_modifier
+      maybe_postfix_modifier_position = postfix_modifier_position && postfix_modifier_position > modifier_start ? postfix_modifier_position - modifier_start : false
 
-      [modifiers, has_important_modifier, base_class_name]
+      [modifiers, has_important_modifier, base_class_name, maybe_postfix_modifier_position]
     end
 
     # Sorts modifiers according to following schema:

data/lib/tailwind_merge/validators.rb

@@ -55,9 +55,9 @@ module TailwindMerge
     }
 
     IS_LENGTH = ->(value) {
-      numeric?(value) || \
-        STRING_LENGTHS.include?(value) || \
-        FRACTION_REGEX.match?(value) || \
+      numeric?(value) ||
+        STRING_LENGTHS.include?(value) ||
+        FRACTION_REGEX.match?(value) ||
         IS_ARBITRARY_LENGTH.call(value)
     }
 
@@ -85,6 +85,10 @@ module TailwindMerge
       is_number.call(value)
     }
 
+    IS_PERCENT = ->(value) {
+      value.end_with?("%") && is_number.call(value[0..-2])
+    }
+
     IS_INTEGER = ->(value) {
       is_integer_only.call(value) || arbitrary_value?(value, "number", is_integer_only)
     }

data/lib/tailwind_merge/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TailwindMerge
-  VERSION = "0.5.2"
+  VERSION = "0.7.0"
 end

data/lib/tailwind_merge.rb

@@ -49,11 +49,31 @@ module TailwindMerge
       class_groups_in_conflict = Set.new
 
       classes.strip.split(SPLIT_CLASSES_REGEX).map do |original_class_name|
-        modifiers, has_important_modifier, base_class_name = split_modifiers(original_class_name, separator: @config[:separator])
+        modifiers, has_important_modifier, base_class_name, maybe_postfix_modifier_position = split_modifiers(original_class_name, separator: @config[:separator])
 
-        class_group_id = @class_utils.class_group_id(base_class_name)
+        actual_base_class_name = maybe_postfix_modifier_position ? base_class_name[0...maybe_postfix_modifier_position] : base_class_name
+        class_group_id = @class_utils.class_group_id(actual_base_class_name)
 
         unless class_group_id
+          unless maybe_postfix_modifier_position
+            next {
+              is_tailwind_class: false,
+              original_class_name: original_class_name,
+            }
+          end
+
+          class_group_id = @class_utils.class_group_id(base_class_name)
+
+          unless class_group_id
+            next {
+              isTailwindClass: false,
+              original_class_name: original_class_name,
+            }
+
+          end
+
+          has_postfix_modifier = false
+
           next {
             is_tailwind_class: false,
             original_class_name: original_class_name,
@@ -69,6 +89,7 @@ module TailwindMerge
           modifier_id: modifier_id,
           class_group_id: class_group_id,
           original_class_name: original_class_name,
+          has_postfix_modifier: has_postfix_modifier,
         }
       end.reverse # Last class in conflict wins, so filter conflicting classes in reverse order.
         .select do |parsed|
@@ -76,6 +97,7 @@ module TailwindMerge
 
         modifier_id = parsed[:modifier_id]
         class_group_id = parsed[:class_group_id]
+        has_postfix_modifier = parsed[:has_postfix_modifier]
 
         class_id = "#{modifier_id}#{class_group_id}"
 
@@ -83,7 +105,7 @@ module TailwindMerge
 
         class_groups_in_conflict.add(class_id)
 
-        @class_utils.get_conflicting_class_group_ids(class_group_id).each do |group|
+        @class_utils.get_conflicting_class_group_ids(class_group_id, has_postfix_modifier).each do |group|
           class_groups_in_conflict.add("#{modifier_id}#{group}")
         end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tailwind_merge
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.7.0
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-02-21 00:00:00.000000000 Z
+date: 2023-04-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: lru_redux