automatthew-casuistry 0.2.0 → 0.2.1

data/Manifest

@@ -6,7 +6,8 @@ Manifest
 README.rdoc
 test/basics.rb
 test/dan.css
-test/experiment.cssy
+test/dan.cssy
+test/fiddle.css
 test/fiddle.cssy
 test/helper.rb
 test/nesting.cssy

data/README.rdoc

@@ -1,21 +1,45 @@
-A CSS companion to Markaby.  Would be nice if you could interpolate variables.
-
-  css = Casuistry.new
-  css.instance_eval do
-    my_favorite_color = :green
-    ul do
-      background('red')
-      li.ugly do
-        color(my_favorite_color)
+= Casuistry, a.k.a Cssy
+
+Cssy is a CSS companion to Markaby.  You declare selectors using methods named after the type selectors (i.e. tags) or after the class and id selectors of your choice, which are handled by method_missing.  As in Markaby, id selectors are distinguished from class selectors by the "!" at the end of the method name.  You can chain class/id selectors onto type selectors and each other.
+
+Because in CSS you don't have to begin with a type selector, starting a selector chain with a class/id selector is currently allowed in Casuistry.  This may go away in the future.
+
+== Usage
+
+
+  css = Cssy.new
+  css.process do
+    div do
+
+      # this is a property on div
+      background :red
+
+      selector('ul li') do
+        color('green')
+      end
+
+      p.ugly.truly do
+        color('aqua')
       end
-      smurf.house do
+
+      selector('.smurf').house do
         height('256px')
       end
-      asrael! do
+
+      menu! do
         padding("10px")
       end
+
+      # this is a property on div, again
+      width('9934px')
+
+    end
+
+    gargamel do
+      margin("0px")
     end
-    outer.middle.inner do
+
+    selector('.outer.middle.inner') do
       top("34px")
     end
   end

data/casuistry.gemspec

@@ -1,10 +1,10 @@
 
-# Gem::Specification for Casuistry-0.2.0
+# Gem::Specification for Casuistry-0.2.1
 # Originally generated by Echoe
 
 Gem::Specification.new do |s|
   s.name = %q{casuistry}
-  s.version = "0.2.0"
+  s.version = "0.2.1"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Matthew King"]
@@ -12,7 +12,7 @@ Gem::Specification.new do |s|
   s.description = %q{Generates CSS using Ruby, like Markaby}
   s.email = %q{automatthew@gmail.com}
   s.extra_rdoc_files = ["lib/casuistry.rb", "lib/properties.rb", "lib/tags.rb", "README.rdoc"]
-  s.files = ["casuistry.gemspec", "lib/casuistry.rb", "lib/properties.rb", "lib/tags.rb", "Manifest", "README.rdoc", "test/basics.rb", "test/dan.css", "test/experiment.cssy", "test/fiddle.cssy", "test/helper.rb", "test/nesting.cssy", "test/test.css", "test/test.cssy"]
+  s.files = ["casuistry.gemspec", "lib/casuistry.rb", "lib/properties.rb", "lib/tags.rb", "Manifest", "README.rdoc", "test/basics.rb", "test/dan.css", "test/dan.cssy", "test/fiddle.css", "test/fiddle.cssy", "test/helper.rb", "test/nesting.cssy", "test/test.css", "test/test.cssy"]
   s.has_rdoc = true
   s.homepage = %q{}
   s.rdoc_options = ["--line-numbers", "--inline-source", "--title", "Casuistry", "--main", "README.rdoc"]
@@ -40,7 +40,7 @@ end
 #   require dep
 # end
 # 
-# Version = '0.2.0'
+# Version = '0.2.1'
 # 
 # task :default => [:test]
 # 

data/lib/casuistry.rb

@@ -3,165 +3,154 @@ require 'tags'
 
 # Markaby-ish way to declare CSS
 class Casuistry
-  
-  include Tags
-  
-  attr_reader :data, :assigns
+    
+  attr_reader :data
   
   def self.process(*args,&block)
     self.new.process(*args,&block)
   end
       
-  def initialize(selector=nil)
-    @selector = selector
+  def initialize(sel=nil)
     @data = []
+    @selectors = [ sel]
+    @properties = []
     
