tailwind_merge 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ab700417f6a4f25b6ca1f2dbc4fc88c8a4158107b3b446eb61c1806f9b017ed2
-  data.tar.gz: 888edaa673497e967d596d387968bbc87af4aba71a9ee8bd1d3a2f0c16d1453d
+  metadata.gz: a91c2b0d982a08fffeb7f7a7de91124c386db75de621884d8dbe8370cba39943
+  data.tar.gz: 8f8ddc04bb758faf1f051ac90f3c5fb5020b1d54c1d87aedbfaf6c3eb6eb81f5
 SHA512:
-  metadata.gz: d54fcc8481da5c205749eab9552be39ba2eb4f4c747d6d454d021c0d3ac71f3f4880541c9d5f559c7cb7759e0e653ee78a3e2a34458f4b9947ce5d4618d0d58e
-  data.tar.gz: 355d00b020bd1db1345f15ce0833cf9af3baf3908b452355f4909dddd67e773ddbd861867ca60ebc9ef9dd59c10d744292ec39d1c7d69291ffbffd7acfe7cadb
+  metadata.gz: aec2902cd4796a3170b2806316cbbb8fb33f5d08a3bd8d9f34bbcdaec71b336ef9cd4c7404d8b307dd65c6db3501902bc17f65d651c0069cc08f44358fd92e7e
+  data.tar.gz: 8d8d0953a43e780061d462962cca27a4ade00fba4d19be6d23e299704173e3676db47c0cfb369c35dcd07a0f480a3a968916209a6f747609990d19042d2ba989

