daisyui 1.3.1 → 2.0.0

data/lib/daisy_ui/class_merge/validators.rb

@@ -0,0 +1,202 @@
+# frozen_string_literal: true
+
+# Ported from tailwind_merge 1.5.6 (https://github.com/gjtorikian/tailwind_merge)
+# Copyright (c) 2022 Garen J. Torikian. MIT License, see LICENSE-tailwind_merge.txt.
+
+module DaisyUI
+  module ClassMerge
+    module Validators
+      class << self
+        def arbitrary_value?(class_part, test_label, test_value)
+          match = ARBITRARY_VALUE_REGEX.match(class_part)
+          return false unless match
+
+          return test_label.call(match[1]) unless match[1].nil?
+
+          test_value.call(match[2])
+        end
+
+        def arbitrary_variable?(class_part, test_label, should_match_no_label: false)
+          match = ARBITRARY_VARIABLE_REGEX.match(class_part)
+          return false unless match
+
+          return test_label.call(match[1]) unless match[1].nil?
+
+          should_match_no_label
+        end
+
+        def numeric?(value)
+          Float(value, exception: false).is_a?(Numeric)
+        end
+
+        def integer?(value)
+          Integer(value, exception: false).is_a?(Integer)
+        end
+      end
+
+      ARBITRARY_VALUE_REGEX = /^\[(?:(\w[\w-]*):)?(.+)\]$/i
+      ARBITRARY_VARIABLE_REGEX = /^\((?:(\w[\w-]*):)?(.+)\)$/i
+      FRACTION_REGEX = %r{^\d+(?:\.\d+)?/\d+(?:\.\d+)?$}
+      TSHIRT_UNIT_REGEX = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/
+      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))|\b(calc|min|max|clamp)\(.+\)|^0$/
+      COLOR_FUNCTION_REGEX = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix|color|light-dark)\(.+\)$/
+
+      # Shadow always begins with x and y offset separated by underscore optionally prepended by inset
+      SHADOW_REGEX = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/
+      IMAGE_REGEX = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/
+
+      IS_FRACTION = lambda { |value|
+        FRACTION_REGEX.match?(value)
+      }
+
+      IS_NUMBER = lambda { |value|
+        numeric?(value)
+      }
+
+      IS_INTEGER = lambda { |value|
+        integer?(value)
+      }
+
+      IS_PERCENT = lambda { |value|
+        value.end_with?("%") && IS_NUMBER.call(value[0..-2])
+      }
+
+      IS_TSHIRT_SIZE = lambda { |value|
+        TSHIRT_UNIT_REGEX.match?(value)
+      }
+
+      IS_ANY = ->(_ = nil) { true }
+
+      IS_LENGTH_ONLY = lambda { |value|
+        # `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
+        # For example, `hsl(0 0% 0%)` would be classified as a length without this check.
+        # I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
+        LENGTH_UNIT_REGEX.match?(value) && !COLOR_FUNCTION_REGEX.match?(value)
+      }
+
+      IS_NEVER = ->(_) { false }
+
+      IS_SHADOW = lambda { |value|
+        SHADOW_REGEX.match?(value)
+      }
+
+      IS_IMAGE = lambda { |value|
+        IMAGE_REGEX.match?(value)
+      }
+
+      IS_ANY_NON_ARBITRARY = lambda { |value|
+        !IS_ARBITRARY_VALUE.call(value) && !IS_ARBITRARY_VARIABLE.call(value)
+      }
+
+      NAMED_CONTAINER_QUERY_REGEX = %r{\A@container(?:-size|-normal)?/.+\z}
+
+      IS_NAMED_CONTAINER_QUERY = lambda { |value|
+        NAMED_CONTAINER_QUERY_REGEX.match?(value)
+      }
+
+      IS_ARBITRARY_SIZE = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_SIZE, IS_NEVER)
+      }
+
+      IS_ARBITRARY_VALUE = lambda { |value|
+        ARBITRARY_VALUE_REGEX.match?(value)
+      }
+
+      IS_ARBITRARY_LENGTH = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_LENGTH, IS_LENGTH_ONLY)
+      }
+
+      IS_ARBITRARY_NUMBER = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_NUMBER, IS_NUMBER)
+      }
+
+      IS_ARBITRARY_WEIGHT = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_WEIGHT, IS_ANY)
+      }
+
+      IS_ARBITRARY_FAMILY_NAME = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_FAMILY_NAME, IS_NEVER)
+      }
+
+      IS_ARBITRARY_POSITION = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_POSITION, IS_NEVER)
+      }
+
+      IS_ARBITRARY_IMAGE = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_IMAGE, IS_IMAGE)
+      }
+
+      IS_ARBITRARY_SHADOW = lambda { |value|
+        arbitrary_value?(value, IS_LABEL_SHADOW, IS_SHADOW)
+      }
+
+      IS_ARBITRARY_VARIABLE = lambda { |value|
+        ARBITRARY_VARIABLE_REGEX.match?(value)
+      }
+
+      IS_ARBITRARY_VARIABLE_LENGTH = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_LENGTH)
+      }
+
+      IS_ARBITRARY_VARIABLE_FAMILY_NAME = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_FAMILY_NAME)
+      }
+
+      IS_ARBITRARY_VARIABLE_POSITION = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_POSITION)
+      }
+
+      IS_ARBITRARY_VARIABLE_SIZE = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_SIZE)
+      }
+
+      IS_ARBITRARY_VARIABLE_IMAGE = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_IMAGE)
+      }
+
+      IS_ARBITRARY_VARIABLE_SHADOW = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_SHADOW, should_match_no_label: true)
+      }
+
+      IS_ARBITRARY_VARIABLE_WEIGHT = lambda { |value|
+        arbitrary_variable?(value, IS_LABEL_WEIGHT, should_match_no_label: true)
+      }
+
+      ############
+      # Labels
+      ############
+
+      IS_LABEL_POSITION = lambda { |label|
+        %w[position percentage].include?(label)
+      }
+
+      IS_LABEL_IMAGE = lambda { |label|
+        %w[image url].include?(label)
+      }
+
+      IS_LABEL_SIZE = lambda { |label|
+        %w[length size bg-size].include?(label)
+      }
+
+      IS_LABEL_LENGTH = lambda { |label|
+        label == "length"
+      }
+
+      IS_LABEL_NUMBER = lambda { |label|
+        label == "number"
+      }
+
+      IS_LABEL_FAMILY_NAME = lambda { |label|
+        label == "family-name"
+      }
+
+      IS_LABEL_WEIGHT = lambda { |label|
+        %w[number weight].include?(label)
+      }
+
+      IS_LABEL_SHADOW = lambda { |label|
+        label == "shadow"
+      }
+    end
+  end
+end

