primer_view_components 0.0.41 → 0.0.46

data/{app/lib → lib}/primer/classify/cache.rb

@@ -1,5 +1,11 @@
 # frozen_string_literal: true
 
+require_relative "flex"
+require_relative "functional_background_colors"
+require_relative "functional_border_colors"
+require_relative "functional_text_colors"
+require_relative "grid"
+
 module Primer
   class Classify
     # :nodoc:
@@ -19,26 +25,6 @@ module Primer
         end
 
         def preload!
-          preload(
-            keys: Primer::Classify::Spacing::MARGIN_DIRECTION_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::MARGIN_DIRECTION_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::BASE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::BASE_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::AUTO_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::AUTO_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::RESPONSIVE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::RESPONSIVE_OPTIONS
-          )
-
           preload(
             keys: Primer::Classify::Flex::DIRECTION_KEY,
             values: Primer::Classify::Flex::DIRECTION_VALUES
@@ -55,28 +41,28 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::DISPLAY_KEY,
-            values: [:flex, :block, :inline_block, :inline_flex, :none, :table, :table_cell]
+            keys: Primer::Classify::Grid::CONTAINER_KEY,
+            values: Primer::Classify::Grid::CONTAINER_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::COLOR_KEY],
-            values: Primer::Classify::FunctionalTextColors::OPTIONS
+            keys: Primer::Classify::Grid::CLEARFIX_KEY,
+            values: [true]
           )
 
           preload(
-            keys: [Primer::Classify::BG_KEY],
-            values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
+            keys: Primer::Classify::Grid::COL_KEY,
+            values: Primer::Classify::Grid::COL_VALUES
           )
 
           preload(
-            keys: Primer::Classify::VERTICAL_ALIGN_KEY,
-            values: [:baseline, :top, :middle, :bottom, :text_top, :text_bottom]
+            keys: [Primer::Classify::COLOR_KEY],
+            values: Primer::Classify::FunctionalTextColors::OPTIONS
           )
 
           preload(
-            keys: Primer::Classify::WORD_BREAK_KEY,
-            values: [:break_all]
+            keys: [Primer::Classify::BG_KEY],
+            values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
           )
 
           preload(
@@ -118,11 +104,6 @@ module Primer
             keys: Primer::Classify::BOX_SHADOW_KEY,
             values: [true, :small, :medium, :large, :extra_large, :none]
           )
-
-          preload(
-            keys: Primer::Classify::VISIBILITY_KEY,
-            values: [:hidden, :visible]
-          )
         end
 
         def preload(keys:, values:)

data/{app/lib → lib}/primer/classify/functional_background_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Background specific functional colors

data/{app/lib → lib}/primer/classify/functional_border_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Border specific functional colors

data/{app/lib → lib}/primer/classify/functional_text_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Text specific functional colors.

data/lib/primer/classify/grid.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Handler for PrimerCSS grid classes.
+    class Grid
+      extend Primer::FetchOrFallbackHelper
+
+      CONTAINER_KEY = :container
+      CONTAINER_VALUES = [:xl, :lg, :md, :sm].freeze
+
+      CLEARFIX_KEY = :clearfix
+      CLEARFIX_VALUES = [true, false].freeze
+
+      COL_KEY = :col
+      COL_VALUES = (1..12).to_a.freeze
+
+      KEYS = [CONTAINER_KEY, CLEARFIX_KEY, COL_KEY].freeze
+
+      class << self
+        def classes(key, value, breakpoint)
+          send(key, value, breakpoint)
+        end
+
+        private
+
+        def container(value, _breakpoint)
+          val = fetch_or_fallback(CONTAINER_VALUES, value)
+
+          "container-#{val}"
+        end
+
+        def clearfix(value, _breakpoint)
+          "clearfix" if fetch_or_fallback(CLEARFIX_VALUES, value)
+        end
+
+        def col(value, breakpoint)
+          val = fetch_or_fallback(COL_VALUES, value.to_i)
+
+          "col#{breakpoint}-#{val}"
+        end
+      end
+    end
+  end
+end

data/lib/primer/classify/utilities.rb