+    # possible states are :closed_block, :chain, :open_block
+    @state = :closed_block
   end
   
   def process(*args, &block)
     if block
-      Selector.new(@selector, self).instance_eval(&block)
+      instance_eval(&block)
     else
-      Selector.new(@selector, self).instance_eval(args.join("\n"))
+      instance_eval(args.join("\n"))
     end
     @data
   end
   
   def output
     output = ""
-    @data.each do |selector|
-      output << selector.first
-      properties = selector.last.map { |s| "  #{s}" }.join("\n")
+    @data.each do |sel|
+      output << sel.first
+      properties = sel.last.map { |s| "  #{s}" }.join("\n")
       output << "\n{\n#{properties}\n}\n"
     end
     output
   end
   
-end
+    # state transitions
+    def open_block(new_selector)
+      case @state
+      when :closed_block, :open_block
+        combined_selector = [current_selector, new_selector].compact.join(" ")
+        @selectors.push combined_selector
+        new_property_set
+      when :chain
+        @selectors[-1] = "#{current_selector}#{new_selector}"
+        new_property_set
+      else
+        raise "You can't get to :open_block from #{@state.inspect}"
+      end
+      
+      @state = :open_block
+    end
 
-class Selector
-  
-  def initialize(base_selector, casuist)
-    @selectors = [ base_selector ]
-    @properties = []
-    @casuist = casuist
-    # possible states are :closed_block, :chaining, :open_block
-    @state = :closed_block
-  end
-  
-  
-  # transitions
-  def open_block(new_selector)
-    case @state
-    when :closed_block, :open_block
-      combined_selector = [current_selector, new_selector].compact.join(" ")
-      @selectors.push combined_selector
-      open_properties
-    when :chaining
-      # puts current_selector, new_selector
-      @selectors[-1] = "#{current_selector}#{new_selector}"
-      open_properties
-    else
-      raise "You can't get to :open_block from #{@state.inspect}"
+    def chain(new_selector)
+      case @state
+      when :closed_block, :open_block
+        combined_selector = [current_selector, new_selector].compact.join(" ")
+        @selectors.push( combined_selector)
+      when :chain
+        @selectors[-1] = "#{current_selector}#{new_selector}"
+      else
+        raise "You can't get to :chain from #{@state.inspect}"
+      end
+      
+      @state = :chain
     end
-    @state = :open_block
-  end
-  
-  def chaining(new_selector)
-    case @state
-    when :closed_block, :open_block
-      combined_selector = [current_selector, new_selector].compact.join(" ")
-      @selectors.push( combined_selector)
-    when :chaining
-      @selectors[-1] = "#{current_selector}#{new_selector}"
-    else
-      raise "You can't get to :chaining from #{@state.inspect}"
+
+    def closed_block
+      case @state
+      when :open_block, :closed_block
+        @selectors.pop
+        @properties.pop
+      else
+        raise "You can't get to :closed_block from #{@state.inspect}"
+      end
+      
+      @state = :closed_block
     end
-    @state = :chaining
-  end
-  
-  def closed_block
-    case @state
-    when :open_block, :closed_block
-      @selectors.pop
-      @properties.pop
-    else
-      raise "You can't get to :closed_block from #{@state.inspect}"
+
+
+  # normal methods
+
+    def selector(sel)
+      if block_given?
+        open_block(sel)
+        yield
+        closed_block
+      else
+        chain(sel)
+      end
+      self
     end
-    @state = :closed_block
-  end
-  
-  
-# methods
-  
-  def selector_eval(sel)
-    if block_given?
-      open_block(sel)
-      yield
-      closed_block
-    else
-      chaining(sel)
+
+    def method_missing(name, &block)
+      sel = selectify(name)
+      if block_given?
+        open_block(sel)
+        yield
+        closed_block
+      else
+        chain(sel)
+      end
+      self
     end
-    self
-  end
-  
-  def method_missing(name, &block)
-    sel = selectify(name)
-    if block_given?
-      open_block(sel)
-      yield
-      closed_block
-    else
-      chaining(sel)
+
+    def current_selector
+        @selectors[-1]
     end
-    self
-  end
 
-  def current_selector
-      @selectors[-1]
-  end
-  
-  def current_properties
-    @properties[-1]
-  end
-  
-  def open_properties
-    @properties.push []
-    @casuist.data << [current_selector, current_properties ]
-  end
+    def current_properties
+      @properties[-1]
+    end
 
