Improve selectors, fix complex selector parsing issues

lib/syntax_tree/css/format.rb

@@ -76,6 +76,43 @@ def visit_type_selector(node)
           node.value.format(q)
         end
       end
+
+      # Visit a Selectors::ClassSelector node.
+      def visit_class_selector(node)
+        q.text(".")
+        node.value.format(q)
+      end
+
+      # Visit a Selectors::Combinator node.
+      def visit_combinator(node)
+        node.value.format(q)
+      end
+
+      # Visit a Selectors::ComplexSelector node.
+      def visit_complex_selector(node)
+        q.group do
+          node.child_nodes.each_with_index do |child_node, j|
+            q.text(" ") unless j == 0
+            child_node.format(q)
+          end
+        end
+      end
+
+      # Visit a Selectors::CompoundSelector node.
+      def visit_compound_selector(node)
+        q.group do
+          node.type.format(q) if node.type
+          node.subclasses.each do |subclass|
+            subclass.format(q)
+          end
+          # TODO: pseudo-elements
+        end
+      end
+
+      def visit_wqname(node)
+        node.prefix.format(q) if node.prefix
+        node.name.format(q)
+      end
     end
   end
 end

lib/syntax_tree/css/pretty_print.rb

@@ -421,6 +421,62 @@ def visit_wqname(node)
         end
       end
 
+      # Visit a Selectors::Combinator node.
+      def visit_combinator(node)
+        token("combinator") do
+          q.breakable
+          q.pp(node.value)
+        end
+      end
+
+      # Visit a Selectors::ComplexSelector node.
+      def visit_complex_selector(node)
+        token("complex-selector") do
+          node.child_nodes.each do |child|
+            q.breakable
+            q.pp(child)
+          end
+        end
+      end
+
+      # Visit a Selectors::CompoundSelector node.
+      def visit_compound_selector(node)
+        token("compound-selector") do
+          q.breakable
+          q.pp(node.type)
+
+          q.breakable
+          q.text("(subclasses")
+
+          if node.subclasses.any?
+            q.nest(2) do
+              q.breakable
+              q.seplist(node.subclasses) { |subclass| q.pp(subclass) }
+            end
+
+            q.breakable("")
+          end
+
+          q.text(")")
+
+          q.breakable("")
+          q.text("(pseudo-elements")
+
+          if node.pseudo_elements.any?
+            q.nest(2) do
+              q.breakable
+              q.seplist(node.pseudo_elements) do |pseudo_element|
+                q.pp(pseudo_element)
+              end
+            end
+
+            q.breakable("")
+          end
+
+          q.text(")")
+        end
+      end
+
       private
 
       def token(name)

lib/syntax_tree/css/selectors.rb

@@ -71,9 +71,73 @@ def deconstruct_keys(keys)
         end
       end
 
-      Combinator = Struct.new(:value, keyword_init: true)
-      ComplexSelector = Struct.new(:left, :combinator, :right, keyword_init: true)
-      CompoundSelector = Struct.new(:type, :subclasses, :pseudo_elements, keyword_init: true)
+      class Combinator < Node
+        attr_reader :value
+
+        def initialize(value:)
+          @value = value
+        end
+
+        def accept(visitor)
+          visitor.visit_combinator(self)
+        end
+
+        def child_nodes
+          [value]
+        end
+
+        alias deconstruct child_nodes
+
+        def deconstruct_keys(keys)
+          { value: value }
+        end
+      end
+
+      class ComplexSelector < Node
+        attr_reader :child_nodes
+
+        def initialize(child_nodes:)
+          @child_nodes = child_nodes
+        end
+
+        def accept(visitor)
+          visitor.visit_complex_selector(self)
+        end
+
+        alias deconstruct child_nodes
+
+        def deconstruct_keys(keys)
+          { child_nodes: child_nodes }
+        end
+      end
+
+      class CompoundSelector < Node
+        attr_reader :type, :subclasses, :pseudo_elements
+
+        def initialize(type:, subclasses:, pseudo_elements:)
+          @type = type
+          @subclasses = subclasses
+          @pseudo_elements = pseudo_elements
+        end
+
+        def accept(visitor)
+          visitor.visit_compound_selector(self)
+        end
+
+        def child_nodes
+          [type, subclasses, pseudo_elements].flatten
+        end
+
+        alias deconstruct child_nodes
+
+        def deconstruct_keys(keys)
+          {
+            type: type,
+            subclasses: subclasses,
+            pseudo_elements: pseudo_elements
+          }
+        end
+      end
 
       # The ID of an element, e.g., #foo
       # https://www.w3.org/TR/selectors-4/#typedef-id-selector
@@ -267,27 +331,30 @@ def relative_selector_list
 
       # <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
       def complex_selector
-        left = compound_selector
+        child_nodes = [compound_selector]
 
         loop do
-          if (combinator = maybe { combinator })
-            ComplexSelector.new(left: left, combinator: combinator, right: compound_selector)
-          elsif (right = maybe { compound_selector })
-            ComplexSelector.new(left: left, combinator: nil, right: right)
+          if (c = maybe { combinator })
+            child_nodes << c
+          end
+          if (s = maybe { compound_selector })
+            child_nodes << s
           else
             break
           end
         end
 
-        left
+        if child_nodes.length > 1
+          ComplexSelector.new(child_nodes: child_nodes)
+        else
+          child_nodes.first
+        end
       end
 
       # <relative-selector> = <combinator>? <complex-selector>
       def relative_selector
-        combinator = maybe { combinator }
-
-        if combinator
-          RelativeSelector.new(combinator: combinator, complex_selector: complex_selector)
+        if (c = maybe { combinator })
+          RelativeSelector.new(combinator: c, complex_selector: complex_selector)
         else
           complex_selector
         end
@@ -296,6 +363,8 @@ def relative_selector
       # <compound-selector> = [ <type-selector>? <subclass-selector>*
       #   [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
       def compound_selector
+        consume_whitespace
+
         type = maybe { type_selector }
         subclasses = []
 
@@ -332,6 +401,8 @@ def simple_selector
 
       # <combinator> = '>' | '+' | '~' | [ '|' '|' ]
       def combinator
+        consume_whitespace
+
         value =
           options do
             maybe { consume(">") } ||

lib/syntax_tree/css/visitor.rb

@@ -132,6 +132,15 @@ def visit_child_nodes(node)
       # Visit a Selectors::ClassSelector node.
       alias visit_class_selector visit_child_nodes
 
+      # Visit a Selectors::Combinator node.
+      alias visit_combinator visit_child_nodes
+
+      # Visit a Selectors::ComplexSelector node.
+      alias visit_complex_selector visit_child_nodes
+
+      # Visit a Selectors::CompoundSelector node.
+      alias visit_compound_selector visit_child_nodes
+
       # Visit a Selectors::IdSelector node.
       alias visit_id_selector visit_child_nodes