data/lib/daisy_ui/class_merge.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "monitor"
+
+module DaisyUI
+  # Merges CSS class lists so that later classes win over earlier conflicting
+  # ones, for Tailwind utilities and daisyUI modifiers alike:
+  #
+  #   DaisyUI::ClassMerge.merge("btn btn-sm", "btn-lg px-2", "px-4")
+  #   # => "btn btn-lg px-4"
+  #
+  # The Tailwind engine is a port of tailwind_merge (see TAILWIND_MERGE_VERSION);
+  # daisyUI groups come from DaisyGroups. The public surface is `merge` and
+  # `DaisyUI.configure { |c| c.class_merge }`; `Merger.new(config:)` takes a raw
+  # tailwind_merge config for an isolated instance. Everything else is internal.
+  module ClassMerge
+    TAILWIND_MERGE_VERSION = "1.5.6"
+
+    # Reentrant, so a reset! triggered while the merger is being built (e.g. a
+    # component file configuring DaisyUI as it loads) cannot deadlock.
+    @monitor = Monitor.new
+
+    class << self
+      # Accepts strings, nested arrays, nil and false (dropped, as Phlex does
+      # for `class:`). Returns a frozen String, "" when empty.
+      def merge(*parts)
+        merger.merge(parts.flatten.select(&:itself).join(" "))
+      end
+
+      def merger
+        @merger || @monitor.synchronize do
+          @merger ||= Merger.new(config: DaisyUI.configuration.class_merge.merger_config)
+        end
+      end
+
+      # @api private The stock Tailwind class groups, for classifying tokens.
+      def tailwind_utils
+        @tailwind_utils ||= ClassGroupUtils.new(TailwindConfig::DEFAULTS)
+      end
+
+      # Drops the memoized merger so the next merge picks up configuration changes.
+      def reset!
+        @monitor.synchronize { @merger = nil }
+      end
+    end
+  end
+end

