primer_view_components 0.0.40 → 0.0.45

data/app/lib/primer/classify.rb

@@ -3,11 +3,20 @@
 module Primer
   # :nodoc:
   class Classify
+    # Load the utilities.yml file.
+    # Disabling because we want to load symbols, strings, and integers from the .yml file
+    # rubocop:disable Security/YAMLLoad
+    UTILITIES = YAML.load(
+      File.read(
+        File.join(File.dirname(__FILE__), "./classify/utilities.yml")
+      )
+    ).freeze
+    # rubocop:enable Security/YAMLLoad
+
     DISPLAY_KEY = :display
-    SPACING_KEYS = Primer::Classify::Spacing::KEYS
 
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
+    CONCAT_KEYS = %i[position v text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
       (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
@@ -16,15 +25,16 @@ module Primer
     BG_KEY = :bg
     VERTICAL_ALIGN_KEY = :vertical_align
     WORD_BREAK_KEY = :word_break
-    TEXT_KEYS = %i[text_align font_weight].freeze
+    TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
     VISIBILITY_KEY = :visibility
     ANIMATION_KEY = :animation
+    CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -78,12 +88,14 @@ module Primer
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
+      UTILITIES.keys +
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       Primer::Classify::Flex::KEYS +
+      Primer::Classify::Grid::KEYS +
       [
         BORDER_KEY,
         BORDER_COLOR_KEY,
@@ -97,7 +109,8 @@ module Primer
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
         VISIBILITY_KEY,
-        ANIMATION_KEY
+        ANIMATION_KEY,
+        CONTAINER_KEY
       ]
     ).freeze
 
@@ -123,13 +136,13 @@ module Primer
       def validated_class_names(classes)
         return if classes.blank?
 
-        if ENV["RAILS_ENV"] == "development"
+        if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
           invalid_class_names =
             classes.split(" ").each_with_object([]) do |class_name, memo|
-              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
+              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) } || Primer::Classify::Utilities.supported_selector?(class_name)
             end
 
-          raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production." if invalid_class_names.any?
+          raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
         end
 
         classes
@@ -152,7 +165,7 @@ module Primer
           next unless VALID_KEYS.include?(key)
 
           if value.is_a?(Array)
-            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
+            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
 
             value.each_with_index do |val, index|
               Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
@@ -170,8 +183,8 @@ module Primer
       def extract_value(memo, key, val, breakpoint)
         return if val.nil? || val == ""
 
-        if SPACING_KEYS.include?(key)
-          memo[:classes] << Primer::Classify::Spacing.spacing(key, val, breakpoint)
+        if Primer::Classify::Utilities.supported_key?(key)
+          memo[:classes] << Primer::Classify::Utilities.classname(key, val, breakpoint)
         elsif BOOLEAN_MAPPINGS.key?(key)
           BOOLEAN_MAPPINGS[key][:mappings].each do |m|
             memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
@@ -206,6 +219,8 @@ module Primer
           memo[:classes] << "rounded-#{val}"
         elsif Primer::Classify::Flex::KEYS.include?(key)
           memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
+        elsif Primer::Classify::Grid::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Grid.classes(key, val, breakpoint)
         elsif key == WIDTH_KEY || key == HEIGHT_KEY
           if val == :fit
             memo[:classes] << "#{key}-#{val}"
@@ -215,7 +230,11 @@ module Primer
         elsif TEXT_KEYS.include?(key)
           memo[:classes] << "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)
-          memo[:classes] << "f#{val.to_s.dasherize}"
+          memo[:classes] << if val == :small || val == :normal
+                              "text-#{val.to_s.dasherize}"
+                            else
+                              "f#{val.to_s.dasherize}"
+                            end
         elsif key == BOX_SHADOW_KEY
           memo[:classes] << if val == true
                               "color-shadow-small"
@@ -236,6 +255,10 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end
       end
+
+      def force_system_arguments?
+        Rails.application.config.primer_view_components.force_system_arguments
+      end
     end
 
     Cache.preload!

data/app/lib/primer/classify/cache.rb

@@ -20,38 +20,33 @@ module Primer
 
         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
+            keys: Primer::Classify::Flex::DIRECTION_KEY,
+            values: Primer::Classify::Flex::DIRECTION_VALUES
           )
 
           preload(
-            keys: Primer::Classify::Spacing::AUTO_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::AUTO_OPTIONS
+            keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
+            values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
           )
 
           preload(
-            keys: Primer::Classify::Spacing::RESPONSIVE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::RESPONSIVE_OPTIONS
+            keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
+            values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
           )
 
           preload(
-            keys: Primer::Classify::Flex::DIRECTION_KEY,
-            values: Primer::Classify::Flex::DIRECTION_VALUES
+            keys: Primer::Classify::Grid::CONTAINER_KEY,
+            values: Primer::Classify::Grid::CONTAINER_VALUES
           )
 
           preload(
-            keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
-            values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
+            keys: Primer::Classify::Grid::CLEARFIX_KEY,
+            values: [true]
           )
 
           preload(
-            keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
-            values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
+            keys: Primer::Classify::Grid::COL_KEY,
+            values: Primer::Classify::Grid::COL_VALUES
           )
 
           preload(

data/app/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/app/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/app/lib/primer/classify/utilities.yml

@@ -0,0 +1,1147 @@
+---
+: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
+:hide:
+  :sm:
+  - hide-sm
+  :md:
+  - hide-md
+  :lg:
+  - hide-lg
+  :xl:
+  - hide-xl