Tailwind CSS를 위한 더 나은 HAML

문제

Tailwind CSS를 사용할 때 다른 상태 및 다른 중단점(예: hover, focus, sm 등)에 대한 클래스가 HTML 요소의 하나의 클래스 속성으로 함께 그룹화된다는 사실이 마음에 들지 않았습니다. 다른 상태에서 어떤 클래스가 활성화되는지 파악하기가 어려웠습니다.

더 나은 방법은 각 요소에 대해 focus , hover , sm , md 등의 속성을 갖는 것이므로 다른 상태에서 어떤 순풍 클래스가 활성화되는지 시각적으로 쉽게 파악할 수 있습니다. .

해결책

HAML은 Ruby 라이브러리이므로 약간의 원숭이 패치로 위의 문제를 해결했습니다. ApplicationHelper 의 app/helpers/application_helper.rb 모듈 코드 뒤에 다음을 추가했습니다.

module Haml
  # Haml::AttriubuteParser parses Hash literal to { String (key name) => String (value literal) }.
  module AttributeParser
    class << self
      # @param  [String] exp - Old attributes literal or Hash literal generated from new attributes.
      # @return [Hash<String, String>,nil] - Return parsed attribute Hash whose values are Ruby literals, or return nil if argument is not a single Hash literal.
      def parse(exp)
        return nil unless hash_literal?(exp)

        hash = Hash.new{"\"\""}
        each_attribute(exp) do |key, value|
          if key.in?(['sm', 'md', 'lg', 'xl', 'focus', 'hover'])
            # Build up string to insert into class attribute
            tw_classes = value[1..-2]   # Remove the esacped quotes from the original string
                          .split        # Split into array
                          .map{ |clas| "#{key}:#{clas}" }
                          .join(" ")

            # Insert tw classes string before last escape quote
            hash['class'] = hash['class'].insert(-2, " #{tw_classes}")
          elsif key == 'class'
            hash['class'] = hash['class'].insert(-2, " #{value[1..-2]}")
          else
            hash[key] = value
          end
        end
        hash
      rescue UnexpectedTokenError, UnexpectedKeyError
        nil
      end
    end
  end
end

이제 내 보기에서 다음과 같이 Tailwind CSS를 사용하여 내 요소의 스타일을 지정할 수 있습니다.

%input{class: "bg-gray-900 text-white pl-10 pr-4 py-2 rounded-lg w-full",
       sm: "bg-red-400 pl-2"
       focus: "outline-none bg-white text-gray-900",
       hover: "outline-none bg-white text-gray-900",
       placeholder: "Search by keywords"}

솔루션 프로세스

나는 이것이 구문 분석 문제라고 생각하여 HAML 문서를 살펴본 후 원숭이 패치 HAML::AttributeParser 를 해야 한다고 생각했습니다. 코드를 더 조사한 결과, 패치할 수 있는 방법은 parse 방법뿐이었습니다.

코드를 복사하여 내application_helper.rb에 붙여넣은 다음 raise를 삽입하여 내 코드가 파서에 영향을 미치고 있는지 확인했습니다.

몇 가지 puts 다음에 각각 raise 가 오고 속성 값이 큰따옴표를 이스케이프 처리하여 hash에 저장되었음을 발견했습니다. 따라서 다음과 같은 속성을 가진 요소

{class: "bg-white text-black"}

키가 hash이고 값이 인 로컬 class 변수에 저장되었습니다.

"\"bg-white text-black\""

따라서 큰따옴표를 올바르게 처리하기만 하면 됩니다.

해시의 키에 삽입할 때 .insert(-2, <string>) 를 사용하여 마지막 큰따옴표 앞에 삽입해야 합니다.

속성의 값 문자열을 처리할 때 [1..-2] 를 사용하여 이스케이프된 큰따옴표를 제거해야 합니다.

위의 것을 달성하는 더 효율적인 방법이 있다고 확신합니다. 더 나은 솔루션이 있으면 PR/토론here을 작성하여 알려주십시오.