-  # define tag methods to delegate to selector_eval
-  methods =  Tags::HTML_TAGS.map do |tag|
-    <<-METHOD
-    def #{tag}(&block)
-      selector_eval('#{tag}', &block)
+    def new_property_set
+      @properties.push []
+      @data << [current_selector, current_properties ]
     end
-    METHOD
-  end.join
 
-  module_eval methods
-  
-  CSS_PROPERTIES.each do |method_name|
-    define_method method_name do |*args|
-      css_attr = method_name.gsub('_', '-')
-      property(css_attr, args)
+    # define tag methods to delegate to selector
+    methods =  HTML_TAGS.map do |tag|
+      <<-METHOD
+      def #{tag}(&block)
+        selector('#{tag}', &block)
+      end
+      METHOD
+    end.join
+
+    module_eval methods
+
+    CSS_PROPERTIES.each do |method_name|
+      define_method method_name do |*args|
+        css_attr = method_name.gsub('_', '-')
+        property(css_attr, args)
+      end
     end
-  end
-  
 
-  
-  def property(css_attr, *args)
-    current_properties << "#{css_attr}: #{args.join(' ')};"
-  end
-  
 
-  
-  
-  def selectify(method_name)
-    matches = method_name.to_s.match( /([\w_]+)!$/)
-    matches ? "##{matches[1]}" : ".#{method_name}"
-  end
 
+    def property(css_attr, *args)
+      current_properties << "#{css_attr}: #{args.join(' ')};"
+    end
+
+
+
+
+    def selectify(method_name)
+      matches = method_name.to_s.match( /([\w_]+)!$/)
+      matches ? "##{matches[1]}" : ".#{method_name}"
+    end
   
 end
 

data/lib/properties.rb

@@ -1,112 +1,115 @@
-CSS_PROPERTIES = %w{ 
-azimuth
-background
-background_attachment
-background_color
-background_image
-background_position
-background_repeat
-border
-border_collapse
-border_color
-border_spacing
-border_style
-border_top
-border_top_color
-border_top_style
-border_top_width
-border_width
-bottom
-caption_side
-clear
-clip
-color
-content
-counter_increment
-counter_reset
-cue
-cue_after
-cue_before
-cursor
-direction
-display
-elevation
-empty_cells
-float
-font
-font_family
-font_size
-font_size_adjust
-font_stretch
-font_style
-font_variant
-font_weight
-height
-left
-letter_spacing
-line_height
-list_style
-list_style_image
-list_style_position
-list_style_type
-margin
-margin_left
-margin_top
-margin_right
-margin_bottom
-marker_offset
-marks
-max_height
-max_width
-min_height
-min_width
-orphans
-outline
-outline_color
-outline_style
-outline_width
-overflow
-padding
-padding_left
-padding_top
-padding_right
-padding_bottom
-page
-page_break_after
-page_break_before
-page_break_inside
-pause
-pause_after
-pause_before
-pitch
-pitch_range
-play_during
-position
-quotes
-richness
-right
-size
-speak
-speak_header
-speak_numeral
-speak_punctuation
-speech_rate
-stress
-table_layout
-text_align
-text_decoration
-text_indent
-text_shadow
-text_transform
-top
-unicode_bidi
-vertical_align
-visibility
-voice_family
-volume
-white_space
-widows
-width
-word_spacing
-z_index
-}
+class Casuistry
+  CSS_PROPERTIES = %w{ 
+  azimuth
+  background
+  background_attachment
+  background_color
+  background_image
+  background_position
+  background_repeat
+  border
+  border_collapse
+  border_color
+  border_spacing
+  border_style
+  border_top
+  border_top_color
+  border_top_style
+  border_top_width
+  border_width
+  bottom
+  caption_side
+  clear
+  clip
+  color
+  content
+  counter_increment
+  counter_reset
+  cue
+  cue_after
+  cue_before
+  cursor
+  direction
+  display
+  elevation
+  empty_cells
+  float
+  font
+  font_family
+  font_size
+  font_size_adjust
+  font_stretch
+  font_style
+  font_variant
+  font_weight
+  height
+  left
+  letter_spacing
+  line_height
+  list_style
+  list_style_image
+  list_style_position
+  list_style_type
+  margin
+  margin_left
+  margin_top
+  margin_right
+  margin_bottom
+  marker_offset
+  marks
+  max_height
+  max_width
+  min_height
+  min_width
+  orphans
+  outline
+  outline_color
+  outline_style
+  outline_width
+  overflow
+  padding
+  padding_left
+  padding_top
+  padding_right
+  padding_bottom
+  page
+  page_break_after
+  page_break_before
+  page_break_inside
+  pause
+  pause_after
+  pause_before
+  pitch
+  pitch_range
+  play_during
+  position
+  quotes
+  richness
+  right
+  size
+  speak
+  speak_header
+  speak_numeral
+  speak_punctuation
+  speech_rate
+  stress
+  table_layout
+  text_align
+  text_decoration
+  text_indent
+  text_shadow
+  text_transform
+  top
+  unicode_bidi
+  vertical_align
+  visibility
+  voice_family
+  volume
+  white_space
+  widows
+  width
+  word_spacing
+  z_index
+  }
+  
+end

