Class: Rubocop::Cop::Tailwind::MaxWidthMediaQueries

Inherits:
RuboCop::Cop::Base
  • Object
show all
Defined in:
lib/rubocop/cop/tailwind/max_width_media_queries.rb

Overview

This prevents the use of max-width media query Tailwind CSS utility classes unless absolutely necessary. min-width media query Tailwind CSS utility classes should be used instead.

Examples:

# bad
css_classes = ["gl-mt-5", "max-md:gl-mt-3"]
%div{ class: ["gl-mt-5", "max-md:gl-mt-3"] }

# good
css_classes = ["gl-mt-3", "md:gl-mt-5"]
%div{ class: ["gl-mt-3", "md:gl-mt-5"] }

Constant Summary collapse

TAILWIND_CSS_CLASS = 
/max-(sm|md|lg|xl):gl-/
MSG = 
'Do not use max-width media query utility classes unless absolutely necessary. ' \
'Use min-width media query utility classes instead.'

Instance Method Summary collapse

Instance Method Details

#max_width_media_query_class?(node) ⇒ Object 



22
23
24
 
# File 'lib/rubocop/cop/tailwind/max_width_media_queries.rb', line 22

def_node_matcher :max_width_media_query_class?, <<~PATTERN
  (str /#{TAILWIND_CSS_CLASS}/)
PATTERN

#on_str(node) ⇒ Object 



26
27
28
29
30
 
# File 'lib/rubocop/cop/tailwind/max_width_media_queries.rb', line 26

def on_str(node)
  return unless max_width_media_query_class?(node)

  add_offense(node)
end