@@ -0,0 +1,137 @@
+# frozen_string_literal: true
+
+# :nodoc:
+module Primer
+  class Classify
+    # Handler for PrimerCSS utility classes loaded from utilities.rake
+    class Utilities
+      class << self
+        def classname(key, val, breakpoint = "")
+          if (valid = validate(key, val, breakpoint))
+            valid
+          else
+            # Get selector
+            Primer::Classify::UTILITIES[key][val][Primer::Classify::BREAKPOINTS.index(breakpoint)]
+          end
+        end
+
+        # Does the Utilitiy class support the given key
+        #
+        # returns Boolean
+        def supported_key?(key)
+          Primer::Classify::UTILITIES[key].present?
+        end
+
+        # Does the Utilitiy class support the given key and value
+        #
+        # returns Boolean
+        def supported_value?(key, val)
+          supported_key?(key) && Primer::Classify::UTILITIES[key][val].present?
+        end
+
+        # Does the given selector exist in the utilities file
+        #
+        # returns Boolean
+        def supported_selector?(selector)
+          # This method is too slow to run in production
+          return false if Rails.env.production?
+
+          find_selector(selector).present?
+        end
+
+        # Is the key and value responsive
+        #
+        # returns Boolean
+        def responsive?(key, val)
+          supported_value?(key, val) && Primer::Classify::UTILITIES[key][val].count > 1
+        end
+
+        # Get the options for the given key
+        #
+        # returns Array or nil if key not supported
+        def mappings(key)
+          return unless supported_key?(key)
+
+          Primer::Classify::UTILITIES[key].keys
+        end
+
+        # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
+        def classes_to_hash(classes)
+          # This method is too slow to run in production
+          return { classes: classes } if Rails.env.production?
+
+          obj = {}
+          classes = classes.split(" ")
+          # Loop through all classes supplied and reject ones we find a match for
+          # So when we're at the end of the loop we have classes left with any non-system classes.
+          classes.reject! do |classname|
+            key, value, index = find_selector(classname)
+            next false if key.nil?
+
+            # Create array if nil
+            obj[key] = Array.new(5, nil) if obj[key].nil?
+            # Place the arguments in the responsive array based on index mr: [nil, 2]
+            obj[key][index] = value
+            next true
+          end
+
+          # Transform responsive arrays into arrays without trailing nil, so `mr: [1, nil, nil, nil, nil]` becomes `mr: 1`
+          obj.transform_values! do |value|
+            value = value.reverse.drop_while(&:nil?).reverse
+            if value.count == 1
+              value.first
+            else
+              value
+            end
+          end
+
+          # Add back the non-system classes
+          obj[:classes] = classes.join(" ") if classes.any?
+          obj
+        end
+
+        private
+
+        def find_selector(selector)
+          # Search each key/value_hash pair, eg. key `:mr` and value_hash `{ 0 => [ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ] }`
+          Primer::Classify::UTILITIES.each do |key, value_hash|
+            # Each value hash will also contain an array of classnames for breakpoints
+            # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
+            value_hash.each do |key_argument, classnames|
+              # Skip each value hash until we get one with the selector
+              next unless classnames.include?(selector)
+
+              # Return [:mr, 0, 1]
+              # has index of classname, so we can match it up with responsvie array `mr: [nil, 0]`
+              return [key, key_argument, classnames.index(selector)]
+            end
+          end
+
+          nil
+        end
+
+        def validate(key, val, breakpoint)
+          unless supported_key?(key)
+            raise ArgumentError, "#{key} is not a valid Primer utility key" unless Rails.env.production?
+
+            return ""
+          end
+
+          unless breakpoint.empty? || responsive?(key, val)
+            raise ArgumentError, "#{key} does not support responsive values" unless Rails.env.production?
+
+            return ""
+          end
+
+          unless supported_value?(key, val)
+            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless Rails.env.production?
+
+            return ""
+          end
+
+          nil
+        end
+      end
+    end
+  end
+end

data/lib/primer/classify/utilities.yml

