css-annotate 1.3.0 → 2.0.0

data/CHANGELOG

@@ -1,3 +1,14 @@
+2010-11-21 version 2.0.0
+
+Rack support! Mount css-annotate in your Web app to serve annotated
+CSS/SCSS/SASS along the originals. See README for examples.
+
+
+If no commented styles, show all styles by default.
+
+Remove dependency on Compass, but absolutely use Compass when installed.
+
+
 2010-11-18 version 1.3.0
 
 By default only show commented styles (the ones that matter).

data/README.rdoc

@@ -9,9 +9,34 @@
     -s --server      Run a Web server
     --syntax [name]  Either sass or scss (default)
 
-  Example:
+  CSS annotate single file and pipe to browser:
     css-annotate lib/css/annotate/style.scss | bcat
-    css-annotate --server lib/css/annotate/style.scss
+
+  Run as server on port 8080, annotate files in public/stylesheets:
+    css-annotate --server public/stylesheets
+    open http://localhost:8080/main.css
+
+
+== Mount To Your App
+
+You can mount css-annotate in your Web app (Rails 3.x, Padrino, etc) to serve
+annotated versions of all CSS, SCSS and SASS files. For example, to mount all
+files from public/stylesheets under the path /stylesheets/annotated:
+
+  mount CSS::Annotate.new=>"/stylesheets/annotated"
+
+With yout browser, you can now access the CSS file /stylesheets/screen.css and
+its annotated version from /stylesheets/annotated/screen.css.
+
+To mount files from a different path, pass it as the sole argument to
+CSS::Annotate. For example:
+
+  mount CSS::Annotate.new("app/views/stylesheets")=>"/stylesheets/annotated"
+
+With your browser, you can now access the annotated SCSS file
+/stylesheets/annotated/screen.scss.  Note that both filename and extension must
+match the file you want annotated.
+
 
 == Screenshot
 

data/VERSION

@@ -1 +1 @@
-1.3.0
+2.0.0

data/bin/css-annotate

@@ -18,21 +18,12 @@ end
 if filename = ARGV[0]
   if server
     require "rack"
-    app = lambda do |env|
-      request = Rack::Request.new(env)
-      if request.path == "/"
-        html = CSS::Annotate.new(filename, options).to_html
-        [200, { "Content-Type"=>"text/html", "Content-Length"=>html.length.to_s }, [html]]
-      else
-        [404, {}, "Not found"]
-      end
-    end
     trap(:INT) { exit! }
     trap(:QUIT) { exit! }
     server = Rack::Handler.default
-    server.run app, :Host=>"127.0.0.1", :Port=>port || 8080
+    server.run CSS::Annotate.new(filename), :Host=>"127.0.0.1", :Port=>port || 8080
   else
-    $stdout << CSS::Annotate.new(filename, options).to_html
+    $stdout << CSS::Annotate.new(options).to_html(filename)
   end
 else
   print <<-TEXT
@@ -45,9 +36,19 @@ Options:
   -s --server      Run a Web server
   --syntax [name]  Either sass or scss (default)
 
-Example:
-  css-annotate lib/css/annotate/style.scss | bcat
-  css-annotate --server lib/css/annotate/style.scss
+CSS annotate single file and pipe to browser:
+  $ css-annotate lib/css/annotate/style.scss | bcat
+
+Run as server on port 8080, annotate files in public/stylesheets:
+  $ css-annotate --server public/stylesheets
+  $ open http://localhost:8080/main.css
+
+Mount to your Web app, annotate all files in app/view/stylesheets, access them
+from /stylesheets/annotated:
+  Application.routes.draw do
+    mount CSS::Annotate.new("app/views/stylesheets")=>"/stylesheets/annotated"
+  end
+  $ open http://localhost:3000/stylesheets/annotated/screen.scss
 
   TEXT
   exit -1

data/css-annotate.gemspec

@@ -19,7 +19,6 @@ Gem::Specification.new do |spec|
                           "--webcvs", "http://github.com/assaf/#{spec.name}"
 
   spec.required_ruby_version = '>= 1.8.7'