data/lib/daisy_ui/collapse.rb

@@ -18,34 +18,38 @@ module DaisyUI
     end
 
     register_modifiers(
-      # "sm:collapse-arrow"
-      # "@sm:collapse-arrow"
-      # "md:collapse-arrow"
-      # "@md:collapse-arrow"
-      # "lg:collapse-arrow"
-      # "@lg:collapse-arrow"
-      arrow: "collapse-arrow",
-      # "sm:collapse-plus"
-      # "@sm:collapse-plus"
-      # "md:collapse-plus"
-      # "@md:collapse-plus"
-      # "lg:collapse-plus"
-      # "@lg:collapse-plus"
-      plus: "collapse-plus",
-      # "sm:collapse-open"
-      # "@sm:collapse-open"
-      # "md:collapse-open"
-      # "@md:collapse-open"
-      # "lg:collapse-open"
-      # "@lg:collapse-open"
-      open: "collapse-open",
-      # "sm:collapse-close"
-      # "@sm:collapse-close"
-      # "md:collapse-close"
-      # "@md:collapse-close"
-      # "lg:collapse-close"
-      # "@lg:collapse-close"
-      close: "collapse-close"
+      icon: {
+        # "sm:collapse-arrow"
+        # "@sm:collapse-arrow"
+        # "md:collapse-arrow"
+        # "@md:collapse-arrow"
+        # "lg:collapse-arrow"
+        # "@lg:collapse-arrow"
+        arrow: "collapse-arrow",
+        # "sm:collapse-plus"
+        # "@sm:collapse-plus"
+        # "md:collapse-plus"
+        # "@md:collapse-plus"
+        # "lg:collapse-plus"
+        # "@lg:collapse-plus"
+        plus: "collapse-plus"
+      },
+      state: {
+        # "sm:collapse-open"
+        # "@sm:collapse-open"
+        # "md:collapse-open"
+        # "@md:collapse-open"
+        # "lg:collapse-open"
+        # "@lg:collapse-open"
+        open: "collapse-open",
+        # "sm:collapse-close"
+        # "@sm:collapse-close"
+        # "md:collapse-close"
+        # "@md:collapse-close"
+        # "lg:collapse-close"
+        # "@lg:collapse-close"
+        close: "collapse-close"
+      }
     )
   end
 end

data/lib/daisy_ui/configurable.rb

@@ -5,6 +5,7 @@ module DaisyUI
     def configure
       self.configuration ||= Configuration.new
       yield(configuration) if block_given?
+      ClassMerge.reset!
       configuration
     end
 
@@ -15,30 +16,57 @@ module DaisyUI
     class Modifiers
       def initialize
         @modifiers = {}
+        @groups = {}
       end
 
-      def add(modifier, classes:, component: nil)
+      # `group:` makes the modifier an alternative to the component's other
+      # modifiers in that group, e.g. `add(:huge, classes: "btn-xl",
+      # component: DaisyUI::Button, group: :size)`.
+      def add(modifier, classes:, component: nil, group: nil)
         @modifiers[component] ||= {}
         @modifiers[component][modifier] = classes
+        @groups[[component, modifier]] = group
+        ClassMerge.reset!
       end
 
       def remove(modifier, component: nil)
         @modifiers[component] ||= {}
-        @modifiers[component]&.delete(modifier)
+        removed = @modifiers[component]&.delete(modifier)
+        @groups.delete([component, modifier])
+        ClassMerge.reset!
+        removed
       end
 
       def for(component: nil)
         @modifiers[component] || {}
       end
+
+      # @api private { [component, group] => [classes, ...] } for grouped modifiers.
+      def groups
+        @groups.each_with_object({}) do |((component, modifier), group), result|
+          next unless group
+
+          (result[[component, group]] ||= []) << @modifiers[component][modifier]
+        end
+      end
     end
 
     class Configuration
-      attr_accessor :prefix
+      attr_reader :prefix
 
       def initialize
         @prefix = nil
       end
 
+      def prefix=(prefix)
+        @prefix = prefix
+        ClassMerge.reset!
+      end
+
+      def class_merge
+        @class_merge ||= ClassMerge::Configuration.new
+      end
+
       def modifiers
         @modifiers ||= Modifiers.new
       end

