silk_layout 0.1.0 → 0.2.0

data/lib/silk_layout/css/computed_style.rb

@@ -7,7 +7,7 @@ module SilkLayout
         @values = {}
         @explicit_properties = {}
 
-        apply_rules(rules)
+        apply_rules(rules, parent_style)
 
         apply_inheritance(parent_style)
         apply_defaults
@@ -39,29 +39,31 @@ module SilkLayout
 
       INLINE_SPECIFICITY = [1000, 0, 0].freeze
 
-      def apply_rules(rules)
+      def apply_rules(rules, parent_style)
         winners = {}
 
         rules.each do |rule|
           spec = rule.specificity || INLINE_SPECIFICITY
           order = rule.order || 0
 
-          rule.declarations.each do |property, decl|
+          each_declaration(rule.declarations).each_with_index do |(property, decl), declaration_index|
             value = decl.is_a?(Declaration) ? decl.value : decl
             important = decl.is_a?(Declaration) ? decl.important : false
 
-            key = [important ? 1 : 0, spec, order]
-            current = winners[property]
+            Properties.expand_declaration(property, value).each_with_index do |(expanded_property, expanded_value), expansion_index|
+              key = [important ? 1 : 0, spec, order, declaration_index, expansion_index]
+              current = winners[expanded_property]
 
-            if current.nil? || (key <=> current[:key]) == 1
-              winners[property] = {key: key, value: value}
-              @explicit_properties[property] = true
+              if current.nil? || (key <=> current[:key]) == 1
+                winners[expanded_property] = {key: key, value: expanded_value}
+                @explicit_properties[expanded_property] = true
+              end
             end
           end
         end
 
         winners.each do |prop, data|
-          @values[prop] = data[:value]
+          @values[prop] = resolve_css_wide(prop, data[:value], parent_style)
         end
       end
 
@@ -69,15 +71,45 @@ module SilkLayout
         return unless parent
 
         Properties::INHERITED.each do |prop|
-          @values[prop] ||= parent[prop]
+          @values[prop] = parent[prop] unless @values.key?(prop)
         end
       end
 
       def apply_defaults
         Properties::DEFAULTS.each do |prop, value|
-          @values[prop] ||= value
+          @values[prop] = value unless @values.key?(prop)
         end
       end
+
+      def each_declaration(declarations)
+        return enum_for(:each_declaration, declarations) unless block_given?
+
+        declarations.each do |property, declaration|
+          yield property, declaration
+        end
+      end
+
+      def resolve_css_wide(property, value, parent)
+        return value unless Properties.css_wide_keyword?(value)
+        return value unless Properties.known?(property)
+
+        case value.to_s.strip.downcase
+        when "inherit"
+          inherited_value(property, parent)
+        when "initial"
+          Properties.initial_value(property)
+        when "unset"
+          if Properties.inherited?(property)
+            inherited_value(property, parent)
+          else
+            Properties.initial_value(property)
+          end
+        end
+      end
+
+      def inherited_value(property, parent)
+        parent&.[](property) || Properties.initial_value(property)
+      end
     end
   end
 end

