css-annotate 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG +9 -0
- data/Gemfile +0 -1
- data/README.rdoc +10 -1
- data/VERSION +1 -1
- data/bin/css-annotate +37 -6
- data/css-annotate.gemspec +1 -0
- data/lib/css/annotate.rb +12 -4
- data/lib/css/annotate/style.scss +45 -22
- data/lib/css/annotate/template.erb +29 -6
- metadata +20 -5
data/CHANGELOG
CHANGED
@@ -1,3 +1,12 @@
|
|
1
|
+
2010-11-11 version 1.2.0
|
2
|
+
|
3
|
+
You can now run css-annotate as a Web server with the -s/--server option. Hit
|
4
|
+
refresh to reload your CSS.
|
5
|
+
|
6
|
+
Now attempts to guess syntax from file extension, so pointing to a SASS file
|
7
|
+
would just work.
|
8
|
+
|
9
|
+
|
1
10
|
2010-11-11 version 1.1.0
|
2
11
|
|
3
12
|
Added shortcut option -c, same as --commented.
|
data/Gemfile
CHANGED
data/README.rdoc
CHANGED
@@ -1,9 +1,18 @@
|
|
1
|
+
== Usage
|
2
|
+
|
1
3
|
Usage:
|
2
4
|
css-annotate [options] filename
|
3
5
|
|
4
6
|
Options:
|
5
|
-
--commented
|
7
|
+
-c --commented Show only rules preceded by a comment
|
8
|
+
-p --port [num] Port number (default 8080)
|
9
|
+
-s --server Run a Web server
|
6
10
|
--syntax [name] Either sass or scss (default)
|
7
11
|
|
12
|
+
Example:
|
13
|
+
css-annotate lib/css/annotate/style.scss | bcat
|
14
|
+
css-annotate --server lib/css/annotate/style.scss
|
15
|
+
|
16
|
+
== Screenshot
|
8
17
|
|
9
18
|
http://labnotes.org/wp-content/uploads/2010/11/Your-CSS-annotated.png
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
1.
|
1
|
+
1.2.0
|
data/bin/css-annotate
CHANGED
@@ -1,14 +1,39 @@
|
|
1
1
|
#!/usr/bin/env ruby
|
2
2
|
$LOAD_PATH.unshift File.expand_path(File.dirname(__FILE__) + '/../lib')
|
3
3
|
require "css/annotate"
|
4
|
+
|
5
|
+
options = {}
|
6
|
+
if (i = ARGV.index("--syntax")) && ARGV[i+1]
|
7
|
+
options[:syntax] = ARGV[i + 1].to_sym
|
8
|
+
ARGV[i,2] = []
|
9
|
+
end
|
10
|
+
options[:all] = !(ARGV.delete("--commented") || ARGV.delete("-c"))
|
11
|
+
|
12
|
+
server = ARGV.delete("--server") || ARGV.delete("-s")
|
13
|
+
if (i = ARGV.index("--port") || ARGV.index("-p")) && ARGV[i+1]
|
14
|
+
port = ARGV[i + 1].to_i
|
15
|
+
ARGV[i,2] = []
|
16
|
+
end
|
17
|
+
|
4
18
|
if filename = ARGV[0]
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
19
|
+
if server
|
20
|
+
require "rack"
|
21
|
+
app = lambda do |env|
|
22
|
+
request = Rack::Request.new(env)
|
23
|
+
if request.path == "/"
|
24
|
+
html = CSS::Annotate.new(filename, options).to_html
|
25
|
+
[200, { "Content-Type"=>"text/html", "Content-Length"=>html.length.to_s }, [html]]
|
26
|
+
else
|
27
|
+
[404, {}, "Not found"]
|
28
|
+
end
|
29
|
+
end
|
30
|
+
trap(:INT) { exit! }
|
31
|
+
trap(:QUIT) { exit! }
|
32
|
+
server = Rack::Handler.default
|
33
|
+
server.run app, :Host=>"127.0.0.1", :Port=>port || 8080
|
34
|
+
else
|
35
|
+
$stdout << CSS::Annotate.new(filename, options).to_html
|
9
36
|
end
|
10
|
-
options[:all] = !(ARGV.delete("--commented") || ARGV.delete("-c"))
|
11
|
-
$stdout << CSS::Annotate.new(ARGV[0], options).to_html
|
12
37
|
else
|
13
38
|
print <<-TEXT
|
14
39
|
Usage:
|
@@ -16,8 +41,14 @@ Usage:
|
|
16
41
|
|
17
42
|
Options:
|
18
43
|
-c --commented Show only rules preceded by a comment
|
44
|
+
-p --port [num] Port number (default 8080)
|
45
|
+
-s --server Run a Web server
|
19
46
|
--syntax [name] Either sass or scss (default)
|
20
47
|
|
48
|
+
Example:
|
49
|
+
css-annotate lib/css/annotate/style.scss | bcat
|
50
|
+
css-annotate --server lib/css/annotate/style.scss
|
51
|
+
|
21
52
|
TEXT
|
22
53
|
exit -1
|
23
54
|
end
|
data/css-annotate.gemspec
CHANGED
data/lib/css/annotate.rb
CHANGED
@@ -7,15 +7,14 @@ require "cgi"
|
|
7
7
|
module CSS
|
8
8
|
class Annotate
|
9
9
|
|
10
|
-
DEFAULT_OPTIONS = { :syntax=>:scss }
|
11
|
-
|
12
10
|
def initialize(filename, options = {})
|
13
11
|
@filename = filename
|
14
|
-
@options =
|
12
|
+
@options = options.clone
|
15
13
|
paths = @options[:load_paths] || []
|
16
14
|
paths.push File.dirname(@filename)
|
17
15
|
paths.concat Compass::Frameworks::ALL.map { |framework| framework.stylesheets_directory }
|
18
16
|
@options[:load_paths] = paths
|
17
|
+
@options[:syntax] ||= guess_syntax(filename)
|
19
18
|
end
|
20
19
|
|
21
20
|
attr_reader :filename, :options, :rows
|
@@ -34,12 +33,16 @@ module CSS
|
|
34
33
|
|
35
34
|
def to_html
|
36
35
|
rows = annotate
|
37
|
-
ERB.new(IO.read(File.dirname(__FILE__) + "/annotate/template.erb")).
|
36
|
+
ERB.new(IO.read(File.dirname(__FILE__) + "/annotate/template.erb")).result(binding)
|
38
37
|
end
|
39
38
|
|
40
39
|
def styles
|
41
40
|
Sass::Engine.new(IO.read(File.dirname(__FILE__) + "/annotate/style.scss"), :syntax=>:scss).render
|
42
41
|
end
|
42
|
+
|
43
|
+
def all?
|
44
|
+
!!options[:all]
|
45
|
+
end
|
43
46
|
|
44
47
|
protected
|
45
48
|
|
@@ -75,5 +78,10 @@ module CSS
|
|
75
78
|
rows
|
76
79
|
end
|
77
80
|
|
81
|
+
def guess_syntax(filename)
|
82
|
+
ext = File.extname(filename).sub(/^\./, "")
|
83
|
+
%{css sass scss}.include?(ext) ? ext.to_sym : :scss
|
84
|
+
end
|
85
|
+
|
78
86
|
end
|
79
87
|
end
|
data/lib/css/annotate/style.scss
CHANGED
@@ -3,41 +3,64 @@ body {
|
|
3
3
|
padding: 0;
|
4
4
|
font-family: "Helvetica";
|
5
5
|
}
|
6
|
+
|
7
|
+
.toggle {
|
8
|
+
position: absolute;
|
9
|
+
right: 1em;
|
10
|
+
top: 0.3em;
|
11
|
+
font-size: 90%;
|
12
|
+
/* Link to show all rules */
|
13
|
+
[rel="show"] { display: none }
|
14
|
+
/* Link to show only commented rules */
|
15
|
+
[rel="hide"] { display: inherit }
|
16
|
+
}
|
17
|
+
|
6
18
|
/* Place on annotation table */
|
7
19
|
table.annotated {
|
20
|
+
table-layout: fixed;
|
8
21
|
width: 100%;
|
9
22
|
margin: 0;
|
10
23
|
padding: 0;
|
11
24
|
border-collapse: collapse;
|
12
25
|
border-bottom: 1px solid #ccc;
|
13
26
|
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
h2 {
|
20
|
-
font-size: 12pt;
|
21
|
-
margin: 0 0 0.1em 0;
|
22
|
-
color: #444;
|
27
|
+
tr {
|
28
|
+
/* Apply to any row that has selector with comment */
|
29
|
+
&.commented {
|
30
|
+
display: table-row;
|
23
31
|
}
|
24
32
|
|
25
|
-
|
26
|
-
|
27
|
-
|
33
|
+
/* Apply to column that contains CSS selector/comment */
|
34
|
+
td.selector {
|
35
|
+
vertical-align: top;
|
36
|
+
padding: 1em 2em 1em 1em;
|
37
|
+
|
38
|
+
h2 {
|
39
|
+
font-size: 12pt;
|
40
|
+
margin: 0 0 0.1em 0;
|
41
|
+
color: #444;
|
42
|
+
}
|
43
|
+
|
44
|
+
blockquote {
|
45
|
+
padding: 0;
|
46
|
+
margin: 0;
|
47
|
+
}
|
28
48
|
}
|
29
|
-
}
|
30
49
|
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
50
|
+
/* Apply to column that contains CSS style */
|
51
|
+
td.style {
|
52
|
+
width: 40em;
|
53
|
+
background: #eef;
|
54
|
+
vertical-align: top;
|
55
|
+
padding: 1em 1em 1em 2em;
|
56
|
+
border-left: 1px solid #ccc;
|
57
|
+
overflow: hidden;
|
58
|
+
border-bottom: 1px dashed #ccc;
|
59
|
+
}
|
38
60
|
|
39
|
-
|
40
|
-
|
61
|
+
&:hover td {
|
62
|
+
background: #ddf;
|
63
|
+
}
|
41
64
|
}
|
42
65
|
}
|
43
66
|
.footer {
|
@@ -2,19 +2,42 @@
|
|
2
2
|
<head>
|
3
3
|
<title>Your CSS, annotated</title>
|
4
4
|
<style><%= styles %></style>
|
5
|
+
<% if all? %>
|
6
|
+
<script type="text/javascript">
|
7
|
+
function toggle(show) {
|
8
|
+
var styles = document.styleSheets[0];
|
9
|
+
var rules = styles.cssRules || styles.rules;
|
10
|
+
for (var i in rules) {
|
11
|
+
var rule = rules[i];
|
12
|
+
if (rule.selectorText == "table.annotated tr")
|
13
|
+
rule.style.display = show ? "table-row" : "none";
|
14
|
+
if (rule.selectorText == ".toggle [rel=\"show\"]")
|
15
|
+
rule.style.display = show ? "none" : "inherit";
|
16
|
+
if (rule.selectorText == ".toggle [rel=\"hide\"]")
|
17
|
+
rule.style.display = show ? "inherit" : "none";
|
18
|
+
}
|
19
|
+
}
|
20
|
+
</script>
|
21
|
+
<% end %>
|
5
22
|
</head>
|
6
23
|
<body>
|
24
|
+
<% if all? %>
|
25
|
+
<div class="toggle">
|
26
|
+
<a href="javascript:toggle(false)" rel="hide">Only commented</a>
|
27
|
+
<a href="javascript:toggle(true)" rel="show">Show all</a>
|
28
|
+
</div>
|
29
|
+
<% end %>
|
7
30
|
<table class="annotated">
|
8
31
|
<% rows.each do |row| %>
|
9
|
-
<tr>
|
10
|
-
<td class="
|
32
|
+
<tr class="<%= "commented" if row[:comment] %>">
|
33
|
+
<td class="selector">
|
11
34
|
<h2><%= h row[:selector] %></h2>
|
12
|
-
|
13
|
-
</
|
14
|
-
<td class="
|
35
|
+
<% if row[:comment] %><blockquote><%= h row[:comment] %></blockquote><% end %>
|
36
|
+
</td>
|
37
|
+
<td class="style"><pre><%= h row[:style]%></pre></td>
|
15
38
|
</tr>
|
16
39
|
<% end %>
|
17
|
-
|
40
|
+
</table>
|
18
41
|
<div class="footer">
|
19
42
|
Generated from <span class="filename"><%= filename %></span> on
|
20
43
|
<%= Time.now.strftime("%c") %> by <a href="http://github.com/assaf/css-annotate">CSS Annotate</a>
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: css-annotate
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 31
|
5
5
|
prerelease: false
|
6
6
|
segments:
|
7
7
|
- 1
|
8
|
-
-
|
8
|
+
- 2
|
9
9
|
- 0
|
10
|
-
version: 1.
|
10
|
+
version: 1.2.0
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Assaf Arkin
|
@@ -15,7 +15,7 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2010-11-
|
18
|
+
date: 2010-11-12 00:00:00 -08:00
|
19
19
|
default_executable:
|
20
20
|
dependencies:
|
21
21
|
- !ruby/object:Gem::Dependency
|
@@ -48,6 +48,21 @@ dependencies:
|
|
48
48
|
version: "3.0"
|
49
49
|
type: :runtime
|
50
50
|
version_requirements: *id002
|
51
|
+
- !ruby/object:Gem::Dependency
|
52
|
+
name: rack
|
53
|
+
prerelease: false
|
54
|
+
requirement: &id003 !ruby/object:Gem::Requirement
|
55
|
+
none: false
|
56
|
+
requirements:
|
57
|
+
- - ~>
|
58
|
+
- !ruby/object:Gem::Version
|
59
|
+
hash: 13
|
60
|
+
segments:
|
61
|
+
- 1
|
62
|
+
- 1
|
63
|
+
version: "1.1"
|
64
|
+
type: :runtime
|
65
|
+
version_requirements: *id003
|
51
66
|
description: Uses in-line docs to map the stylesheet. Supports CSS and SCSS.
|
52
67
|
email: assaf@labnotes.org
|
53
68
|
executables:
|
@@ -77,7 +92,7 @@ licenses: []
|
|
77
92
|
post_install_message: To get started, run the command css-annotate
|
78
93
|
rdoc_options:
|
79
94
|
- --title
|
80
|
-
- css-annotate 1.
|
95
|
+
- css-annotate 1.2.0
|
81
96
|
- --main
|
82
97
|
- README.rdoc
|
83
98
|
- --webcvs
|