data/lib/daisy_ui/divider.rb

@@ -10,90 +10,96 @@ module DaisyUI
     end
 
     register_modifiers(
-      # "sm:divider-vertical"
-      # "@sm:divider-vertical"
-      # "md:divider-vertical"
-      # "@md:divider-vertical"
-      # "lg:divider-vertical"
-      # "@lg:divider-vertical"
-      vertical: "divider-vertical",
-      # "sm:divider-horizontal"
-      # "@sm:divider-horizontal"
-      # "md:divider-horizontal"
-      # "@md:divider-horizontal"
-      # "lg:divider-horizontal"
-      # "@lg:divider-horizontal"
-      horizontal: "divider-horizontal",
-      # "sm:divider-start"
-      # "@sm:divider-start"
-      # "md:divider-start"
-      # "@md:divider-start"
-      # "lg:divider-start"
-      # "@lg:divider-start"
-      start: "divider-start",
+      direction: {
+        # "sm:divider-vertical"
+        # "@sm:divider-vertical"
+        # "md:divider-vertical"
+        # "@md:divider-vertical"
+        # "lg:divider-vertical"
+        # "@lg:divider-vertical"
+        vertical: "divider-vertical",
+        # "sm:divider-horizontal"
+        # "@sm:divider-horizontal"
+        # "md:divider-horizontal"
+        # "@md:divider-horizontal"
+        # "lg:divider-horizontal"
+        # "@lg:divider-horizontal"
+        horizontal: "divider-horizontal"
+      },
+      position: {
+        # "sm:divider-start"
+        # "@sm:divider-start"
+        # "md:divider-start"
+        # "@md:divider-start"
+        # "lg:divider-start"
+        # "@lg:divider-start"
+        start: "divider-start",
         # "sm:divider-end"
         # "@sm:divider-end"
         # "md:divider-end"
         # "@md:divider-end"
         # "lg:divider-end"
         # "@lg:divider-end"
-      end: "divider-end",
-      # "sm:divider-neutral"
-      # "@sm:divider-neutral"
-      # "md:divider-neutral"
-      # "@md:divider-neutral"
-      # "lg:divider-neutral"
-      # "@lg:divider-neutral"
-      neutral: "divider-neutral",
-      # "sm:divider-primary"
-      # "@sm:divider-primary"
-      # "md:divider-primary"
-      # "@md:divider-primary"
-      # "lg:divider-primary"
-      # "@lg:divider-primary"
-      primary: "divider-primary",
-      # "sm:divider-secondary"
-      # "@sm:divider-secondary"
-      # "md:divider-secondary"
-      # "@md:divider-secondary"
-      # "lg:divider-secondary"
-      # "@lg:divider-secondary"
-      secondary: "divider-secondary",
-      # "sm:divider-accent"
-      # "@sm:divider-accent"
-      # "md:divider-accent"
-      # "@md:divider-accent"
-      # "lg:divider-accent"
-      # "@lg:divider-accent"
-      accent: "divider-accent",
-      # "sm:divider-success"
-      # "@sm:divider-success"
-      # "md:divider-success"
-      # "@md:divider-success"
-      # "lg:divider-success"
-      # "@lg:divider-success"
-      success: "divider-success",
-      # "sm:divider-warning"
-      # "@sm:divider-warning"
-      # "md:divider-warning"
-      # "@md:divider-warning"
-      # "lg:divider-warning"
-      # "@lg:divider-warning"
-      warning: "divider-warning",
-      # "sm:divider-info"
-      # "@sm:divider-info"
-      # "md:divider-info"
-      # "@md:divider-info"
-      # "lg:divider-info"
-      # "@lg:divider-info"
-      info: "divider-info",
-      # "sm:divider-error"
-      # "@sm:divider-error"
-      # "md:divider-error"
-      # "@md:divider-error"
-      # "lg:divider-error"
-      # "@lg:divider-error"
-      error: "divider-error"
+        end: "divider-end"
+      },
+      color: {
+        # "sm:divider-neutral"
+        # "@sm:divider-neutral"
+        # "md:divider-neutral"
+        # "@md:divider-neutral"
+        # "lg:divider-neutral"
+        # "@lg:divider-neutral"
+        neutral: "divider-neutral",
+        # "sm:divider-primary"
+        # "@sm:divider-primary"
+        # "md:divider-primary"
+        # "@md:divider-primary"
+        # "lg:divider-primary"
+        # "@lg:divider-primary"
+        primary: "divider-primary",
+        # "sm:divider-secondary"
+        # "@sm:divider-secondary"
+        # "md:divider-secondary"
+        # "@md:divider-secondary"
+        # "lg:divider-secondary"
+        # "@lg:divider-secondary"
+        secondary: "divider-secondary",
+        # "sm:divider-accent"
+        # "@sm:divider-accent"
+        # "md:divider-accent"
+        # "@md:divider-accent"
+        # "lg:divider-accent"
+        # "@lg:divider-accent"
+        accent: "divider-accent",
+        # "sm:divider-success"
+        # "@sm:divider-success"
+        # "md:divider-success"
+        # "@md:divider-success"
+        # "lg:divider-success"
+        # "@lg:divider-success"
+        success: "divider-success",
+        # "sm:divider-warning"
+        # "@sm:divider-warning"
+        # "md:divider-warning"
+        # "@md:divider-warning"
+        # "lg:divider-warning"
+        # "@lg:divider-warning"
+        warning: "divider-warning",
+        # "sm:divider-info"
+        # "@sm:divider-info"
+        # "md:divider-info"
+        # "@md:divider-info"
+        # "lg:divider-info"
+        # "@lg:divider-info"
+        info: "divider-info",
+        # "sm:divider-error"
+        # "@sm:divider-error"
+        # "md:divider-error"
+        # "@md:divider-error"
+        # "lg:divider-error"
+        # "@lg:divider-error"
+        error: "divider-error"
+      }
     )
   end
 end

