stylus_assets 0.3.0 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -9,7 +9,7 @@ have a look at [Ruby Stylus](https://github.com/lucasmazza/ruby-stylus).
9
9
  Tested on MRI Ruby 1.8.7, 1.9.2, 1.9.3, REE and the latest version of JRuby.
10
10
 
11
11
  ## Why a Style template?
12
-
12
+
13
13
  Why would you like to have JavaScript Style Templates? If you have a lot of domain models that describes a UI, you can
14
14
  convert them dynamically to CSS and have nice style logic in the template instead of code that manipulates the DOM
15
15
  style attributes.
@@ -103,7 +103,7 @@ StylusAssets::StylusTemplate.variable_prefix = true
103
103
  ```
104
104
 
105
105
  All following examples are prefix free.
106
-
106
+
107
107
  ## Render
108
108
 
109
109
  When you have a template named `header` with the given content:
@@ -151,6 +151,85 @@ will result in
151
151
  }
152
152
  ```
153
153
 
154
+ ### Lists
155
+
156
+ If you pass an array as variable value, it'll converted into a list:
157
+
158
+ ```CSS
159
+ for c in cols
160
+ .{c}
161
+ border: 0px
162
+ ```
163
+
164
+ that is rendered with
165
+
166
+ ```javascript
167
+ JSST['header']({ cols: [1, 2, 3] })
168
+ ```
169
+
170
+ will generate
171
+
172
+ ```CSS
173
+ .1 {
174
+ border: 0;
175
+ }
176
+ .2 {
177
+ border: 0;
178
+ }
179
+ .3 {
180
+ border: 0;
181
+ }
182
+ ```
183
+
184
+ ### Sets
185
+
186
+ If you pass an object as variable value, it'll converted into a set:
187
+
188
+ ```CSS
189
+ for p in obj
190
+ .{p[0]}
191
+ margin-left: 5px
192
+ ```
193
+
194
+ that is rendered with
195
+
196
+ ```javascript
197
+ JSST['header']({ obj: { prop1: 'test1', prop2: 'test2' } })
198
+ ```
199
+
200
+ will generate
201
+
202
+ ```CSS
203
+ .prop1 {
204
+ margin-left: 5px;
205
+ }
206
+ .prop2 {
207
+ margin-left: 5px;
208
+ }
209
+ ```
210
+
211
+ Whenever a set is detected, a helper funtion `get` is added:
212
+
213
+ ```Stylus
214
+ get(hash, key)
215
+ return pair[1] if pair[0] == key for pair in hash
216
+ ```
217
+
218
+ which allows you the access a value by its name:
219
+
220
+ ```CSS
221
+ .{get(obj, 'prop1')}
222
+ border: 0px
223
+ ```
224
+
225
+ will generate
226
+
227
+ ```CSS
228
+ .test1 {
229
+ border: 0px;
230
+ }
231
+ ```
232
+
154
233
  ### Default variables
155
234
 
156
235
  You do not need to define the variables in the Stylus stylesheet, as they will be created before compilation, but you
@@ -1,5 +1,5 @@
1
1
  # coding: UTF-8
2
2
 
3
3
  module StylusAssets
4
- VERSION = '0.3.0' unless defined?(StylusAssets::VERSION)
4
+ VERSION = '0.4.0' unless defined?(StylusAssets::VERSION)
5
5
  end
@@ -4,10 +4,13 @@ class window.StylusAssets
4
4
 
5
5
  # Whether to prefix variables with a $ on not
6
6
  @prefixVariables = <%= StylusAssets::StylusTemplate.variable_prefix %>
7
-
7
+
8
8
  # Test if object is an array
9
9
  @isArray = Array.isArray or (obj) -> !!(obj and obj.concat and obj.unshift and not obj.callee)
10
-
10
+
11
+ # Test if object is an object
12
+ @isObject = (obj) -> obj is Object(obj)
13
+
11
14
  # Render stylus css with its variables to plain css
12
15
  #
13
16
  # @param [String] css the stylus css
@@ -18,8 +21,9 @@ class window.StylusAssets
18
21
  @render: (name, css, variables = {}, doc = undefined) ->
19
22
  result = undefined
20
23
  newVariables = {}
24
+ hasSet = false
21
25
  prefix = if StylusAssets.prefixVariables then '$' else ''
22
-
26
+
23
27
  # Replace existing less variables
24
28
  #
25
29
  for variable, value of variables
@@ -28,17 +32,32 @@ class window.StylusAssets
28
32
  if StylusAssets.isArray(value)
29
33
  list = ''
30
34
  list += "'#{ v }' " for v in value
35
+
31
36
  value = list.substring(0, list.length - 1)
32
37
 
38
+ if StylusAssets.isObject(value)
39
+ hasSet = true
40
+
41
+ set = ''
42
+ set += "('#{ k }' '#{ v }') " for k, v of value
43
+
44
+ value = set.substring(0, set.length - 1)
45
+
33
46
  if existing.test css
34
47
  css = css.replace existing, "#{ prefix }#{ variable } = #{ value }"
35
48
  else
36
49
  newVariables[variable] = value
37
50
 
38
- # Add bew Stylus variables
51
+ # Add new Stylus variables
39
52
  #
40
53
  style = ''
41
54
  style += "#{ prefix }#{ variable } = #{ value }\n" for variable, value of newVariables
55
+
56
+ if hasSet
57
+ style += """
58
+ get(hash, key)
59
+ return pair[1] if pair[0] == key for pair in hash\n
60
+ """
42
61
  style += css
43
62
 
44
63
  # Compile the Stylus stylesheet
@@ -76,7 +95,7 @@ class window.StylusAssets
76
95
  # Stylus imports
77
96
  #
78
97
  class StylusAssets.Imports
79
-
98
+
80
99
  @functions = '''
81
100
  vendors = moz webkit o ms official
82
101
 
@@ -88,7 +107,7 @@ vendors = moz webkit o ms official
88
107
  // require a color
89
108
 
90
109
  require-color(color)
91
- unless color is a 'color'
110
+ unless color is a 'color'
92
111
  error('RGB or HSL value expected, got a ' + -string(color))
93
112
 
94
113
  // require a unit
@@ -105,7 +124,7 @@ require-string(str)
105
124
 
106
125
  // apply js Math function
107
126
 
108
- math(n, fn)
127
+ math(n, fn)
109
128
  require-unit(n)
110
129
  require-string(fn)
111
130
  -math(n, fn)
@@ -208,7 +227,7 @@ lighten(color, amount)
208
227
 
209
228
  fade-out(color, amount)
210
229
  color - rgba(black, percent-to-decimal(amount))
211
-
230
+
212
231
  // increase opacity by amount
213
232
 
214
233
  fade-in(color, amount)
@@ -296,7 +315,7 @@ join(delim, vals...)
296
315
  // add a css rule to the containing block
297
316
 
298
317
  // - This definition allows add-property to be used as a mixin
299
- // - It has the same effect as interpolation but allows users
318
+ // - It has the same effect as interpolation but allows users
300
319
  // to opt for a functional style
301
320
 
302
321
  add-property-function = add-property
@@ -305,4 +324,4 @@ add-property(name, expr)
305
324
  {name} expr
306
325
  else
307
326
  add-property-function(name, expr)
308
- '''
327
+ '''
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: stylus_assets
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.0
4
+ version: 0.4.0
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-06-26 00:00:00.000000000 Z
12
+ date: 2012-08-22 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: tilt
@@ -88,7 +88,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
88
88
  version: '0'
89
89
  segments:
90
90
  - 0
91
- hash: -1206232681905005782
91
+ hash: -3115701335073958094
92
92
  required_rubygems_version: !ruby/object:Gem::Requirement
93
93
  none: false
94
94
  requirements: