chunky_css 0.0.4 → 0.0.5

data/.semver

@@ -1,5 +1,5 @@
 ---
 :major: 0
 :minor: 0
-:patch: 4
+:patch: 5
 :special: ''

data/Rakefile

@@ -2,6 +2,9 @@
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
 
+require 'rake/clean'
+CLOBBER.include('pkg')
+
 RSpec::Core::RakeTask.new do |t|
   t.ruby_opts = "-w"
 end

data/lib/chunky_css.rb

@@ -40,8 +40,8 @@ module ChunkyCSS
           end 
         end
 
-        buckets[current_bucket] ||= ""
-        buckets[current_bucket] += char
+        buckets[current_bucket] ||= MediaQuery.new(current_bucket)
+        buckets[current_bucket].css_rules += char
       end
 
       return buckets
@@ -60,15 +60,73 @@ module ChunkyCSS
     end
 
     def css_for_media(media)
-      @buckets[media]
+      (@buckets.has_key? media) ? @buckets[media].css_rules : nil
     end
   end
 
   class Grouper < Splitter
     def grouped_css
-      [@buckets["all"]].concat(@buckets.keys.reject{|key| key=="all"}.map {|key|
-        "@media %s{%s}"%[key, @buckets[key]]
-      }).join("\n")
+      @buckets.values.sort.map{|mq| mq.to_css }.join("\n")
+    end
+  end
+
+
+  module RegEx
+    TYPE = /(all|screen|print)/
+    FEATURE_WITH_LENGTH = /\((((min|max)-)?width\s*:\s*\d+\s*px)\)/
+  end
+
+  class MediaQuery
+    include Comparable 
+
+    attr_reader :type
+    attr_reader :features
+    attr_accessor :css_rules
+
+    def initialize(querystr)
+      @features = {}
+      @type = "all"
+      @css_rules = ""
+
+      scanner = StringScanner.new(querystr)
+
+      while !scanner.eos? do
+        if scanner.scan RegEx::TYPE
+          @type = scanner[1]
+        elsif scanner.scan RegEx::FEATURE_WITH_LENGTH
+          (key, value) = scanner[1].split(/\s*:\s*/)
+          @features[key] = value.gsub(/\s/, '')
+        else
+          scanner.getch
+        end
+      end
+    end
+
+    def <=>(other)
+      d = @features["max-width"].to_i <=> other.features["max-width"].to_i
+
+      if (d == 0)
+        my_min_width, other_min_width = [@features, other.features].map{|f| f["min-width"].to_i}
+
+        d = other_min_width <=> my_min_width
+        d *= -1  if [my_min_width, other_min_width].include?(0)
+      end
+
+      d
+    end
+
+    def media_description
+      [ @type ].concat( @features.keys.map {|key|
+        "(%s:%s)"%[key, @features[key]]
+      } ).join(" and ")
+    end
+
+    def to_css
+      if @type == "all" && @features.empty?
+        @css_rules
+      else
+        "@media %s{%s}"%[media_description, @css_rules]
+      end
     end
   end
 end

data/spec/chunky_css_spec.rb

@@ -52,7 +52,153 @@ describe ChunkyCSS::Grouper do
     end
 
     it "has a 'screen and max-width' entry" do
-      css.should include("@media screen and (max-width: 100px){")
+      css.should include("@media screen and (max-width:100px){")
     end
   end
 end
