tailwind_merge 0.5.1 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a91c2b0d982a08fffeb7f7a7de91124c386db75de621884d8dbe8370cba39943
-  data.tar.gz: 8f8ddc04bb758faf1f051ac90f3c5fb5020b1d54c1d87aedbfaf6c3eb6eb81f5
+  metadata.gz: b9f76007fe9bc9eb3a01775ddfbc29e400884058373a9baeb001ccfff21ef9a7
+  data.tar.gz: 4d97ba3be89af9227c4b2aa6f38fc8e9926886b6c33225881630356d72576f3d
 SHA512:
-  metadata.gz: aec2902cd4796a3170b2806316cbbb8fb33f5d08a3bd8d9f34bbcdaec71b336ef9cd4c7404d8b307dd65c6db3501902bc17f65d651c0069cc08f44358fd92e7e
-  data.tar.gz: 8d8d0953a43e780061d462962cca27a4ade00fba4d19be6d23e299704173e3676db47c0cfb369c35dcd07a0f480a3a968916209a6f747609990d19042d2ba989
+  metadata.gz: 28794887eeb6e5f73ac74768cad06e52b4d5463e5ea436661e07d61a316f1e4a41b1a6607600746153f0b5464004472c1b98982d7770ca947ea03eb714e0f141
+  data.tar.gz: 88e8f3ab1bb6f2173a1f5aceca7416d8c1c1b4d73608ed78ed97b364f67560792996dcd72e5bcca1f81327bf8fd7aaef318aaab55011772019e9e677fa03f667

data/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [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)
+
+**Merged pull requests:**
+
+- support for container query length units [\#8](https://github.com/gjtorikian/tailwind_merge/pull/8) ([gjtorikian](https://github.com/gjtorikian))
+
 ## [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)

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

@@ -266,6 +266,7 @@ In the Tailwind config you can modify theme scales. `tailwind_merge` follows the
 - `invert`
 - `gap`
 - `gradientColorStops`
+- `gradientColorStopPositions`
 - `inset`
 - `margin`
 - `opacity`
@@ -286,6 +287,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,10 +39,12 @@ 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
 

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",

data/lib/tailwind_merge/validators.rb

@@ -27,7 +27,7 @@ module TailwindMerge
 
     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)/
+    LENGTH_UNIT_REGEX = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))/
     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)/
@@ -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.1"
+  VERSION = "0.6.0"
 end

metadata

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