@@ -0,0 +1,1271 @@
+---
+:animation:
+  :fade_in:
+  - anim-fade-in
+  :fade_out:
+  - anim-fade-out
+  :fade_up:
+  - anim-fade-up
+  :fade_down:
+  - anim-fade-down
+  :grow_x:
+  - anim-grow-x
+  :shrink_x:
+  - anim-shrink-x
+  :scale_in:
+  - anim-scale-in
+  :pulse:
+  - anim-pulse
+  :pulse_in:
+  - anim-pulse-in
+  :hover_grow:
+  - anim-hover-grow
+  :rotate:
+  - anim-rotate
+:position:
+  :static:
+  - position-static
+  - position-sm-static
+  - position-md-static
+  - position-lg-static
+  - position-xl-static
+  :relative:
+  - position-relative
+  - position-sm-relative
+  - position-md-relative
+  - position-lg-relative
+  - position-xl-relative
+  :absolute:
+  - position-absolute
+  - position-sm-absolute
+  - position-md-absolute
+  - position-lg-absolute
+  - position-xl-absolute
+  :fixed:
+  - position-fixed
+  - position-sm-fixed
+  - position-md-fixed
+  - position-lg-fixed
+  - position-xl-fixed
+  :sticky:
+  - position-sticky
+  - position-sm-sticky
+  - position-md-sticky
+  - position-lg-sticky
+  - position-xl-sticky
+:vertical_align:
+  :middle:
+  - v-align-middle
+  :top:
+  - v-align-top
+  :bottom:
+  - v-align-bottom
+  :text_top:
+  - v-align-text-top
+  :text_bottom:
+  - v-align-text-bottom
+  :baseline:
+  - v-align-baseline
+:float:
+  :left:
+  - float-left
+  - float-sm-left
+  - float-md-left
+  - float-lg-left
+  - float-xl-left
+  :right:
+  - float-right
+  - float-sm-right
+  - float-md-right
+  - float-lg-right
+  - float-xl-right
+  :none:
+  - float-none
+  - float-sm-none
+  - float-md-none
+  - float-lg-none
+  - float-xl-none
+:m:
+  0:
+  - m-0
+  - m-sm-0
+  - m-md-0
+  - m-lg-0
+  - m-xl-0
+  1:
+  - m-1
+  - m-sm-1
+  - m-md-1
+  - m-lg-1
+  - m-xl-1
+  2:
+  - m-2
+  - m-sm-2
+  - m-md-2
+  - m-lg-2
+  - m-xl-2
+  3:
+  - m-3
+  - m-sm-3
+  - m-md-3
+  - m-lg-3
+  - m-xl-3
+  4:
+  - m-4
+  - m-sm-4
+  - m-md-4
+  - m-lg-4
+  - m-xl-4
+  5:
+  - m-5
+  - m-sm-5
+  - m-md-5
+  - m-lg-5
+  - m-xl-5
+  6:
+  - m-6
+  - m-sm-6
+  - m-md-6
+  - m-lg-6
+  - m-xl-6
+  :auto:
+  - m-auto
+:mt:
+  0:
+  - mt-0
+  - mt-sm-0
+  - mt-md-0
+  - mt-lg-0
+  - mt-xl-0
+  1:
+  - mt-1
+  - mt-sm-1
+  - mt-md-1
+  - mt-lg-1
+  - mt-xl-1
+  -1:
+  - mt-n1
+  - mt-sm-n1
+  - mt-md-n1
+  - mt-lg-n1
+  - mt-xl-n1
+  2:
+  - mt-2
+  - mt-sm-2
+  - mt-md-2
+  - mt-lg-2
+  - mt-xl-2
+  -2:
+  - mt-n2
+  - mt-sm-n2
+  - mt-md-n2
+  - mt-lg-n2
+  - mt-xl-n2
+  3:
+  - mt-3
+  - mt-sm-3
+  - mt-md-3
+  - mt-lg-3
+  - mt-xl-3
+  -3:
+  - mt-n3
+  - mt-sm-n3
+  - mt-md-n3
+  - mt-lg-n3
+  - mt-xl-n3
+  4:
+  - mt-4
+  - mt-sm-4
+  - mt-md-4
+  - mt-lg-4
+  - mt-xl-4
+  -4:
+  - mt-n4
+  - mt-sm-n4
+  - mt-md-n4
+  - mt-lg-n4
+  - mt-xl-n4
+  5:
+  - mt-5
+  - mt-sm-5
+  - mt-md-5
+  - mt-lg-5
+  - mt-xl-5
+  -5:
+  - mt-n5
+  - mt-sm-n5
+  - mt-md-n5
+  - mt-lg-n5
+  - mt-xl-n5
+  6:
+  - mt-6
+  - mt-sm-6
+  - mt-md-6
+  - mt-lg-6
+  - mt-xl-6
+  -6:
+  - mt-n6
+  - mt-sm-n6
+  - mt-md-n6
+  - mt-lg-n6
+  - mt-xl-n6
+  7:
+  - mt-7
+  - mt-sm-7
+  - mt-md-7
+  - mt-lg-7
+  - mt-xl-7
+  -7:
+  - mt-n7
+  - mt-sm-n7
+  - mt-md-n7
+  - mt-lg-n7
+  - mt-xl-n7
+  8:
+  - mt-8
+  - mt-sm-8
+  - mt-md-8
+  - mt-lg-8
+  - mt-xl-8
+  -8:
+  - mt-n8
+  - mt-sm-n8
+  - mt-md-n8
+  - mt-lg-n8
+  - mt-xl-n8
+  9:
+  - mt-9
+  - mt-sm-9
+  - mt-md-9
+  - mt-lg-9
+  - mt-xl-9
+  -9:
+  - mt-n9
+  - mt-sm-n9
+  - mt-md-n9
+  - mt-lg-n9
+  - mt-xl-n9
+  10:
+  - mt-10
+  - mt-sm-10
+  - mt-md-10
+  - mt-lg-10
+  - mt-xl-10
+  -10:
+  - mt-n10
+  - mt-sm-n10
+  - mt-md-n10
+  - mt-lg-n10
+  - mt-xl-n10
+  11:
+  - mt-11
+  - mt-sm-11
+  - mt-md-11
+  - mt-lg-11
+  - mt-xl-11
+  -11:
+  - mt-n11
+  - mt-sm-n11
+  - mt-md-n11
+  - mt-lg-n11
+  - mt-xl-n11
+  12:
+  - mt-12
+  - mt-sm-12
+  - mt-md-12
+  - mt-lg-12
+  - mt-xl-12
+  -12:
+  - mt-n12
+  - mt-sm-n12
+  - mt-md-n12
+  - mt-lg-n12
+  - mt-xl-n12
+  :auto:
+  - mt-auto
+:mb:
+  0:
+  - mb-0
+  - mb-sm-0
+  - mb-md-0
+  - mb-lg-0
+  - mb-xl-0
+  1:
+  - mb-1
+  - mb-sm-1
+  - mb-md-1
+  - mb-lg-1
+  - mb-xl-1
+  -1:
+  - mb-n1
+  - mb-sm-n1
+  - mb-md-n1
+  - mb-lg-n1
+  - mb-xl-n1
+  2:
+  - mb-2
+  - mb-sm-2
+  - mb-md-2
+  - mb-lg-2
+  - mb-xl-2
+  -2:
+  - mb-n2
+  - mb-sm-n2
+  - mb-md-n2
+  - mb-lg-n2
+  - mb-xl-n2
+  3:
+  - mb-3
+  - mb-sm-3
+  - mb-md-3
+  - mb-lg-3
+  - mb-xl-3
+  -3:
+  - mb-n3
+  - mb-sm-n3
+  - mb-md-n3
+  - mb-lg-n3
+  - mb-xl-n3
+  4:
+  - mb-4
+  - mb-sm-4
+  - mb-md-4
+  - mb-lg-4
+  - mb-xl-4
+  -4:
+  - mb-n4
+  - mb-sm-n4
+  - mb-md-n4
+  - mb-lg-n4
+  - mb-xl-n4
+  5:
+  - mb-5
+  - mb-sm-5
+  - mb-md-5
+  - mb-lg-5
+  - mb-xl-5
+  -5:
+  - mb-n5
+  - mb-sm-n5
+  - mb-md-n5
+  - mb-lg-n5
+  - mb-xl-n5
+  6:
+  - mb-6
+  - mb-sm-6
+  - mb-md-6
+  - mb-lg-6
+  - mb-xl-6
+  -6:
+  - mb-n6
+  - mb-sm-n6
+  - mb-md-n6
+  - mb-lg-n6
+  - mb-xl-n6
+  7:
+  - mb-7
+  - mb-sm-7
+  - mb-md-7
+  - mb-lg-7
+  - mb-xl-7
+  -7:
+  - mb-n7
+  - mb-sm-n7
+  - mb-md-n7
+  - mb-lg-n7
+  - mb-xl-n7
+  8:
+  - mb-8
+  - mb-sm-8
+  - mb-md-8
+  - mb-lg-8
+  - mb-xl-8
+  -8:
+  - mb-n8
+  - mb-sm-n8
+  - mb-md-n8
+  - mb-lg-n8
+  - mb-xl-n8
+  9:
+  - mb-9
+  - mb-sm-9
+  - mb-md-9
+  - mb-lg-9
+  - mb-xl-9
+  -9:
+  - mb-n9
+  - mb-sm-n9
+  - mb-md-n9
+  - mb-lg-n9
+  - mb-xl-n9
+  10:
+  - mb-10
+  - mb-sm-10
+  - mb-md-10
+  - mb-lg-10
+  - mb-xl-10
+  -10:
+  - mb-n10
+  - mb-sm-n10
+  - mb-md-n10
+  - mb-lg-n10
+  - mb-xl-n10
+  11:
+  - mb-11
+  - mb-sm-11
+  - mb-md-11
+  - mb-lg-11
+  - mb-xl-11
+  -11:
+  - mb-n11
+  - mb-sm-n11
+  - mb-md-n11
+  - mb-lg-n11
+  - mb-xl-n11
+  12:
+  - mb-12
+  - mb-sm-12
+  - mb-md-12
+  - mb-lg-12
+  - mb-xl-12
+  -12:
+  - mb-n12
+  - mb-sm-n12
+  - mb-md-n12
+  - mb-lg-n12
+  - mb-xl-n12
+:mr:
+  0:
+  - mr-0
+  - mr-sm-0
+  - mr-md-0
+  - mr-lg-0
+  - mr-xl-0
+  1:
+  - mr-1
+  - mr-sm-1
+  - mr-md-1
+  - mr-lg-1
+  - mr-xl-1
+  -1:
+  - mr-n1
+  - mr-sm-n1
+  - mr-md-n1
+  - mr-lg-n1
+  - mr-xl-n1
+  2:
+  - mr-2
+  - mr-sm-2
+  - mr-md-2
+  - mr-lg-2
+  - mr-xl-2
+  -2:
+  - mr-n2
+  - mr-sm-n2
+  - mr-md-n2
+  - mr-lg-n2
+  - mr-xl-n2
+  3:
+  - mr-3
+  - mr-sm-3
+  - mr-md-3
+  - mr-lg-3
+  - mr-xl-3
+  -3:
+  - mr-n3
+  - mr-sm-n3
+  - mr-md-n3
+  - mr-lg-n3
+  - mr-xl-n3
+  4:
+  - mr-4
+  - mr-sm-4
+  - mr-md-4
+  - mr-lg-4
+  - mr-xl-4
+  -4:
+  - mr-n4
+  - mr-sm-n4
+  - mr-md-n4
+  - mr-lg-n4
+  - mr-xl-n4
+  5:
+  - mr-5
+  - mr-sm-5
+  - mr-md-5
+  - mr-lg-5
+  - mr-xl-5
+  -5:
+  - mr-n5
+  - mr-sm-n5
+  - mr-md-n5
+  - mr-lg-n5
+  - mr-xl-n5
+  6:
+  - mr-6
+  - mr-sm-6
+  - mr-md-6
+  - mr-lg-6
+  - mr-xl-6
+  -6:
+  - mr-n6
+  - mr-sm-n6
+  - mr-md-n6
+  - mr-lg-n6
+  - mr-xl-n6
+:ml:
+  0:
+  - ml-0
+  - ml-sm-0
+  - ml-md-0
+  - ml-lg-0
+  - ml-xl-0
+  1:
+  - ml-1
+  - ml-sm-1
+  - ml-md-1
+  - ml-lg-1
+  - ml-xl-1
+  -1:
+  - ml-n1
+  - ml-sm-n1
+  - ml-md-n1
+  - ml-lg-n1
+  - ml-xl-n1
+  2:
+  - ml-2
+  - ml-sm-2
+  - ml-md-2
+  - ml-lg-2
+  - ml-xl-2
+  -2:
+  - ml-n2
+  - ml-sm-n2
+  - ml-md-n2
+  - ml-lg-n2
+  - ml-xl-n2
+  3:
+  - ml-3
+  - ml-sm-3
+  - ml-md-3
+  - ml-lg-3
+  - ml-xl-3
+  -3:
+  - ml-n3
+  - ml-sm-n3
+  - ml-md-n3
+  - ml-lg-n3
+  - ml-xl-n3
+  4:
+  - ml-4
+  - ml-sm-4
+  - ml-md-4
+  - ml-lg-4
+  - ml-xl-4
+  -4:
+  - ml-n4
+  - ml-sm-n4
+  - ml-md-n4
+  - ml-lg-n4
+  - ml-xl-n4
+  5:
+  - ml-5
+  - ml-sm-5
+  - ml-md-5
+  - ml-lg-5
+  - ml-xl-5
+  -5:
+  - ml-n5
+  - ml-sm-n5
+  - ml-md-n5
+  - ml-lg-n5
+  - ml-xl-n5
+  6:
+  - ml-6
+  - ml-sm-6
+  - ml-md-6
+  - ml-lg-6
+  - ml-xl-6
+  -6:
+  - ml-n6
+  - ml-sm-n6
+  - ml-md-n6
+  - ml-lg-n6
+  - ml-xl-n6
+:mx:
+  0:
+  - mx-0
+  - mx-sm-0
+  - mx-md-0
+  - mx-lg-0
+  - mx-xl-0
+  1:
+  - mx-1
+  - mx-sm-1
+  - mx-md-1
+  - mx-lg-1
+  - mx-xl-1
+  2:
+  - mx-2
+  - mx-sm-2
+  - mx-md-2
+  - mx-lg-2
+  - mx-xl-2
+  3:
+  - mx-3
+  - mx-sm-3
+  - mx-md-3
+  - mx-lg-3
+  - mx-xl-3
+  4:
+  - mx-4
+  - mx-sm-4
+  - mx-md-4
+  - mx-lg-4
+  - mx-xl-4
+  5:
+  - mx-5
+  - mx-sm-5
+  - mx-md-5
+  - mx-lg-5
+  - mx-xl-5
+  6:
+  - mx-6
+  - mx-sm-6
+  - mx-md-6
+  - mx-lg-6
+  - mx-xl-6
+  :auto:
+  - mx-auto
+  - mx-sm-auto
+  - mx-md-auto
+  - mx-lg-auto
+  - mx-xl-auto
+:my:
+  0:
+  - my-0
+  - my-sm-0
+  - my-md-0
+  - my-lg-0
+  - my-xl-0
+  1:
+  - my-1
+  - my-sm-1
+  - my-md-1
+  - my-lg-1
+  - my-xl-1
+  2:
+  - my-2
+  - my-sm-2
+  - my-md-2
+  - my-lg-2
+  - my-xl-2
+  3:
+  - my-3
+  - my-sm-3
+  - my-md-3
+  - my-lg-3
+  - my-xl-3
+  4:
+  - my-4
+  - my-sm-4
+  - my-md-4
+  - my-lg-4
+  - my-xl-4
+  5:
+  - my-5
+  - my-sm-5
+  - my-md-5
+  - my-lg-5
+  - my-xl-5
+  6:
+  - my-6
+  - my-sm-6
+  - my-md-6
+  - my-lg-6
+  - my-xl-6
+  7:
+  - my-7
+  - my-sm-7
+  - my-md-7
+  - my-lg-7
+  - my-xl-7
+  8:
+  - my-8
+  - my-sm-8
+  - my-md-8
+  - my-lg-8
+  - my-xl-8
+  9:
+  - my-9
+  - my-sm-9
+  - my-md-9
+  - my-lg-9
+  - my-xl-9
+  10:
+  - my-10
+  - my-sm-10
+  - my-md-10
+  - my-lg-10
+  - my-xl-10
+  11:
+  - my-11
+  - my-sm-11
+  - my-md-11
+  - my-lg-11
+  - my-xl-11
+  12:
+  - my-12
+  - my-sm-12
+  - my-md-12
+  - my-lg-12
+  - my-xl-12
+:p:
+  0:
+  - p-0
+  - p-sm-0
+  - p-md-0
+  - p-lg-0
+  - p-xl-0
+  1:
+  - p-1
+  - p-sm-1
+  - p-md-1
+  - p-lg-1
+  - p-xl-1
+  2:
+  - p-2
+  - p-sm-2
+  - p-md-2
+  - p-lg-2
+  - p-xl-2
+  3:
+  - p-3
+  - p-sm-3
+  - p-md-3
+  - p-lg-3
+  - p-xl-3
+  4:
+  - p-4
+  - p-sm-4
+  - p-md-4
+  - p-lg-4
+  - p-xl-4
+  5:
+  - p-5
+  - p-sm-5
+  - p-md-5
+  - p-lg-5
+  - p-xl-5
+  6:
+  - p-6
+  - p-sm-6
+  - p-md-6
+  - p-lg-6
+  - p-xl-6
+  :responsive:
+  - p-responsive
+:pt:
+  0:
+  - pt-0
+  - pt-sm-0
+  - pt-md-0
+  - pt-lg-0
+  - pt-xl-0
+  1:
+  - pt-1
+  - pt-sm-1
+  - pt-md-1
+  - pt-lg-1
+  - pt-xl-1
+  2:
+  - pt-2
+  - pt-sm-2
+  - pt-md-2
+  - pt-lg-2
+  - pt-xl-2
+  3:
+  - pt-3
+  - pt-sm-3
+  - pt-md-3
+  - pt-lg-3
+  - pt-xl-3
+  4:
+  - pt-4
+  - pt-sm-4
+  - pt-md-4
+  - pt-lg-4
+  - pt-xl-4
+  5:
+  - pt-5
+  - pt-sm-5
+  - pt-md-5
+  - pt-lg-5
+  - pt-xl-5
+  6:
+  - pt-6
+  - pt-sm-6
+  - pt-md-6
+  - pt-lg-6
+  - pt-xl-6
+  7:
+  - pt-7
+  - pt-sm-7
+  - pt-md-7
+  - pt-lg-7
+  - pt-xl-7
+  8:
+  - pt-8
+  - pt-sm-8
+  - pt-md-8
+  - pt-lg-8
+  - pt-xl-8
+  9:
+  - pt-9
+  - pt-sm-9
+  - pt-md-9
+  - pt-lg-9
+  - pt-xl-9
+  10:
+  - pt-10
+  - pt-sm-10
+  - pt-md-10
+  - pt-lg-10
+  - pt-xl-10
+  11:
+  - pt-11
+  - pt-sm-11
+  - pt-md-11
+  - pt-lg-11
+  - pt-xl-11
+  12:
+  - pt-12
+  - pt-sm-12
+  - pt-md-12
+  - pt-lg-12
+  - pt-xl-12
+:pr:
+  0:
+  - pr-0
+  - pr-sm-0
+  - pr-md-0
+  - pr-lg-0
+  - pr-xl-0
+  1:
+  - pr-1
+  - pr-sm-1
+  - pr-md-1
+  - pr-lg-1
+  - pr-xl-1
+  2:
+  - pr-2
+  - pr-sm-2
+  - pr-md-2
+  - pr-lg-2
+  - pr-xl-2
+  3:
+  - pr-3
+  - pr-sm-3
+  - pr-md-3
+  - pr-lg-3
+  - pr-xl-3
+  4:
+  - pr-4
+  - pr-sm-4
+  - pr-md-4
+  - pr-lg-4
+  - pr-xl-4
+  5:
+  - pr-5
+  - pr-sm-5
+  - pr-md-5
+  - pr-lg-5
+  - pr-xl-5
+  6:
+  - pr-6
+  - pr-sm-6
+  - pr-md-6
+  - pr-lg-6
+  - pr-xl-6
+  7:
+  - pr-7
+  - pr-sm-7
+  - pr-md-7
+  - pr-lg-7
+  - pr-xl-7
+  8:
+  - pr-8
+  - pr-sm-8
+  - pr-md-8
+  - pr-lg-8
+  - pr-xl-8
+  9:
+  - pr-9
+  - pr-sm-9
+  - pr-md-9
+  - pr-lg-9
+  - pr-xl-9
+  10:
+  - pr-10
+  - pr-sm-10
+  - pr-md-10
+  - pr-lg-10
+  - pr-xl-10
+  11:
+  - pr-11
+  - pr-sm-11
+  - pr-md-11
+  - pr-lg-11
+  - pr-xl-11
+  12:
+  - pr-12
+  - pr-sm-12
+  - pr-md-12
+  - pr-lg-12
+  - pr-xl-12
+:pb:
+  0:
+  - pb-0
+  - pb-sm-0
+  - pb-md-0
+  - pb-lg-0
+  - pb-xl-0
+  1:
+  - pb-1
+  - pb-sm-1
+  - pb-md-1
+  - pb-lg-1
+  - pb-xl-1
+  2:
+  - pb-2
+  - pb-sm-2
+  - pb-md-2
+  - pb-lg-2
+  - pb-xl-2
+  3:
+  - pb-3
+  - pb-sm-3
+  - pb-md-3
+  - pb-lg-3
+  - pb-xl-3
+  4:
+  - pb-4
+  - pb-sm-4
+  - pb-md-4
+  - pb-lg-4
+  - pb-xl-4
+  5:
+  - pb-5
+  - pb-sm-5
+  - pb-md-5
+  - pb-lg-5
+  - pb-xl-5
+  6:
+  - pb-6
+  - pb-sm-6
+  - pb-md-6
+  - pb-lg-6
+  - pb-xl-6
+  7:
+  - pb-7
+  - pb-sm-7
+  - pb-md-7
+  - pb-lg-7
+  - pb-xl-7
+  8:
+  - pb-8
+  - pb-sm-8
+  - pb-md-8
+  - pb-lg-8
+  - pb-xl-8
+  9:
+  - pb-9
+  - pb-sm-9
+  - pb-md-9
+  - pb-lg-9
+  - pb-xl-9
+  10:
+  - pb-10
+  - pb-sm-10
+  - pb-md-10
+  - pb-lg-10
+  - pb-xl-10
+  11:
+  - pb-11
+  - pb-sm-11
+  - pb-md-11
+  - pb-lg-11
+  - pb-xl-11
+  12:
+  - pb-12
+  - pb-sm-12
+  - pb-md-12
+  - pb-lg-12
+  - pb-xl-12
+:pl:
+  0:
+  - pl-0
+  - pl-sm-0
+  - pl-md-0
+  - pl-lg-0
+  - pl-xl-0
+  1:
+  - pl-1
+  - pl-sm-1
+  - pl-md-1
+  - pl-lg-1
+  - pl-xl-1
+  2:
+  - pl-2
+  - pl-sm-2
+  - pl-md-2
+  - pl-lg-2
+  - pl-xl-2
+  3:
+  - pl-3
+  - pl-sm-3
+  - pl-md-3
+  - pl-lg-3
+  - pl-xl-3
+  4:
+  - pl-4
+  - pl-sm-4
+  - pl-md-4
+  - pl-lg-4
+  - pl-xl-4
+  5:
+  - pl-5
+  - pl-sm-5
+  - pl-md-5
+  - pl-lg-5
+  - pl-xl-5
+  6:
+  - pl-6
+  - pl-sm-6
+  - pl-md-6
+  - pl-lg-6
+  - pl-xl-6
+  7:
+  - pl-7
+  - pl-sm-7
+  - pl-md-7
+  - pl-lg-7
+  - pl-xl-7
+  8:
+  - pl-8
+  - pl-sm-8
+  - pl-md-8
+  - pl-lg-8
+  - pl-xl-8
+  9:
+  - pl-9
+  - pl-sm-9
+  - pl-md-9
+  - pl-lg-9
+  - pl-xl-9
+  10:
+  - pl-10
+  - pl-sm-10
+  - pl-md-10
+  - pl-lg-10
+  - pl-xl-10
+  11:
+  - pl-11
+  - pl-sm-11
+  - pl-md-11
+  - pl-lg-11
+  - pl-xl-11
+  12:
+  - pl-12
+  - pl-sm-12
+  - pl-md-12
+  - pl-lg-12
+  - pl-xl-12
+:px:
+  0:
+  - px-0
+  - px-sm-0
+  - px-md-0
+  - px-lg-0
+  - px-xl-0
+  1:
+  - px-1
+  - px-sm-1
+  - px-md-1
+  - px-lg-1
+  - px-xl-1
+  2:
+  - px-2
+  - px-sm-2
+  - px-md-2
+  - px-lg-2
+  - px-xl-2
+  3:
+  - px-3
+  - px-sm-3
+  - px-md-3
+  - px-lg-3
+  - px-xl-3
+  4:
+  - px-4
+  - px-sm-4
+  - px-md-4
+  - px-lg-4
+  - px-xl-4
+  5:
+  - px-5
+  - px-sm-5
+  - px-md-5
+  - px-lg-5
+  - px-xl-5
+  6:
+  - px-6
+  - px-sm-6
+  - px-md-6
+  - px-lg-6
+  - px-xl-6
+:py:
+  0:
+  - py-0
+  - py-sm-0
+  - py-md-0
+  - py-lg-0
+  - py-xl-0
+  1:
+  - py-1
+  - py-sm-1
+  - py-md-1
+  - py-lg-1
+  - py-xl-1
+  2:
+  - py-2
+  - py-sm-2
+  - py-md-2
+  - py-lg-2
+  - py-xl-2
+  3:
+  - py-3
+  - py-sm-3
+  - py-md-3
+  - py-lg-3
+  - py-xl-3
+  4:
+  - py-4
+  - py-sm-4
+  - py-md-4
+  - py-lg-4
+  - py-xl-4
+  5:
+  - py-5
+  - py-sm-5
+  - py-md-5
+  - py-lg-5
+  - py-xl-5
+  6:
+  - py-6
+  - py-sm-6
+  - py-md-6
+  - py-lg-6
+  - py-xl-6
+  7:
+  - py-7
+  - py-sm-7
+  - py-md-7
+  - py-lg-7
+  - py-xl-7
+  8:
+  - py-8
+  - py-sm-8
+  - py-md-8
+  - py-lg-8
+  - py-xl-8
+  9:
+  - py-9
+  - py-sm-9
+  - py-md-9
+  - py-lg-9
+  - py-xl-9
+  10:
+  - py-10
+  - py-sm-10
+  - py-md-10
+  - py-lg-10
+  - py-xl-10
+  11:
+  - py-11
+  - py-sm-11
+  - py-md-11
+  - py-lg-11
+  - py-xl-11
+  12:
+  - py-12
+  - py-sm-12
+  - py-md-12
+  - py-lg-12
+  - py-xl-12
+:word_break:
+  :break_all:
+  - wb-break-all
+:display:
+  :block:
+  - d-block
+  - d-sm-block
+  - d-md-block
+  - d-lg-block
+  - d-xl-block
+  :flex:
+  - d-flex
+  - d-sm-flex
+  - d-md-flex
+  - d-lg-flex
+  - d-xl-flex
+  :inline:
+  - d-inline
+  - d-sm-inline
+  - d-md-inline
+  - d-lg-inline
+  - d-xl-inline
+  :inline_block:
+  - d-inline-block
+  - d-sm-inline-block
+  - d-md-inline-block
+  - d-lg-inline-block
+  - d-xl-inline-block
+  :inline_flex:
+  - d-inline-flex
+  - d-sm-inline-flex
+  - d-md-inline-flex
+  - d-lg-inline-flex
+  - d-xl-inline-flex
+  :none:
+  - d-none
+  - d-sm-none
+  - d-md-none
+  - d-lg-none
+  - d-xl-none
+  :table:
+  - d-table
+  - d-sm-table
+  - d-md-table
+  - d-lg-table
+  - d-xl-table
+  :table_cell:
+  - d-table-cell
+  - d-sm-table-cell
+  - d-md-table-cell
+  - d-lg-table-cell
+  - d-xl-table-cell
+:visibility:
+  :hidden:
+  - v-hidden
+  :visible:
+  - v-visible
+:hide:
+  :sm:
+  - hide-sm
+  :md:
+  - hide-md
+  :lg:
+  - hide-lg
+  :xl:
+  - hide-xl