data/lib/silk_layout/css/page_rule.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module SilkLayout
+  module CSS
+    class PageRule
+      CSS_PX_PER_IN = 96.0
+      MM_PER_IN = 25.4
+      A4 = [(210.0 / MM_PER_IN) * CSS_PX_PER_IN, (297.0 / MM_PER_IN) * CSS_PX_PER_IN].freeze
+      NAMED_SIZES = {
+        "a4" => A4
+      }.freeze
+      ORIENTATIONS = %w[
+        landscape
+        portrait
+      ].freeze
+
+      attr_reader :selector, :declarations, :order
+
+      def self.resolve_page_size(page_rules)
+        page_rules
+          .select { |rule| rule.selector.to_s.empty? }
+          .sort_by(&:order)
+          .filter_map(&:size)
+          .last
+      end
+
+      def self.parse_size(value)
+        tokens = value.to_s.strip.split(/\s+/)
+        return nil if tokens.empty?
+
+        orientation = tokens.find { |token| ORIENTATIONS.include?(token.downcase) }&.downcase
+        size_tokens = tokens.reject { |token| ORIENTATIONS.include?(token.downcase) }
+        dimensions = named_dimensions(size_tokens) || length_dimensions(size_tokens)
+        return nil unless dimensions
+
+        orient(dimensions, orientation)
+      end
+
+      def self.named_dimensions(tokens)
+        return nil unless tokens.length == 1
+
+        named = NAMED_SIZES[tokens[0].downcase]
+        named&.dup
+      end
+
+      def self.length_dimensions(tokens)
+        return nil unless tokens.length.between?(1, 2)
+
+        lengths = tokens.map { |token| length_to_px(token) }
+        return nil if lengths.any?(&:nil?)
+
+        [lengths[0], lengths[1] || lengths[0]]
+      end
+
+      def self.length_to_px(token)
+        match = token.to_s.match(/\A([-+]?\d*\.?\d+)(px|in)\z/i)
+        return nil unless match
+
+        value = match[1].to_f
+        return nil unless value.positive?
+
+        (match[2].downcase == "in") ? value * CSS_PX_PER_IN : value
+      end
+
+      def self.orient(dimensions, orientation)
+        case orientation
+        when "landscape"
+          (dimensions[0] > dimensions[1]) ? dimensions : dimensions.reverse
+        when "portrait"
+          (dimensions[0] < dimensions[1]) ? dimensions : dimensions.reverse
+        else
+          dimensions
+        end
+      end
+
+      def initialize(selector:, declarations:, order:)
+        @selector = selector
+        @declarations = declarations
+        @order = order
+      end
+
+      def size
+        declaration = last_declaration_named("size")
+        return nil unless declaration
+
+        self.class.parse_size(declaration[1].value)
+      end
+
+      private
+
+      def last_declaration_named(name)
+        index = declarations.length - 1
+        while index >= 0
+          declaration = declarations[index]
+          return declaration if declaration[0] == name
+
+          index -= 1
+        end
+
+        nil
+      end
+    end
+  end
+end

data/lib/silk_layout/css/parser.rb

@@ -5,45 +5,140 @@ require "crass"
 module SilkLayout
   module CSS
     class Parser
-      def self.parse_all(stylesheets)
-        rules = []
-        order = 0
+      attr_reader :rules, :page_rules
+
+      def self.parse_all(stylesheets, media: :print)
+        parse_stylesheets(stylesheets, media: media).rules
+      end
+
+      def self.parse_page_rules(stylesheets, media: :print)
+        parse_stylesheets(stylesheets, media: media).page_rules
+      end
+
+      def self.parse_stylesheets(stylesheets, media: :print)
+        parser = new(media: media)
 
         stylesheets.each do |css|
-          Crass.parse(css).each do |node|
-            next unless node[:node] == :style_rule
+          parser.parse_nodes(Crass.parse(css))
+        end
 
-            selector_text = node[:selector][:value].strip
-            selectors = selector_text.split(",").map(&:strip)
+        parser
+      end
 
-            declarations = {}
+      def initialize(media:)
+        @media = media.to_s.downcase
+        @rules = []
+        @page_rules = []
+        @order = 0
+        @page_order = 0
+      end
 
-            node[:children].each do |child|
-              next unless child[:node] == :property
+      def parse_nodes(nodes)
+        nodes.each do |node|
+          case node[:node]
+          when :style_rule
+            append_style_rules(node)
+          when :at_rule
+            append_at_rule(node)
+          end
+        end
+      end
 
-              property = child[:name]
-              value = child[:value]
+      private
 
-              declarations[property] = Declaration.new(value: value, important: child[:important] ? true : false)
-            end
+      def append_at_rule(node)
+        case node[:name].to_s.downcase
+        when "media"
+          parse_nodes(Crass.parse(tokens_to_css(node[:block]))) if media_matches?(node[:prelude])
+        when "page"
+          append_page_rule(node) if print_media?
+        end
+      end
 
