Merge pull request #5 from gjtorikian/support-custom-seperators

Support custom seperators

Author: gjtorikian

.github/dependabot.yml

@@ -1,6 +1,20 @@
 version: 2
 updates:
-- package-ecosystem: "github-actions"
-  directory: "/"
-  schedule:
-      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: daily
+      time: "09:00"
+      timezone: "Etc/UTC"
+    open-pull-requests-limit: 10
+
+  - package-ecosystem: "bundler"
+    directory: "/"
+    schedule:
+      interval: daily
+      time: "09:00"
+      timezone: "Etc/UTC"
+    open-pull-requests-limit: 10
+    allow:
+      - dependency-name: "*"
+        dependency-type: "production"

.github/workflows/automerge.yml

@@ -0,0 +1,34 @@
+name: PR auto-{approve,merge}
+
+on:
+  pull_request_target:
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  dependabot:
+    name: Dependabot
+    runs-on: ubuntu-latest
+
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Fetch Dependabot metadata
+        id: dependabot-metadata
+        uses: dependabot/fetch-metadata@v1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+
+      - name: Approve Dependabot PR
+        if: ${{steps.dependabot-metadata.outputs.update-type != 'version-update:semver-major'}}
+        run: gh pr review --approve "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Merge Dependabot PR
+        run: gh pr merge --auto --squash "$PR_URL"
+        env:
+          PR_URL: ${{ github.event.pull_request.html_url }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lint.yml

@@ -2,6 +2,8 @@ name: Linting
 
 on:
   pull_request:
+    paths:
+      - "**/*.rb"
 
 permissions:
   contents: read

README.md

@@ -27,9 +27,7 @@ If you use Tailwind with a component-based UI renderer (like [ViewComponent](htt
 
 ```html
 <!-- app/components/confirm_email_component.html.erb -->
-<div class="border rounded px-2 py-1">
-  Please confirm your email address.
-</div>
+<div class="border rounded px-2 py-1">Please confirm your email address.</div>
 ```
 
 ```ruby
@@ -53,9 +51,9 @@ tailwind-merge overrides conflicting classes and keeps everything else untouched
 
 ### Optimized for speed
 
--   Results get cached by default, so you don't need to worry about wasteful re-renders. The library uses a thread-safe [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores up to 500 different results. The cache size can be modified via config options.
--   Expensive computations happen upfront so that `merge` calls without a cache hit stay fast.
--   These computations are called lazily on the first call to `merge` to prevent it from impacting app startup performance if it isn't used initially.
+- Results get cached by default, so you don't need to worry about wasteful re-renders. The library uses a thread-safe [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>) which stores up to 500 different results. The cache size can be modified via config options.
+- Expensive computations happen upfront so that `merge` calls without a cache hit stay fast.
+- These computations are called lazily on the first call to `merge` to prevent it from impacting app startup performance if it isn't used initially.
 
 ### Last conflicting class wins
 
@@ -150,10 +148,10 @@ If you're using a custom Tailwind config, you may need to configure tailwind-mer
 
 The default [`twMerge`](#twmerge) function is configured in a way that you can still use it if all the following points apply to your Tailwind config:
 
--   Only using color names which don't clash with other Tailwind class names
--   Only deviating by number values from number-based Tailwind classes
--   Only using font-family classes which don't clash with default font-weight classes
--   Sticking to default Tailwind config for everything else
+- Only using color names which don't clash with other Tailwind class names
+- Only deviating by number values from number-based Tailwind classes
+- Only using font-family classes which don't clash with default font-weight classes
+- Sticking to default Tailwind config for everything else
 
 If some of these points don't apply to you, you can test whether the merge still works as intended with your custom classes. Otherwise, you need create your own custom merge function by either extending the default tailwind-merge config or using a completely custom one.
 
@@ -165,9 +163,11 @@ The `tailwind_merge` config is an object with several keys:
 
 ```ruby
 tailwindMergeConfig = {
-    # ↓ Set how many values should be stored in cache.
+    # ↓ *Optional* Define how many values should be stored in cache.
     cache_size: 500,
-    # ↓ Optional prefix from Tailwind config
+    # ↓ *Optional* modifier separator from Tailwind config
+    separator: ':',
+    # ↓ *Optional* prefix from Tailwind config
     prefix: 'tw-',
     theme: {
         # Theme scales are defined here
@@ -283,17 +283,17 @@ If you modified one of these theme scales in your Tailwind config, you can add a
 
 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_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.
--   `IS_ARBITRARY_POSITION` checks whether class part is an arbitrary value which starts with `position:` (`[position:200px_100px]`) which is necessary for background-position classNames.
--   `IS_ARBITRARY_URL` checks whether class part is an arbitrary value which starts with `url:` or `url(` (`[url('/path-to-image.png')]`, `url:var(--maybe-a-url-at-runtime)]`) which is necessary for background-image classNames.
--   `IS_ARBITRARY_NUMBER` checks whether class part is an arbitrary value which starts with `number:` or is a number (`[number:var(--value)]`, `[450]`) which is necessary for font-weight classNames.
--   `IS_ARBITRARY_SHADOW` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore.
--   `IS_ANY` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when it's certain there are no other class groups in a namespace.
+- `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_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.
+- `IS_ARBITRARY_POSITION` checks whether class part is an arbitrary value which starts with `position:` (`[position:200px_100px]`) which is necessary for background-position classNames.
+- `IS_ARBITRARY_URL` checks whether class part is an arbitrary value which starts with `url:` or `url(` (`[url('/path-to-image.png')]`, `url:var(--maybe-a-url-at-runtime)]`) which is necessary for background-image classNames.
+- `IS_ARBITRARY_NUMBER` checks whether class part is an arbitrary value which starts with `number:` or is a number (`[number:var(--value)]`, `[450]`) which is necessary for font-weight classNames.
+- `IS_ARBITRARY_SHADOW` checks whether class part is an arbitrary value which starts with the same pattern as a shadow value (`[0_35px_60px_-15px_rgba(0,0,0,0.3)]`), namely with two lengths separated by a underscore.
+- `IS_ANY` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when it's certain there are no other class groups in a namespace.
 
 ## Contributing
 

lib/tailwind_merge.rb

@@ -11,16 +11,17 @@
 require_relative "tailwind_merge/validators"
 require_relative "tailwind_merge/config"
 require_relative "tailwind_merge/class_utils"
+require_relative "tailwind_merge/modifier_utils"
 
 require "strscan"
 require "set"
 
 module TailwindMerge
   class Merger
     include Config
+    include ModifierUtils
 
     SPLIT_CLASSES_REGEX = /\s+/
-    IMPORTANT_MODIFIER = "!"
 
     def initialize(config: {})
       @config = if config.fetch(:theme, nil)
@@ -48,7 +49,7 @@ def merge(classes)
       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)
+        modifiers, has_important_modifier, base_class_name = split_modifiers(original_class_name, separator: @config[:separator])
 
         class_group_id = @class_utils.class_group_id(base_class_name)
 
@@ -59,7 +60,7 @@ def merge(classes)
           }
         end
 
-        variant_modifier = sort_modifiers(modifiers).join("")
+        variant_modifier = sort_modifiers(modifiers).join(":")
 
         modifier_id = has_important_modifier ? "#{variant_modifier}#{IMPORTANT_MODIFIER}" : variant_modifier
 
@@ -89,67 +90,5 @@ def merge(classes)
         true
       end.reverse.map { |parsed| parsed[:original_class_name] }.join(" ")
     end
-
-    SPLIT_MODIFIER_REGEX = /[:\[\]]/
-    private def split_modifiers(class_name)
-      modifiers = []
-
-      bracket_depth = 0
-      modifier_start = 0
-
-      ss = StringScanner.new(class_name)
-
-      until ss.eos?
-        portion = ss.scan_until(SPLIT_MODIFIER_REGEX)
-
-        if portion.nil?
-          ss.terminate
-          next
-        end
-        pos = ss.pos - 1
-        if class_name[pos] == ":" && bracket_depth.zero?
-          next_modifier_start = pos
-          modifiers << class_name[modifier_start..next_modifier_start]
-          modifier_start = next_modifier_start + 1
-        elsif class_name[pos] == "["
-          bracket_depth += 1
-        elsif class_name[pos] == "]"
-          bracket_depth -= 1
-        end
-      end
-
-      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
-
-      [modifiers, has_important_modifier, base_class_name]
-    end
-
-    # Sorts modifiers according to following schema:
-    # - Predefined modifiers are sorted alphabetically
-    # - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
-    private def sort_modifiers(modifiers)
-      if modifiers.length <= 1
-        return modifiers
-      end
-
-      sorted_modifiers = []
-      unsorted_modifiers = []
-
-      modifiers.each do |modifier|
-        is_arbitrary_variant = modifier[0] == "["
-
-        if is_arbitrary_variant
-          sorted_modifiers.push(unsorted_modifiers.sort, modifier)
-          unsorted_modifiers = []
-        else
-          unsorted_modifiers.push(modifier)
-        end
-      end
-
-      sorted_modifiers.push(...unsorted_modifiers.sort)
-
-      sorted_modifiers
-    end
   end
 end

lib/tailwind_merge/config.rb

@@ -106,6 +106,7 @@ module Config
 
     DEFAULTS = {
       cache_size: 500,
+      separator: ":",
       theme: {
         "colors" => [IS_ANY],
         "spacing" => [IS_LENGTH],

lib/tailwind_merge/modifier_utils.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module TailwindMerge
+  module ModifierUtils
+    IMPORTANT_MODIFIER = "!"
+
+    def split_modifiers(class_name, separator: nil)
+      separator ||= ":"
+      separator_length = separator.length
+
+      modifiers = []
+      bracket_depth = 0
+      modifier_start = 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
+            modifiers << class_name[modifier_start..index]
+            modifier_start = index + separator_length
+          end
+        end
+
+        if class_name[index] == "["
+          bracket_depth += 1
+        elsif class_name[index] == "]"
+          bracket_depth -= 1
+        end
+      end
+
+      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
+
+      [modifiers, has_important_modifier, base_class_name]
+    end
+
+    # Sorts modifiers according to following schema:
+    # - Predefined modifiers are sorted alphabetically
+    # - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
+    def sort_modifiers(modifiers)
+      if modifiers.length <= 1
+        return modifiers
+      end
+
+      sorted_modifiers = []
+      unsorted_modifiers = []
+
+      modifiers.each do |modifier|
+        is_arbitrary_variant = modifier[0] == "["
+
+        if is_arbitrary_variant
+          sorted_modifiers.push(unsorted_modifiers.sort, modifier)
+          unsorted_modifiers = []
+        else
+          unsorted_modifiers.push(modifier)
+        end
+      end
+
+      sorted_modifiers.push(...unsorted_modifiers.sort)
+
+      sorted_modifiers
+    end
+  end
+end

lib/tailwind_merge/version.rb

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

test/test_seperator.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class TestSeparator < Minitest::Test
+  def test_single_character_separator_working_correctly
+    merger = TailwindMerge::Merger.new(config: { separator: "_" })
+
+    assert_equal("hidden", merger.merge("block hidden"))
+    assert_equal("p-2", merger.merge("p-3 p-2"))
+    assert_equal("!inset-0", merger.merge("!right-0 !inset-0"))
+    assert_equal("focus_hover_!inset-0", merger.merge("hover_focus_!right-0 focus_hover_!inset-0"))
+    assert_equal("hover:focus:!right-0 focus:hover:!inset-0", merger.merge("hover:focus:!right-0 focus:hover:!inset-0"))
+  end
+
+  def test_multiple_character_separator_working_correctly
+    merger = TailwindMerge::Merger.new(config: { separator: "__" })
+
+    assert_equal("hidden", merger.merge("block hidden"))
+    assert_equal("p-2", merger.merge("p-3 p-2"))
+    assert_equal("!inset-0", merger.merge("!right-0 !inset-0"))
+    assert_equal("focus__hover__!inset-0", merger.merge("hover__focus__!right-0 focus__hover__!inset-0"))
+    assert_equal("hover:focus:!right-0 focus:hover:!inset-0", merger.merge("hover:focus:!right-0 focus:hover:!inset-0"))
+  end
+end

test/test_tailwind_merge.rb

@@ -24,6 +24,7 @@ def test_it_basically_works
   def test_removes_duplicates
     original = "bg-red-500 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-indigo-500 text-indigo-600 bg-red-500 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
     merged = "bg-red-500 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+
     refute_equal(original, @merger.merge(original))
     assert_equal(merged, @merger.merge(original))
   end