Contents

# frozen_string_literal: true

module Rubocop
  module Cop
    module Tailwind
      # This prevents utility class names from being built dynamically using string interpolation.
      # Tailwind needs to be able to parse fully qualified names to include the necessary utils in
      # the bundle.
      # @example
      #   # bad
      #   bgColor = "gl-bg-#{palette}-#{variant}"
      #   cssClasses = "gl-#{display} gl-border"
      #   width = "gl-w-1/#{denominator}"
      #
      #   # good
      #   bgColor = "gl-bg-red-800"
      #   cssClasses = "gl-flex gl-border"
      #   width = "gl-w-1/2"
      class StringInterpolation < RuboCop::Cop::Base
        TAILWIND_CSS_CLASS = %r{(^|\s)gl-[a-z0-9\-/]*$}
        MSG = 'String interpolations in CSS utility class names are forbidden. See https://gitlab.com/gitlab-org/ruby/gems/gitlab-styles/-/issues/73.'

        # @!method interpolated_tailwind_class?(node)
        def_node_matcher :interpolated_tailwind_class?, <<~PATTERN
          (dstr
            (str /#{TAILWIND_CSS_CLASS}/)
            (begin ...)
            ...
          )
        PATTERN

        def on_dstr(node)
          return unless interpolated_tailwind_class?(node)

          add_offense(node)
        end
      end
    end
  end
end

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
gitlab-styles-13.0.1	lib/rubocop/cop/tailwind/string_interpolation.rb
gitlab-styles-13.0.0	lib/rubocop/cop/tailwind/string_interpolation.rb