-            selectors.each do |raw_selector|
-              selector = Selector.new(raw_selector)
+      def append_style_rules(node)
+        selector_text = node[:selector][:value].to_s.strip
+        selectors = selector_text.split(",").map(&:strip).reject(&:empty?)
+        declarations = declarations_from_children(node[:children])
 
-              rules << Rule.new(
-                selector: selector,
-                declarations: declarations,
-                specificity: selector.specificity,
-                order: order,
-                origin: :author
-              )
+        selectors.each do |raw_selector|
+          selector = Selector.new(raw_selector)
 
-              order += 1
-            end
-          end
+          rules << Rule.new(
+            selector: selector,
+            declarations: declarations,
+            specificity: selector.specificity,
+            order: @order,
+            origin: :author
+          )
+
+          @order += 1
         end
+      end
+
+      def append_page_rule(node)
+        declarations = declarations_from_block(node[:block])
+        return if declarations.empty?
+
+        page_rules << PageRule.new(
+          selector: tokens_to_css(node[:prelude]).strip,
+          declarations: declarations,
+          order: @page_order
+        )
+
+        @page_order += 1
+      end
+
+      def declarations_from_children(children)
+        children.each_with_object([]) do |child, declarations|
+          next unless child[:node] == :property
+
+          declarations << declaration_for(child)
+        end
+      end
+
+      def declarations_from_block(block)
+        declarations_from_children(Crass.parse_properties(tokens_to_css(block)))
+      end
+
+      def declaration_for(node)
+        [
+          node[:name].to_s.downcase,
+          Declaration.new(value: node[:value].to_s.strip, important: node[:important] ? true : false)
+        ]
+      end
+
+      def media_matches?(prelude)
+        tokens_to_css(prelude).split(",").any? do |query|
+          media_query_matches?(query)
+        end
+      end
+
+      def media_query_matches?(query)
+        raw = query.to_s.strip.downcase
+        return false if raw.empty?
+
+        raw = raw.sub(/\Aonly\s+/, "")
+        negated = raw.start_with?("not ")
+        raw = raw.sub(/\Anot\s+/, "") if negated
+
+        media_type = raw[/\A[a-z][a-z0-9_-]*/]
+        matched = media_type.nil? || media_type == "all" || media_type == @media
+
+        negated ? !matched : matched
+      end
+
+      def print_media?
+        @media == "print" || @media == "all"
+      end
+
+      def tokens_to_css(tokens)
+        Array(tokens).map { |token| token_to_css(token) }.join
+      end
+
+      def token_to_css(token)
+        return token[:tokens].map { |child| token_to_css(child) }.join if token[:tokens]
 
-        rules
+        token[:raw].to_s
       end
     end
   end

data/lib/silk_layout/css/properties.rb

@@ -3,17 +3,315 @@
 module SilkLayout
   module CSS
     module Properties
+      EDGES = %w[
+        top
+        right
+        bottom
+        left
+      ].freeze
+
+      BORDER_PARTS = %w[
+        width
+        style
+        color
+      ].freeze
+
+      CSS_WIDE_KEYWORDS = %w[
+        inherit
+        initial
+        unset
+      ].freeze
+
       INHERITED = %w[
         color
         font-size
         font-family
+        font-weight
+        font-style
+        line-height
       ].freeze
 