data/lib/tags.rb

@@ -1,4 +1,4 @@
-module Tags
+class Casuistry
   HTML_TAGS = [
   :a,
   :abbr,

data/test/basics.rb

@@ -88,16 +88,17 @@ describe "Casuistry" do
 
   it "processes strings" do
     fiddle = [
-      ["ul", ["background: red;"]],
-      ["ul li", ["color: green;"]],
-      ["ul p.ugly", ["color: aqua;"]],
-      ["ul .smurf.house", ["height: 256px;"]],
-      ["ul #asrael", ["padding: 10px;"]],
+      ["div", ["background: red;", "width: 9934px;"]],
+      ["div ul li", ["color: green;"]],
+      ["div p.ugly.truly", ["color: aqua;"]],
+      ["div .smurf.house", ["height: 256px;"]],
+      ["div #menu", ["padding: 10px;"]],
       [".gargamel", ["margin: 0px;"]],
       [".outer.middle.inner", ["top: 34px;"]]
     ]
-    c = Cssy.process(File.read( "#{here}/fiddle.cssy"))
-    c.should == fiddle
+    c = Cssy.new
+    c.process(File.read( "#{here}/fiddle.cssy"))
+    c.data.should == fiddle
     # c.output.should == File.read( "#{here}/fiddle.css")
   end
   

data/test/dan.cssy

@@ -0,0 +1,160 @@
+# within a class
+
+class Widget
+
+  # need this to get stylesheet methods
+  include Casuistry
+  
+  # add in Grid Layout support
+  include Casuistry::Grid
+  
+  # changes default units to 10 x 10 pixel blocks
+  grid :columns => { :width => 10, :height => 10 }, :units => 'px'
+  
+  # define some reusable stuff
+  def block ; display :block ; margin 0 ; padding 0 ; end
+  def wrap ; clear :both ; end
+  def left ; float :left ; end
+  def dark ; color :gray ; end
+  def style light ; color :silver ; end
+  def large ; font :size => '13px' ; end
+  def small ; font :size => '11px' ; end
+
+  # generate a "CSS reset" and include some other stylesheets
+  reset ; include Main ; include Products
+  
+  intro_text! / a.back do
+    padding :top => 0, :left => 0, :bottom => 2, :right => 2
+    font :weight => :bold ; background :url => '/images/icons-back.gif', :repeat => false
+  end
+  
+  img.title { padding :bottom => 1 }
+  
+  div.wizard do
+    
+    left ; margin :right => 1
+
+    ul.steps do
+      
+      block
+      
+      li.step do
+        block ; display false; 
+        width 40 ; height 33.5
+        margin :left => '2px' ; padding 1.5
+        border '1px solid silver'
+        
+        add '.selected' { display :block }
+      
+      end
+    
+    end
+    
+    div.tab-selector span do
+      dark ; small ; centered ; block ; left
+      height 2.5 ; width 13 ; padding '12px 8px 0 8px' ; cursor :pointer
+      background :url => '/images/tab/unselected.gif', :repeat => :x
+      self & selected do 
+        font :weight => :bold ; color :black 
+        background :url => '/images/tab/selected.gif', :repeat => :x      
+      end
+    end
+
+    form do
+
+      ul.properties do
+        
+        block
+        
+        li.property do
+          
+          block ; padding :bottom => 4
+
+          label do
+            block ; left ; dark ; large
+            width 8 ; text_align :right
+            padding :right => 2 ; font :weight => :bold
+          end
+
+          div.value { left ; dark }
+
+          div.radio.value  | div.checkbox.value do
+            div.option do
+              large ; padding :left => 2 ; height 2 ; cursor :pointer
+              background :url => '/images/bt_radio_off.gif', :repeat => false
+            end
+          end
+          
+          div.text.value do
+
+            small ; dark ; margin :top => '-4px' 
+            
+            input do
+              height 2 ; width 22 ; border false; background :url => '/images/textfield_bg.gif', :repeat => false
+              padding 0.5 ; font :weight => :bold
+            end
+            
+            textarea { width 28 ; height 18 }
+
+          end
+
+        end
+        
+       li.size.property do
+          
+          div.option do
+            background :url => '/images/bt_radio_off.gif', :repeat => false
+            padding :left => 2 ; height 2 ; large
+            
+            self & selected do
+              background :url => '/images/bt_radio_on.gif', :repeat => false
+              padding :left => 2 ; height 2 ; large
+            end
+              
+          end
+          
+        end
+        
+        li.style.property do
+          
+          div.option do
+            left ; border '1px solid silver' ; padding '1px' ; margin-left 0.5 ; opacity 0.5
+          end
+          
+          div.option.hover | div.option.selected { border '1px solid gray' }
+          
+          div.option.selected { opacity 1.0 }
+          
+        end
+
+        li.tos.property / div.option
+          background :url => '/images/checkbox.gif', :repeat => false ; padding :left => 2          
+        end
+        
+        li.code.property { display false }
+
+      end
+    
+    end
+    
+  end
+  
+  div.preview do
+    
+    left ; height 40
+    
+    iframe do
+      block ; height 34 ; width 49 ; position :relative 
+      margin 0.5 ; padding :top => 3, :left => 0
+      border '1px solid silver'
+    end
+    
+    div.ac_results do
+      padding 0.5 ; margin :top => 1
+      border '1px solid silver' ; text_align :left ; dark
+      background :color => :white ; 
+    end
+    
+  end
+
+end

data/test/fiddle.css

@@ -0,0 +1,25 @@
+ul
+{
+  background: red;
+  width: 134px;
+}
+ul li .ugly
+{
+  color: green;
+}
+ul .smurf .house
+{
+  height: 256px;
+}
+ul #asrael
+{
+  padding: 10px;
+}
+.gargamel
+{
+  margin: 0px;
+}
+.outer .middle .inner
+{
+  top: 34px;
+}

data/test/fiddle.cssy

@@ -1,26 +1,27 @@
-# favorite = 'green'
 
-ul do
+div do
   
-  background('red')
+  # this is a property on div
+  background :red
   
-  li do
+  selector('ul li') do
     color('green')
   end
   
-  p.ugly do
+  p.ugly.truly do
     color('aqua')
   end
   
-  smurf.house do
+  selector('.smurf').house do
     height('256px')
   end
   
-  asrael! do
+  menu! do
     padding("10px")
   end
   
-  # width('9934px')
+  # this is a property on div, again
+  width('9934px')
   
 end
 
@@ -28,6 +29,6 @@ gargamel do
   margin("0px")
 end
 
-outer.middle.inner do
+selector('.outer.middle.inner') do
   top("34px")
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: automatthew-casuistry
 version: !ruby/object:Gem::Version 
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors: 
 - Matthew King
@@ -33,7 +33,8 @@ files:
 - README.rdoc
 - test/basics.rb
 - test/dan.css
-- test/experiment.cssy
+- test/dan.cssy
+- test/fiddle.css
 - test/fiddle.cssy
 - test/helper.rb
 - test/nesting.cssy

data/test/experiment.cssy

@@ -1,19 +0,0 @@
-selector "div.foo > ul.bar" do
-  
-  width "137px"
-  color :blue
-  
-  selector "a:hover" do
-    color :red
-    background :gray
-  end
-  
-  child "li.monkey" do
-    list_style :none
-  end
-  
-  sibling "p" do
-    margin "10px"
-  end
-  
-end