-  spec.add_dependency "compass", "~>0.10"
   spec.add_dependency "haml", "~>3.0"
   spec.add_dependency "rack", "~>1.1"
 end

data/lib/css/annotate.rb

@@ -1,52 +1,76 @@
 require "haml"
 require "sass/engine"
-require "compass"
 require "erb"
 require "cgi"
+require "rack"
 
 module CSS
   class Annotate
 
-    def initialize(filename, options = {})
-      @filename = filename
-      @options = options.clone
-      paths = @options[:load_paths] || []
-      paths.push File.dirname(@filename)
-      paths.concat Compass::Frameworks::ALL.map { |framework| framework.stylesheets_directory }
+    # @param [Hash, String, nil] options Hash with options, just the path, or
+    # nil
+    # @options options [String] path Path to your CSS/SCSS/SASS source files
+    # @options options [Array<String>] load_paths Additional paths for loading
+    # CSS files
+    # @options options [Boolean] all If nil, true show all styles (with buttons to
+    # show only commented); if false show only commented styles.
+    def initialize(options = nil)
+      @options = String === options ? { :path=>options } : options ? options.clone : {}
+      @options[:path] ||= "public/stylesheets/"
+      paths =[@options[:path]]
+      paths.concat Compass::Frameworks::ALL.map { |framework| framework.stylesheets_directory } if defined?(Compass)
       @options[:load_paths] = paths
-      @options[:syntax] ||= guess_syntax(filename)
+      @options[:all] = true unless @options.has_key?(:all)
     end
 
-    attr_reader :filename, :options, :rows
+    attr_reader :options, :rows
 
-    def annotate
-      engine = Sass::Engine.new(IO.read(filename), options)
+    # Annotate the named file. Sets and returns rows.
+    def annotate(filename)
+      engine = Sass::Engine.new(IO.read(filename), options.merge(:syntax=>guess_syntax(filename)))
       tree = engine.to_tree
       tree.perform!(Sass::Environment.new)
       resolve_rules tree
       @rows = to_rows(tree)
     end
 
-    def h(raw)
-      CGI.escapeHTML(raw.to_s)
-    end
-
-    def to_html
-      rows = annotate
+    # Annotate the named file, returns HTML document.
+    def to_html(filename)
+      rows = annotate(filename)
       ERB.new(IO.read(File.dirname(__FILE__) + "/annotate/template.erb")).result(binding)
     rescue Sass::SyntaxError=>error
       error = Sass::SyntaxError.exception_to_css error, @options.merge(:full_exception=>true)
       ERB.new(IO.read(File.dirname(__FILE__) + "/annotate/template.erb")).result(binding)
     end
 
+    # ERB template uses this to HTML escape content.
+    def h(raw)
+      CGI.escapeHTML(raw.to_s)
+    end
+
+    # ERB template uses this to obtain our own stylesheet.
     def styles
       Sass::Engine.new(IO.read(File.dirname(__FILE__) + "/annotate/style.scss"), :syntax=>:scss).render
     end
-    
+   
+    # EBB template uses this to determine if it should show all, or just
+    # commented, styles. 
     def all?
       !!options[:all]
     end
 
+    def call(env)
+      request = Rack::Request.new(env)
+      filename = request.path_info.split("/").last
+      filename = File.expand_path(filename, @options[:path]) if filename
+      if filename && File.exist?(filename)
+        html = to_html(filename)
+        [200, { "Content-Type"=>"text/html", "Content-Length"=>html.length.to_s }, [html]]
+      else
+        [404, { "Content-Type"=>"text/plain" }, ["Could not find '#{filename}'"]]
+      end
+    end
+
   protected
 
     def resolve_rules(parent)

data/lib/css/annotate/style.scss