+
+describe ChunkyCSS::MediaQuery do
+  example "all" do
+    mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
+
+    mq.type.should eq("all")
+    mq.features.should be_an_instance_of(Hash)
+    mq.features.should be_empty
+  end
+
+  example "screen and (max-width: 300px)" do
+    mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
+
+    mq.type.should eq("screen")
+    mq.features.keys.length.should eq(1)
+    mq.features.keys.should include("max-width")
+    mq.features["max-width"].should eq("300px")
+  end
+
+  example "print and (max-width: 400px) and (min-width: 200px)" do
+    mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
+
+    mq.type.should eq("print")
+    mq.features.keys.length.should eq(2)
+    mq.features["min-width"].should eq("200px")
+    mq.features["max-width"].should eq("400px")
+  end
+
+  example "screen and (width: 100px) and (min-width: 5px) and (max-width: 123456px)" do
+    mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
+
+    mq.type.should eq("screen")
+    mq.features.keys.length.should eq(3)
+    mq.features["width"].should eq("100px")
+    mq.features["min-width"].should eq("5px")
+    mq.features["max-width"].should eq("123456px")
+  end
+
+  example "    screen and (width:100px)    and  (min-width:   5px)and(max-width : 123456 px)   " do
+    mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
+
+    mq.type.should eq("screen")
+    mq.features.keys.length.should eq(3)
+    mq.features["width"].should eq("100px")
+    mq.features["min-width"].should eq("5px")
+    mq.features["max-width"].should eq("123456px")
+  end
+end
+
+describe ChunkyCSS::MediaQuery, "#<=>" do
+  example "both screen and different max-width" do
+    mq1 = ChunkyCSS::MediaQuery.new "screen and (max-width: 200px)"
+    mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width: 300px)"
+
+    (mq1 <=> mq2).should eq(-1)
+    (mq2 <=> mq1).should eq(1)
+
+    mq1.should be < mq2
+    mq2.should be > mq1
+  end
+
+  example "both screen and only one with max-width" do
+    mq1 = ChunkyCSS::MediaQuery.new "screen"
+    mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width: 300px)"
+
+    (mq1 <=> mq2).should eq(-1)
+    (mq2 <=> mq1).should eq(1)
+
+    mq1.should be < mq2
+    mq2.should be > mq1
+  end
+
+  example "both screen and different min-width" do
+    mq1 = ChunkyCSS::MediaQuery.new "screen and (min-width: 300px)"
+    mq2 = ChunkyCSS::MediaQuery.new "screen and (min-width: 200px)"
+
+    (mq1 <=> mq2).should eq(-1)
+    (mq2 <=> mq1).should eq(1)
+
+    mq1.should be < mq2
+    mq2.should be > mq1
+  end
+
+  example "both screen and only one with min-width" do
+    mq1 = ChunkyCSS::MediaQuery.new "screen"
+    mq2 = ChunkyCSS::MediaQuery.new "screen and (min-width: 300px)"
+
+    (mq1 <=> mq2).should eq(-1)
+    (mq2 <=> mq1).should eq(1)
+
+    mq1.should be < mq2
+    mq2.should be > mq1
+  end
+
+  example "both screen, both same max-width and different min-width" do
+    mq1 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px) and (min-width: 300px)"
+    mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px) and (min-width: 200px)"
+
+    (mq1 <=> mq2).should eq(-1)
+    (mq2 <=> mq1).should eq(1)
+
+    mq1.should be < mq2
+    mq2.should be > mq1
+  end
+
+  example "both screen, both same max-width and only one with min-width" do
+    mq1 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px)"
+    mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px) and (min-width: 300px)"
+
+    (mq1 <=> mq2).should eq(-1)
+    (mq2 <=> mq1).should eq(1)
+
+    mq1.should be < mq2
+    mq2.should be > mq1
+  end
+end
+
+describe ChunkyCSS::MediaQuery, "media_description" do
+  ["all", "screen", "screen and (max-width:400px)", "screen and (max-width:300px) and (min-width:200px)"].each do |query|
+    example query do
+      mq = ChunkyCSS::MediaQuery.new( example.metadata[:description] )
+      mq.media_description.should eq( example.metadata[:description] )
+    end
+  end
+end
+
+describe ChunkyCSS::MediaQuery, "#to_css" do
+  example "media all with some rules" do
+    mq = ChunkyCSS::MediaQuery.new "all"
+    mq.css_rules = "body{color:red;}"
+
+    mq.to_css.should eq("body{color:red;}")
+  end
+
+  example "media screen with some rules" do
+    mq = ChunkyCSS::MediaQuery.new "screen"
+    mq.css_rules = "body{color:red;}"
+    mq.to_css.should eq("@media screen{body{color:red;}}")
+  end
+
+  example "media screen and max-width with some rules" do
+    mq = ChunkyCSS::MediaQuery.new "screen and (max-width:400px)"
+    mq.css_rules = "body{color:red;}"
+    mq.to_css.should eq("@media screen and (max-width:400px){body{color:red;}}")
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chunky_css
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-22 00:00:00.000000000 Z
+date: 2012-06-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rspec