data/lib/daisy_ui/dock.rb

@@ -21,41 +21,43 @@ module DaisyUI
       # "lg:dock-active"
       # "@lg:dock-active"
       active: "dock-active",
-      # "sm:dock-xs"
-      # "@sm:dock-xs"
-      # "md:dock-xs"
-      # "@md:dock-xs"
-      # "lg:dock-xs"
-      # "@lg:dock-xs"
-      xs: "dock-xs",
-      # "sm:dock-sm"
-      # "@sm:dock-sm"
-      # "md:dock-sm"
-      # "@md:dock-sm"
-      # "lg:dock-sm"
-      # "@lg:dock-sm"
-      sm: "dock-sm",
-      # "sm:dock-md"
-      # "@sm:dock-md"
-      # "md:dock-md"
-      # "@md:dock-md"
-      # "lg:dock-md"
-      # "@lg:dock-md"
-      md: "dock-md",
-      # "sm:dock-lg"
-      # "@sm:dock-lg"
-      # "md:dock-lg"
-      # "@md:dock-lg"
-      # "lg:dock-lg"
-      # "@lg:dock-lg"
-      lg: "dock-lg",
-      # "sm:dock-xl"
-      # "@sm:dock-xl"
-      # "md:dock-xl"
-      # "@md:dock-xl"
-      # "lg:dock-xl"
-      # "@lg:dock-xl"
-      xl: "dock-xl"
+      size: {
+        # "sm:dock-xs"
+        # "@sm:dock-xs"
+        # "md:dock-xs"
+        # "@md:dock-xs"
+        # "lg:dock-xs"
+        # "@lg:dock-xs"
+        xs: "dock-xs",
+        # "sm:dock-sm"
+        # "@sm:dock-sm"
+        # "md:dock-sm"
+        # "@md:dock-sm"
+        # "lg:dock-sm"
+        # "@lg:dock-sm"
+        sm: "dock-sm",
+        # "sm:dock-md"
+        # "@sm:dock-md"
+        # "md:dock-md"
+        # "@md:dock-md"
+        # "lg:dock-md"
+        # "@lg:dock-md"
+        md: "dock-md",
+        # "sm:dock-lg"
+        # "@sm:dock-lg"
+        # "md:dock-lg"
+        # "@md:dock-lg"
+        # "lg:dock-lg"
+        # "@lg:dock-lg"
+        lg: "dock-lg",
+        # "sm:dock-xl"
+        # "@sm:dock-xl"
+        # "md:dock-xl"
+        # "@md:dock-xl"
+        # "lg:dock-xl"
+        # "@lg:dock-xl"
+        xl: "dock-xl"
+      }
     )
   end
 end