data/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [v0.5.1](https://github.com/gjtorikian/tailwind_merge/tree/v0.5.1) (2023-02-05)
+
+[Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.5.0...v0.5.1)
+
+**Merged pull requests:**
+
+- Fix arbitrary value merging [\#7](https://github.com/gjtorikian/tailwind_merge/pull/7) ([gjtorikian](https://github.com/gjtorikian))
+
 ## [v0.5.0](https://github.com/gjtorikian/tailwind_merge/tree/v0.5.0) (2023-01-30)
 
 [Full Changelog](https://github.com/gjtorikian/tailwind_merge/compare/v0.4.1...v0.5.0)

data/lib/tailwind_merge/config.rb

@@ -64,7 +64,7 @@ module TailwindMerge
     OVERFLOW = -> { ["auto", "hidden", "clip", "visible", "scroll"] }
     SPACING_WITH_AUTO = -> { ["auto", SPACING] }
     LENGTH_WITH_EMPTY = -> { ["", IS_LENGTH] }
-    INTEGER_WITH_AUTO = -> { ["auto", IS_INTEGER] }
+    NUMBER_WITH_AUTO_AND_ARBITRARY = -> { ["auto", IS_NUMBER, IS_ARBITRARY_VALUE] }
     POSITIONS = -> {
       [
         "bottom",
@@ -103,6 +103,8 @@ module TailwindMerge
     ALIGN = -> { ["start", "end", "center", "between", "around", "evenly"] }
     ZERO_AND_EMPTY = -> { ["", "0", IS_ARBITRARY_VALUE] }
     BREAKS = -> { ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"] }
+    NUMBER = -> { [IS_NUMBER, IS_ARBITRARY_NUMBER] }
+    NUMBER_AND_ARBITRARY = -> { [IS_NUMBER, IS_ARBITRARY_VALUE] }
 
     DEFAULTS = {
       cache_size: 500,
@@ -111,25 +113,25 @@ module TailwindMerge
         "colors" => [IS_ANY],
         "spacing" => [IS_LENGTH],
         "blur" => ["none", "", IS_TSHIRT_SIZE, IS_ARBITRARY_LENGTH],
-        "brightness" => [IS_INTEGER],
+        "brightness" => NUMBER.call,
         "border-color" => [COLORS],
         "border-radius" => ["none", "", "full", IS_TSHIRT_SIZE, IS_ARBITRARY_LENGTH],
         "border-spacing" => [SPACING],
         "border-width" => LENGTH_WITH_EMPTY.call,
-        "contrast" => [IS_INTEGER],
+        "contrast" => NUMBER.call,
         "grayscale" => ZERO_AND_EMPTY.call,
-        "hue-rotate" => [IS_INTEGER],
+        "hue-rotate" => NUMBER_AND_ARBITRARY.call,
         "invert" => ZERO_AND_EMPTY.call,
         "gap" => [SPACING],
         "gradient-color-stops" => [COLORS],
         "inset" => SPACING_WITH_AUTO.call,
         "margin" => SPACING_WITH_AUTO.call,
-        "opacity" => [IS_INTEGER],
+        "opacity" => NUMBER.call,
         "padding" => [SPACING],
-        "saturate" => [IS_INTEGER],
-        "scale" => [IS_INTEGER],
+        "saturate" => NUMBER.call,
+        "scale" => NUMBER.call,
         "sepia" => ZERO_AND_EMPTY.call,
-        "skew" => [IS_INTEGER, IS_ARBITRARY_VALUE],
+        "skew" => NUMBER_AND_ARBITRARY.call,
         "space" => [SPACING],
         "translate" => [SPACING],
       },
@@ -306,7 +308,7 @@ module TailwindMerge
         # Z-Index
         # @see https://tailwindcss.com/docs/z-index
         ##
-        "z" => [{ "z" => [IS_INTEGER] }],
+        "z" => [{ "z" => ["auto", IS_INTEGER] }],
         # Flexbox and Grid
         ##
         # Flex Basis
@@ -352,17 +354,17 @@ module TailwindMerge
         # Grid Column Start / End
         # @see https://tailwindcss.com/docs/grid-column
         ##
-        "col-start-end" => [{ "col" => ["auto", { "span" => [IS_INTEGER] }] }],
+        "col-start-end" => [{ "col" => ["auto", { "span" => [IS_INTEGER, IS_ARBITRARY_VALUE] }] }],
         ##
         # Grid Column Start
         # @see https://tailwindcss.com/docs/grid-column
         ##
-        "col-start" => [{ "col-start" => INTEGER_WITH_AUTO.call }],
+        "col-start" => [{ "col-start" => NUMBER_WITH_AUTO_AND_ARBITRARY.call }],
         ##
         # Grid Column End
         # @see https://tailwindcss.com/docs/grid-column
         ##
-        "col-end" => [{ "col-end" => INTEGER_WITH_AUTO.call }],
+        "col-end" => [{ "col-end" => NUMBER_WITH_AUTO_AND_ARBITRARY.call }],
         ##
         # Grid Template Rows
         # @see https://tailwindcss.com/docs/grid-template-rows
@@ -377,12 +379,12 @@ module TailwindMerge
         # Grid Row Start
         # @see https://tailwindcss.com/docs/grid-row
         ##
-        "row-start" => [{ "row-start" => INTEGER_WITH_AUTO.call }],
+        "row-start" => [{ "row-start" => NUMBER_WITH_AUTO_AND_ARBITRARY.call }],
         ##
         # Grid Row End
         # @see https://tailwindcss.com/docs/grid-row
         ##
-        "row-end" => [{ "row-end" => INTEGER_WITH_AUTO.call }],
+        "row-end" => [{ "row-end" => NUMBER_WITH_AUTO_AND_ARBITRARY.call }],
         ##
         # Grid Auto Flow
         # @see https://tailwindcss.com/docs/grid-auto-flow
@@ -1259,7 +1261,7 @@ module TailwindMerge
         # Transition Duration
         # @see https://tailwindcss.com/docs/transition-duration
         ##
-        "duration" => [{ "duration" => [IS_INTEGER] }],
+        "duration" => [{ "duration" => [NUMBER_AND_ARBITRARY] }],
         ##
         # Transition Timing Function
         # @see https://tailwindcss.com/docs/transition-timing-function
@@ -1269,7 +1271,7 @@ module TailwindMerge
         # Transition Delay
         # @see https://tailwindcss.com/docs/transition-delay
         ##
-        "delay" => [{ "delay" => [IS_INTEGER] }],
+        "delay" => [{ "delay" => [NUMBER_AND_ARBITRARY] }],
         ##
         # Animation
         # @see https://tailwindcss.com/docs/animation

data/lib/tailwind_merge/validators.rb

@@ -5,6 +5,15 @@ require "set"
 module TailwindMerge
   module Validators
     class << self
+      def arbitrary_value?(class_part, label, test_value)
+        match = ARBITRARY_VALUE_REGEX.match(class_part)
+        return false unless match
+
+        return match[1] == label if match[1]
+
+        test_value.call(match[2])
+      end
+
       def numeric?(x)
         Float(x, exception: false).is_a?(Numeric)
       end
@@ -16,84 +25,82 @@ module TailwindMerge
 
     STRING_LENGTHS = Set.new(["px", "full", "screen"]).freeze
 
-    ARBITRARY_VALUE_REGEX = /^\[(.+)\]$/
+    ARBITRARY_VALUE_REGEX = /^\[(?:([a-z-]+):)?(.+)\]$/i
     FRACTION_REGEX = %r{^\d+/\d+$}
     LENGTH_UNIT_REGEX = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh)/
     TSHIRT_UNIT_REGEX = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
     # Shadow always begins with x and y offset separated by underscore
     SHADOW_REGEX = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
 
-    IS_ANY = ->(_) { return true }
-
-    IS_LENGTH = ->(class_part) {
-      numeric?(class_part) || \
-        STRING_LENGTHS.include?(class_part) || \
-        FRACTION_REGEX.match?(class_part) || \
-        IS_ARBITRARY_LENGTH.call(class_part)
+    is_length_only = ->(value) {
+      LENGTH_UNIT_REGEX.match?(value)
     }
 
-    IS_ARBITRARY_LENGTH = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return match[1].start_with?("length:") || LENGTH_UNIT_REGEX.match?(class_part)
-      end
+    is_never = ->(_) { false }
 
-      false
+    is_url = ->(value) {
+      value.start_with?("url(")
     }
 
-    IS_ARBITRARY_SIZE = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return match[1].start_with?("size:")
-      end
+    is_number = ->(value) {
+      numeric?(value)
+    }
 
-      false
+    is_integer_only = ->(value) {
+      integer?(value)
     }
 
-    IS_ARBITRARY_POSITION = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return match[1].start_with?("position:")
-      end
+    is_shadow = ->(value) {
+      SHADOW_REGEX.match?(value)
+    }
 
-      false
+    IS_LENGTH = ->(value) {
+      numeric?(value) || \
+        STRING_LENGTHS.include?(value) || \
+        FRACTION_REGEX.match?(value) || \
+        IS_ARBITRARY_LENGTH.call(value)
     }
 
-    IS_ARBITRARY_VALUE = ->(class_part) {
-      ARBITRARY_VALUE_REGEX.match(class_part)
+    IS_ARBITRARY_LENGTH = ->(value) {
+      arbitrary_value?(value, "length", is_length_only)
     }
 
-    IS_ARBITRARY_URL = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return match[1].start_with?("url(", "url:")
-      end
+    IS_ARBITRARY_SIZE = ->(value) {
+      arbitrary_value?(value, "size", is_never)
+    }
 
-      false
+    IS_ARBITRARY_POSITION = ->(value) {
+      arbitrary_value?(value, "position", is_never)
     }
 
-    IS_ARBITRARY_NUMBER = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return match[1].start_with?("number:") || numeric?(match[1])
-      end
+    IS_ARBITRARY_URL = ->(value) {
+      arbitrary_value?(value, "url", is_url)
+    }
 
-      false
+    IS_ARBITRARY_NUMBER = ->(value) {
+      arbitrary_value?(value, "number", is_number)
     }
 
-    IS_TSHIRT_SIZE = ->(class_part) {
-      TSHIRT_UNIT_REGEX.match?(class_part)
+    IS_NUMBER = ->(value) {
+      is_number.call(value)
     }
 
-    IS_INTEGER = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return integer?(match[1])
-      end
+    IS_INTEGER = ->(value) {
+      is_integer_only.call(value) || arbitrary_value?(value, "number", is_integer_only)
+    }
 
-      integer?(class_part)
+    IS_ARBITRARY_VALUE = ->(value) {
+      ARBITRARY_VALUE_REGEX.match(value)
     }
 
-    IS_ARBITRARY_SHADOW = ->(class_part) {
-      if (match = ARBITRARY_VALUE_REGEX.match(class_part))
-        return SHADOW_REGEX.match?(match[1])
-      end
+    IS_ANY = ->(_) { return true }
+
+    IS_TSHIRT_SIZE = ->(value) {
+      TSHIRT_UNIT_REGEX.match?(value)
+    }
 
-      return false
+    IS_ARBITRARY_SHADOW = ->(value) {
+      arbitrary_value?(value, "", is_shadow)
     }
   end
 end

data/lib/tailwind_merge/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tailwind_merge
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Garen J. Torikian
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-01-30 00:00:00.000000000 Z
+date: 2023-02-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: lru_redux