chunky_css 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.semver +1 -1
- data/Rakefile +3 -0
- data/lib/chunky_css.rb +64 -6
- data/spec/chunky_css_spec.rb +147 -1
- metadata +2 -2
data/.semver
CHANGED
data/Rakefile
CHANGED
data/lib/chunky_css.rb
CHANGED
@@ -40,8 +40,8 @@ module ChunkyCSS
|
|
40
40
|
end
|
41
41
|
end
|
42
42
|
|
43
|
-
buckets[current_bucket] ||=
|
44
|
-
buckets[current_bucket] += char
|
43
|
+
buckets[current_bucket] ||= MediaQuery.new(current_bucket)
|
44
|
+
buckets[current_bucket].css_rules += char
|
45
45
|
end
|
46
46
|
|
47
47
|
return buckets
|
@@ -60,15 +60,73 @@ module ChunkyCSS
|
|
60
60
|
end
|
61
61
|
|
62
62
|
def css_for_media(media)
|
63
|
-
@buckets[media]
|
63
|
+
(@buckets.has_key? media) ? @buckets[media].css_rules : nil
|
64
64
|
end
|
65
65
|
end
|
66
66
|
|
67
67
|
class Grouper < Splitter
|
68
68
|
def grouped_css
|
69
|
-
|
70
|
-
|
71
|
-
|
69
|
+
@buckets.values.sort.map{|mq| mq.to_css }.join("\n")
|
70
|
+
end
|
71
|
+
end
|
72
|
+
|
73
|
+
|
74
|
+
module RegEx
|
75
|
+
TYPE = /(all|screen|print)/
|
76
|
+
FEATURE_WITH_LENGTH = /\((((min|max)-)?width\s*:\s*\d+\s*px)\)/
|
77
|
+
end
|
78
|
+
|
79
|
+
class MediaQuery
|
80
|
+
include Comparable
|
81
|
+
|
82
|
+
attr_reader :type
|
83
|
+
attr_reader :features
|
84
|
+
attr_accessor :css_rules
|
85
|
+
|
86
|
+
def initialize(querystr)
|
87
|
+
@features = {}
|
88
|
+
@type = "all"
|
89
|
+
@css_rules = ""
|
90
|
+
|
91
|
+
scanner = StringScanner.new(querystr)
|
92
|
+
|
93
|
+
while !scanner.eos? do
|
94
|
+
if scanner.scan RegEx::TYPE
|
95
|
+
@type = scanner[1]
|
96
|
+
elsif scanner.scan RegEx::FEATURE_WITH_LENGTH
|
97
|
+
(key, value) = scanner[1].split(/\s*:\s*/)
|
98
|
+
@features[key] = value.gsub(/\s/, '')
|
99
|
+
else
|
100
|
+
scanner.getch
|
101
|
+
end
|
102
|
+
end
|
103
|
+
end
|
104
|
+
|
105
|
+
def <=>(other)
|
106
|
+
d = @features["max-width"].to_i <=> other.features["max-width"].to_i
|
107
|
+
|
108
|
+
if (d == 0)
|
109
|
+
my_min_width, other_min_width = [@features, other.features].map{|f| f["min-width"].to_i}
|
110
|
+
|
111
|
+
d = other_min_width <=> my_min_width
|
112
|
+
d *= -1 if [my_min_width, other_min_width].include?(0)
|
113
|
+
end
|
114
|
+
|
115
|
+
d
|
116
|
+
end
|
117
|
+
|
118
|
+
def media_description
|
119
|
+
[ @type ].concat( @features.keys.map {|key|
|
120
|
+
"(%s:%s)"%[key, @features[key]]
|
121
|
+
} ).join(" and ")
|
122
|
+
end
|
123
|
+
|
124
|
+
def to_css
|
125
|
+
if @type == "all" && @features.empty?
|
126
|
+
@css_rules
|
127
|
+
else
|
128
|
+
"@media %s{%s}"%[media_description, @css_rules]
|
129
|
+
end
|
72
130
|
end
|
73
131
|
end
|
74
132
|
end
|
data/spec/chunky_css_spec.rb
CHANGED
@@ -52,7 +52,153 @@ describe ChunkyCSS::Grouper do
|
|
52
52
|
end
|
53
53
|
|
54
54
|
it "has a 'screen and max-width' entry" do
|
55
|
-
css.should include("@media screen and (max-width:
|
55
|
+
css.should include("@media screen and (max-width:100px){")
|
56
56
|
end
|
57
57
|
end
|
58
58
|
end
|
59
|
+
|
60
|
+
describe ChunkyCSS::MediaQuery do
|
61
|
+
example "all" do
|
62
|
+
mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
|
63
|
+
|
64
|
+
mq.type.should eq("all")
|
65
|
+
mq.features.should be_an_instance_of(Hash)
|
66
|
+
mq.features.should be_empty
|
67
|
+
end
|
68
|
+
|
69
|
+
example "screen and (max-width: 300px)" do
|
70
|
+
mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
|
71
|
+
|
72
|
+
mq.type.should eq("screen")
|
73
|
+
mq.features.keys.length.should eq(1)
|
74
|
+
mq.features.keys.should include("max-width")
|
75
|
+
mq.features["max-width"].should eq("300px")
|
76
|
+
end
|
77
|
+
|
78
|
+
example "print and (max-width: 400px) and (min-width: 200px)" do
|
79
|
+
mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
|
80
|
+
|
81
|
+
mq.type.should eq("print")
|
82
|
+
mq.features.keys.length.should eq(2)
|
83
|
+
mq.features["min-width"].should eq("200px")
|
84
|
+
mq.features["max-width"].should eq("400px")
|
85
|
+
end
|
86
|
+
|
87
|
+
example "screen and (width: 100px) and (min-width: 5px) and (max-width: 123456px)" do
|
88
|
+
mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
|
89
|
+
|
90
|
+
mq.type.should eq("screen")
|
91
|
+
mq.features.keys.length.should eq(3)
|
92
|
+
mq.features["width"].should eq("100px")
|
93
|
+
mq.features["min-width"].should eq("5px")
|
94
|
+
mq.features["max-width"].should eq("123456px")
|
95
|
+
end
|
96
|
+
|
97
|
+
example " screen and (width:100px) and (min-width: 5px)and(max-width : 123456 px) " do
|
98
|
+
mq = ChunkyCSS::MediaQuery.new example.metadata[:description]
|
99
|
+
|
100
|
+
mq.type.should eq("screen")
|
101
|
+
mq.features.keys.length.should eq(3)
|
102
|
+
mq.features["width"].should eq("100px")
|
103
|
+
mq.features["min-width"].should eq("5px")
|
104
|
+
mq.features["max-width"].should eq("123456px")
|
105
|
+
end
|
106
|
+
end
|
107
|
+
|
108
|
+
describe ChunkyCSS::MediaQuery, "#<=>" do
|
109
|
+
example "both screen and different max-width" do
|
110
|
+
mq1 = ChunkyCSS::MediaQuery.new "screen and (max-width: 200px)"
|
111
|
+
mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width: 300px)"
|
112
|
+
|
113
|
+
(mq1 <=> mq2).should eq(-1)
|
114
|
+
(mq2 <=> mq1).should eq(1)
|
115
|
+
|
116
|
+
mq1.should be < mq2
|
117
|
+
mq2.should be > mq1
|
118
|
+
end
|
119
|
+
|
120
|
+
example "both screen and only one with max-width" do
|
121
|
+
mq1 = ChunkyCSS::MediaQuery.new "screen"
|
122
|
+
mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width: 300px)"
|
123
|
+
|
124
|
+
(mq1 <=> mq2).should eq(-1)
|
125
|
+
(mq2 <=> mq1).should eq(1)
|
126
|
+
|
127
|
+
mq1.should be < mq2
|
128
|
+
mq2.should be > mq1
|
129
|
+
end
|
130
|
+
|
131
|
+
example "both screen and different min-width" do
|
132
|
+
mq1 = ChunkyCSS::MediaQuery.new "screen and (min-width: 300px)"
|
133
|
+
mq2 = ChunkyCSS::MediaQuery.new "screen and (min-width: 200px)"
|
134
|
+
|
135
|
+
(mq1 <=> mq2).should eq(-1)
|
136
|
+
(mq2 <=> mq1).should eq(1)
|
137
|
+
|
138
|
+
mq1.should be < mq2
|
139
|
+
mq2.should be > mq1
|
140
|
+
end
|
141
|
+
|
142
|
+
example "both screen and only one with min-width" do
|
143
|
+
mq1 = ChunkyCSS::MediaQuery.new "screen"
|
144
|
+
mq2 = ChunkyCSS::MediaQuery.new "screen and (min-width: 300px)"
|
145
|
+
|
146
|
+
(mq1 <=> mq2).should eq(-1)
|
147
|
+
(mq2 <=> mq1).should eq(1)
|
148
|
+
|
149
|
+
mq1.should be < mq2
|
150
|
+
mq2.should be > mq1
|
151
|
+
end
|
152
|
+
|
153
|
+
example "both screen, both same max-width and different min-width" do
|
154
|
+
mq1 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px) and (min-width: 300px)"
|
155
|
+
mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px) and (min-width: 200px)"
|
156
|
+
|
157
|
+
(mq1 <=> mq2).should eq(-1)
|
158
|
+
(mq2 <=> mq1).should eq(1)
|
159
|
+
|
160
|
+
mq1.should be < mq2
|
161
|
+
mq2.should be > mq1
|
162
|
+
end
|
163
|
+
|
164
|
+
example "both screen, both same max-width and only one with min-width" do
|
165
|
+
mq1 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px)"
|
166
|
+
mq2 = ChunkyCSS::MediaQuery.new "screen and (max-width:400px) and (min-width: 300px)"
|
167
|
+
|
168
|
+
(mq1 <=> mq2).should eq(-1)
|
169
|
+
(mq2 <=> mq1).should eq(1)
|
170
|
+
|
171
|
+
mq1.should be < mq2
|
172
|
+
mq2.should be > mq1
|
173
|
+
end
|
174
|
+
end
|
175
|
+
|
176
|
+
describe ChunkyCSS::MediaQuery, "media_description" do
|
177
|
+
["all", "screen", "screen and (max-width:400px)", "screen and (max-width:300px) and (min-width:200px)"].each do |query|
|
178
|
+
example query do
|
179
|
+
mq = ChunkyCSS::MediaQuery.new( example.metadata[:description] )
|
180
|
+
mq.media_description.should eq( example.metadata[:description] )
|
181
|
+
end
|
182
|
+
end
|
183
|
+
end
|
184
|
+
|
185
|
+
describe ChunkyCSS::MediaQuery, "#to_css" do
|
186
|
+
example "media all with some rules" do
|
187
|
+
mq = ChunkyCSS::MediaQuery.new "all"
|
188
|
+
mq.css_rules = "body{color:red;}"
|
189
|
+
|
190
|
+
mq.to_css.should eq("body{color:red;}")
|
191
|
+
end
|
192
|
+
|
193
|
+
example "media screen with some rules" do
|
194
|
+
mq = ChunkyCSS::MediaQuery.new "screen"
|
195
|
+
mq.css_rules = "body{color:red;}"
|
196
|
+
mq.to_css.should eq("@media screen{body{color:red;}}")
|
197
|
+
end
|
198
|
+
|
199
|
+
example "media screen and max-width with some rules" do
|
200
|
+
mq = ChunkyCSS::MediaQuery.new "screen and (max-width:400px)"
|
201
|
+
mq.css_rules = "body{color:red;}"
|
202
|
+
mq.to_css.should eq("@media screen and (max-width:400px){body{color:red;}}")
|
203
|
+
end
|
204
|
+
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: chunky_css
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.5
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-06-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rspec
|