@@ -30,6 +30,15 @@ h3, h4, h5, h6 {
   right: 1em;
   top: 0.3em;
   font-size: 90%;
+  a {
+    color: #261a3b;
+    text-decoration: none;
+    font-weight: bold;
+    background: #fff;
+    padding: 2px 6px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+  }
   /* Link to show all rules */
   [rel="show"] { display: none }
   /* Link to show only commented rules */
@@ -71,7 +80,7 @@ table.annotated {
     /* Apply to column that contains CSS style */
     td.style {
       width: 40em;
-      background: #eef;
+      background: #f5f5ff;
       vertical-align: top;
       padding: 1em 1em 1em 2em;
       border-left: 1px solid #ccc;
@@ -80,7 +89,7 @@ table.annotated {
     }
 
     &:hover td {
-      background: #ddf;
+      background: #f5f5ff;
     }
   }
 }

data/lib/css/annotate/template.erb

@@ -2,24 +2,6 @@
   <head>
     <title>Your CSS, annotated</title>
     <style><%= styles %><%= error %></style>
-    <% if all? %>
-      <script type="text/javascript">
-        function toggle(show) {
-          var styles = document.styleSheets[0];
-          var rules = styles.cssRules || styles.rules;
-          for (var i in rules) {
-            var rule = rules[i];
-            if (rule.selectorText == "table.annotated tr")
-              rule.style.display = show ? "table-row" : "none";
-            if (rule.selectorText == ".toggle [rel=\"show\"]")
-              rule.style.display = show ? "none" : "inherit";
-            if (rule.selectorText == ".toggle [rel=\"hide\"]")
-              rule.style.display = show ? "inherit" : "none";
-          }
-        }
-        toggle(false);
-      </script>
-    <% end %>
   </head>
   <body>
     <% if rows %>
@@ -45,5 +27,24 @@
       Generated from <span class="filename"><%= filename %></span> on
       <%= Time.now.strftime("%c") %> by <a href="http://github.com/assaf/css-annotate">CSS Annotate</a>
     </div>
+    <% if all? %>
+      <script type="text/javascript">
+        function toggle(show) {
+          var styles = document.styleSheets[0];
+          var rules = styles.cssRules || styles.rules;
+          for (var i in rules) {
+            var rule = rules[i];
+            if (rule.selectorText == "table.annotated tr")
+              rule.style.display = show ? "table-row" : "none";
+            if (rule.selectorText == ".toggle [rel=\"show\"]")
+              rule.style.display = show ? "none" : "inherit";
+            if (rule.selectorText == ".toggle [rel=\"hide\"]")
+              rule.style.display = show ? "inherit" : "none";
+          }
+        }
+        var commented = document.getElementsByClassName("commented");
+        toggle(commented.length == 0);
+      </script>
+    <% end %>
   </body>
 </html>

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: css-annotate
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 15
   prerelease: false
   segments: 
-  - 1
-  - 3
+  - 2
   - 0
-  version: 1.3.0
+  - 0
+  version: 2.0.0
 platform: ruby
 authors: 
 - Assaf Arkin
@@ -15,28 +15,13 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-11-18 00:00:00 -08:00
+date: 2010-11-21 00:00:00 -08:00
 default_executable: 
 dependencies: 
-- !ruby/object:Gem::Dependency 
-  name: compass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
-    - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 31
-        segments: 
-        - 0
-        - 10
-        version: "0.10"
-  type: :runtime
-  version_requirements: *id001
 - !ruby/object:Gem::Dependency 
   name: haml
   prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
+  requirement: &id001 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
@@ -47,11 +32,11 @@ dependencies:
         - 0
         version: "3.0"
   type: :runtime
-  version_requirements: *id002
+  version_requirements: *id001
 - !ruby/object:Gem::Dependency 
   name: rack
   prerelease: false
-  requirement: &id003 !ruby/object:Gem::Requirement 
+  requirement: &id002 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ~>
@@ -62,7 +47,7 @@ dependencies:
         - 1
         version: "1.1"
   type: :runtime
-  version_requirements: *id003
+  version_requirements: *id002
 description: Uses in-line docs to map the stylesheet. Supports CSS and SCSS.
 email: assaf@labnotes.org
 executables: 
@@ -92,7 +77,7 @@ licenses: []
 post_install_message: To get started, run the command css-annotate
 rdoc_options: 
 - --title
-- css-annotate 1.3.0
+- css-annotate 2.0.0
 - --main
 - README.rdoc
 - --webcvs