-      DEFAULTS = {
+      SPACING_INITIALS = %w[
+        margin
+        padding
+      ].flat_map do |property|
+        EDGES.map { |side| ["#{property}-#{side}", "0"] }
+      end.to_h.freeze
+
+      BORDER_INITIALS = EDGES.flat_map do |side|
+        [
+          ["border-#{side}-width", "medium"],
+          ["border-#{side}-style", "none"],
+          ["border-#{side}-color", "black"]
+        ]
+      end.to_h.freeze
+
+      INITIAL_VALUES = {
         "color" => "black",
         "font-size" => "16px",
-        "display" => "inline"
-      }.freeze
+        "font-family" => "Helvetica",
+        "font-weight" => "normal",
+        "font-style" => "normal",
+        "line-height" => "normal",
+        "display" => "inline",
+        "width" => "auto",
+        "height" => "auto",
+        "box-sizing" => "content-box",
+        "min-width" => "0",
+        "max-width" => "none",
+        "background-color" => "transparent",
+        "flex-direction" => "row",
+        "flex-wrap" => "nowrap",
+        "justify-content" => "flex-start",
+        "align-items" => "stretch",
+        "flex-grow" => "0",
+        "flex-shrink" => "1",
+        "flex-basis" => "auto",
+        "row-gap" => "0",
+        "column-gap" => "0"
+      }.merge(SPACING_INITIALS).merge(BORDER_INITIALS).freeze
+
+      DEFAULTS = INITIAL_VALUES
+      KNOWN = INITIAL_VALUES.keys.freeze
+
+      def self.expand_declaration(property, value)
+        property = property.to_s.downcase
+        value = value.to_s.strip
+        expanded = [[property, value]]
+
+        expanded.concat(
+          if css_wide_keyword?(value)
+            css_wide_expansion(property, value)
+          else
+            shorthand_expansion(property, value)
+          end
+        )
+      end
+
+      def self.css_wide_keyword?(value)
+        CSS_WIDE_KEYWORDS.include?(value.to_s.strip.downcase)
+      end
+
+      def self.initial_value(property)
+        INITIAL_VALUES[property]
+      end
+
+      def self.known?(property)
+        KNOWN.include?(property)
+      end
+
+      def self.inherited?(property)
+        INHERITED.include?(property)
+      end
+
+      def self.css_wide_expansion(property, value)
+        case property
+        when "margin", "padding"
+          EDGES.map { |side| ["#{property}-#{side}", value] }
+        when "border"
+          all_border_longhands(value)
+        when "border-width", "border-style", "border-color"
+          border_edge_longhands(property.delete_prefix("border-"), value)
+        when /\Aborder-(top|right|bottom|left)\z/
+          border_side_longhands(Regexp.last_match(1), value)
+        when "background"
+          [["background-color", value]]
+        when "flex"
+          flex_longhands(value, value, value)
+        when "flex-flow"
+          flex_flow_longhands(value, value)
+        when "gap"
+          gap_longhands(value, value)
+        else
+          []
+        end
+      end
+
+      def self.shorthand_expansion(property, value)
+        case property
+        when "margin", "padding"
+          edge_values(value).map { |side, side_value| ["#{property}-#{side}", side_value] }
+        when "border"
+          parsed = border_shorthand(value)
+          all_border_longhands do |side, part|
+            parsed[part] || INITIAL_VALUES.fetch("border-#{side}-#{part}")
+          end
+        when "border-width", "border-style", "border-color"
+          part = property.delete_prefix("border-")
+          edge_values(value).map { |side, side_value| ["border-#{side}-#{part}", side_value] }
+        when /\Aborder-(top|right|bottom|left)\z/
+          side = Regexp.last_match(1)
+          parsed = border_shorthand(value)
+          border_side_longhands(side) do |part|
+            parsed[part] || INITIAL_VALUES.fetch("border-#{side}-#{part}")
+          end
+        when "background"
+          [["background-color", background_color(value)]]
+        when "flex"
+          flex_shorthand(value).map { |part, part_value| ["flex-#{part}", part_value] }
+        when "flex-flow"
+          flex_flow(value).map { |part, part_value| ["flex-#{part}", part_value] }
+        when "gap"
+          gap_values(value)
+        else
+          []
+        end
+      end
+
+      def self.edge_values(value)
+        tokens = split_tokens(value)
+        values =
+          case tokens.length
+          when 0
+            []
+          when 1
+            [tokens[0], tokens[0], tokens[0], tokens[0]]
+          when 2
+            [tokens[0], tokens[1], tokens[0], tokens[1]]
+          when 3
+            [tokens[0], tokens[1], tokens[2], tokens[1]]
+          else
+            [tokens[0], tokens[1], tokens[2], tokens[3]]
+          end
+
+        EDGES.zip(values).to_h
+      end
+
+      def self.all_border_longhands(value = nil)
+        EDGES.flat_map do |side|
+          BORDER_PARTS.map do |part|
+            ["border-#{side}-#{part}", block_given? ? yield(side, part) : value]
+          end
+        end
+      end
+
+      def self.border_edge_longhands(part, value)
+        EDGES.map { |side| ["border-#{side}-#{part}", value] }
+      end
+
+      def self.border_side_longhands(side, value = nil)
+        BORDER_PARTS.map do |part|
+          ["border-#{side}-#{part}", block_given? ? yield(part) : value]
+        end
+      end
+
+      def self.border_shorthand(value)
+        split_tokens(value).each_with_object({}) do |token, parsed|
+          if border_width?(token)
+            parsed["width"] ||= token
+          elsif border_style?(token)
+            parsed["style"] ||= token
+          else
+            parsed["color"] ||= token
+          end
+        end
+      end
+
+      def self.background_color(value)
+        split_tokens(value).find { |token| color_token?(token) } || INITIAL_VALUES.fetch("background-color")
+      end
+
+      def self.flex_shorthand(value)
+        tokens = split_tokens(value)
+
+        case tokens.join(" ")
+        when "none"
+          {"grow" => "0", "shrink" => "0", "basis" => "auto"}
+        when "auto"
+          {"grow" => "1", "shrink" => "1", "basis" => "auto"}
+        else
+          numbers = tokens.select { |token| numeric?(token) }
+          basis = tokens.find { |token| !numeric?(token) }
+
+          {
+            "grow" => numbers[0] || "1",
+            "shrink" => numbers[1] || "1",
+            "basis" => basis || (numbers.any? ? "0px" : "auto")
+          }
+        end
+      end
+
+      def self.flex_longhands(grow, shrink, basis)
+        [
+          ["flex-grow", grow],
+          ["flex-shrink", shrink],
+          ["flex-basis", basis]
+        ]
+      end
+
+      def self.flex_flow(value)
+        parsed = split_tokens(value).each_with_object({}) do |token, acc|
+          if %w[row row-reverse column column-reverse].include?(token)
+            acc["direction"] = token
+          elsif %w[nowrap wrap wrap-reverse].include?(token)
+            acc["wrap"] = token
+          end
+        end
+
+        {
+          "direction" => parsed["direction"] || INITIAL_VALUES.fetch("flex-direction"),
+          "wrap" => parsed["wrap"] || INITIAL_VALUES.fetch("flex-wrap")
+        }
+      end
+
+      def self.flex_flow_longhands(direction, wrap)
+        [
+          ["flex-direction", direction],
+          ["flex-wrap", wrap]
+        ]
+      end
+
+      def self.gap_values(value)
+        values = split_tokens(value)
+        row = values[0] || INITIAL_VALUES.fetch("row-gap")
+        column = values[1] || row
+
+        gap_longhands(row, column)
+      end
+
+      def self.gap_longhands(row, column)
+        [
+          ["row-gap", row],
+          ["column-gap", column]
+        ]
+      end
+
+      def self.split_tokens(value)
+        Values.split_tokens(value)
+      end
+
+      def self.numeric?(value)
+        value.to_s.match?(/\A[-+]?\d*\.?\d+\z/)
+      end
+
+      def self.border_width?(value)
+        value.to_s.match?(/\A[-+]?\d*\.?\d+(?:px)?\z/) || %w[thin medium thick].include?(value.to_s)
+      end
+
+      def self.border_style?(value)
+        %w[
+          none
+          hidden
+          dotted
+          dashed
+          solid
+          double
+          groove
+          ridge
+          inset
+          outset
+        ].include?(value.to_s)
+      end
+
+      def self.color_token?(value)
+        raw = value.to_s.strip
+        return false if raw.empty?
+        return true if raw.start_with?("#")
+        return true if SilkLayout::CSS::Color.parse(raw)
+        return false if %w[none transparent inherit initial unset].include?(raw)
+
+        !border_width?(raw) && !border_style?(raw) && !raw.include?("(") && !raw.include?("/")
+      end
     end
   end
 end