stylus_assets 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/LICENSE +19 -0
- data/README.md +259 -0
- data/lib/stylus_assets/engine.rb +21 -0
- data/lib/stylus_assets/stylus_template.rb +67 -0
- data/lib/stylus_assets/version.rb +5 -0
- data/lib/stylus_assets.rb +18 -0
- data/vendor/assets/javascripts/stylus.js +13512 -0
- data/vendor/assets/javascripts/stylus_assets.js.coffee +296 -0
- metadata +105 -0
data/LICENSE
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
Copyright (c) 2012 Michael Kessler <michi@netzpiraten.ch>
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
5
|
+
in the Software without restriction, including without limitation the rights
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
8
|
+
furnished to do so, subject to the following conditions:
|
9
|
+
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
11
|
+
all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
19
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,259 @@
|
|
1
|
+
# Stylus Assets [![Build Status](https://secure.travis-ci.org/netzpirat/stylus_assets.png)](http://travis-ci.org/netzpirat/stylus_assets)
|
2
|
+
|
3
|
+
[Stylus](https://github.com/learnboost/stylus) JavaScript Templates (JSST) in the Rails asset pipeline or as Tilt
|
4
|
+
template. It's like a JavaScript template, but for generating dynamic CSS styles instead of HTML.
|
5
|
+
|
6
|
+
If you just want to render your Stylus stylesheets in the Rails backend and deliver the CSS through the asset pipeline,
|
7
|
+
have a look at [Ruby Stylus](https://github.com/lucasmazza/ruby-stylus).
|
8
|
+
|
9
|
+
Tested on MRI Ruby 1.8.7, 1.9.2, 1.9.3, REE and the latest version of JRuby.
|
10
|
+
|
11
|
+
## Why a Style template?
|
12
|
+
|
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
|
+
convert them dynamically to CSS and have nice style logic in the template instead of code that manipulates the DOM
|
15
|
+
style attributes.
|
16
|
+
|
17
|
+
I also wrote a JavaScript Style Template for [Less](http://lesscss.org/), see
|
18
|
+
[Less_Assets](https://github.com/netzpirat/less_assets).
|
19
|
+
|
20
|
+
## Installation
|
21
|
+
|
22
|
+
The simplest way to install Stylus Assets is to use [Bundler](http://gembundler.com/).
|
23
|
+
Add `stylus_assets` to your `Gemfile`:
|
24
|
+
|
25
|
+
```ruby
|
26
|
+
group :assets do
|
27
|
+
gem 'stylus_assets'
|
28
|
+
end
|
29
|
+
```
|
30
|
+
|
31
|
+
And require the `stylus` and `stylus_assets` in your `app/assets/javascripts/application.js.coffee`:
|
32
|
+
|
33
|
+
```coffeescript
|
34
|
+
#= require stylus
|
35
|
+
#= require stylus_assets
|
36
|
+
```
|
37
|
+
|
38
|
+
This provides the stylus.js parser to parse your stylesheets in the browser and the StylusAssets renderer for adding the
|
39
|
+
variables at render time.
|
40
|
+
|
41
|
+
Please have a look at the [CHANGELOG](https://github.com/netzpirat/stylus_assets/blob/master/CHANGELOG.md) when
|
42
|
+
upgrading to a newer Stylus Assets version.
|
43
|
+
|
44
|
+
## Usage
|
45
|
+
|
46
|
+
You can place all your Stylus templates in the `app/assets/javascripts/styles` directory and include them from your
|
47
|
+
`app/assets/javascripts/application.js.coffee`:
|
48
|
+
|
49
|
+
```coffeescript
|
50
|
+
#= require_tree ./styles
|
51
|
+
```
|
52
|
+
|
53
|
+
Because Stylus Assets provides a default template name filter, the `styles/`, `stylesheet/` and `templates/` prefix will
|
54
|
+
be automatically removed.
|
55
|
+
|
56
|
+
## Configuration
|
57
|
+
|
58
|
+
Sprockets will cache your templates after compiling and will only recompile them when the content of the template has
|
59
|
+
changed, thus if you change to your configuration, the new settings will not be applied to templates already compiled.
|
60
|
+
You can clear the Sprockets cache with:
|
61
|
+
|
62
|
+
```Bash
|
63
|
+
rake assets:clean
|
64
|
+
```
|
65
|
+
|
66
|
+
### Template namespace
|
67
|
+
|
68
|
+
By default all Stylus templates are registered under the `JSST` namespace, which stands for JavaScript style template.
|
69
|
+
If you prefer another namespace, you can set it in an initializer:
|
70
|
+
|
71
|
+
```ruby
|
72
|
+
StylusAssets::StylusTemplate.namespace = `window.Styles`
|
73
|
+
```
|
74
|
+
|
75
|
+
### Template name
|
76
|
+
|
77
|
+
The name under which the template can be addressed in the namespace depends not only from the filename, but also on
|
78
|
+
the directory name by default.
|
79
|
+
|
80
|
+
The following examples assumes a configured namespace `window.JSST` and the asset template directory
|
81
|
+
`app/assets/javascripts/styles`:
|
82
|
+
|
83
|
+
* `app/assets/javascripts/styles/document.stylt` will become `JSST['document']`
|
84
|
+
* `app/assets/javascripts/styles/editor/zone.stylt` will become `JSST['editor/zone']`
|
85
|
+
* `app/assets/javascripts/styles/shared/general/headers.stylt` will become `JSST['shared/general/headers']`
|
86
|
+
|
87
|
+
#### Template name filter
|
88
|
+
|
89
|
+
If you wish to put the templates in a different location, you may want to modify `name_filter` in an initializer.
|
90
|
+
|
91
|
+
```ruby
|
92
|
+
StylusAssets::StylusTemplate.name_filter = lambda { |n| n.sub /^(templates|styles|stylesheets)\//, '' }
|
93
|
+
```
|
94
|
+
|
95
|
+
By default, `name_filter` strips the leading `templates/`, `stylesheets/` and `styles/` directory off of the name.
|
96
|
+
|
97
|
+
## Render
|
98
|
+
|
99
|
+
When you have a template named `header` with the given content:
|
100
|
+
|
101
|
+
```SCSS
|
102
|
+
header(r)
|
103
|
+
padding: r * 2
|
104
|
+
border-radius: r
|
105
|
+
|
106
|
+
if r > 10
|
107
|
+
margin-top: 3 * @r
|
108
|
+
|
109
|
+
#header
|
110
|
+
header(radius)
|
111
|
+
```
|
112
|
+
|
113
|
+
You can render the style template and pass the variables to be used:
|
114
|
+
|
115
|
+
```javascript
|
116
|
+
JSST['header']({ radius: '10px' })
|
117
|
+
```
|
118
|
+
|
119
|
+
which will return in the following CSS
|
120
|
+
|
121
|
+
```CSS
|
122
|
+
#header {
|
123
|
+
margin: 20px;
|
124
|
+
border-radius: 10px;
|
125
|
+
}
|
126
|
+
```
|
127
|
+
|
128
|
+
whereas rendering
|
129
|
+
|
130
|
+
```JavaScript
|
131
|
+
JSST['header']({ radius: '20px' })
|
132
|
+
```
|
133
|
+
|
134
|
+
will result in
|
135
|
+
|
136
|
+
```CSS
|
137
|
+
#header {
|
138
|
+
padding: 40px;
|
139
|
+
border-radius: 20px;
|
140
|
+
margin-top: 60px;
|
141
|
+
}
|
142
|
+
```
|
143
|
+
|
144
|
+
### Default variables
|
145
|
+
|
146
|
+
You do not need to define the variables in the Stylus stylesheet, as they will be created before compilation, but you
|
147
|
+
may want to have them added to provide default variables.
|
148
|
+
|
149
|
+
Given the following style template named `box`
|
150
|
+
|
151
|
+
```SCSS
|
152
|
+
box-margin = 10px
|
153
|
+
box-padding = 10px
|
154
|
+
|
155
|
+
.box
|
156
|
+
margin: @box-margin
|
157
|
+
padding: @box-padding
|
158
|
+
```
|
159
|
+
|
160
|
+
Rendered with only some of the variables passed to the template
|
161
|
+
|
162
|
+
```JavaScript
|
163
|
+
JSST['box']({ 'box-margin': '20px' })
|
164
|
+
```
|
165
|
+
|
166
|
+
will use the default values that results in
|
167
|
+
|
168
|
+
```CSS
|
169
|
+
.box {
|
170
|
+
margin: 20px;
|
171
|
+
padding: 10px;
|
172
|
+
}
|
173
|
+
```
|
174
|
+
|
175
|
+
### Applying the styles to a document
|
176
|
+
|
177
|
+
You can let Stylus Assets to manage the styles on a HTML document by passing the document to the style template.
|
178
|
+
|
179
|
+
Given the following Stylus style template named `divider`:
|
180
|
+
|
181
|
+
```CSS
|
182
|
+
div {
|
183
|
+
margin-top: m;
|
184
|
+
}
|
185
|
+
```
|
186
|
+
|
187
|
+
that is compiled with
|
188
|
+
|
189
|
+
```JavaScript
|
190
|
+
JSST['divider']({ m: '20px' }, document)
|
191
|
+
```
|
192
|
+
|
193
|
+
will create a new style tag in the head of the document:
|
194
|
+
|
195
|
+
```HTML
|
196
|
+
<style id="stylus-asset-divider">
|
197
|
+
div {
|
198
|
+
margin-top: 20px;
|
199
|
+
}
|
200
|
+
</style>
|
201
|
+
```
|
202
|
+
|
203
|
+
Re-render the same style template again with other variables will replace the existing styles with the new ones.
|
204
|
+
|
205
|
+
## Author
|
206
|
+
|
207
|
+
Developed by Michael Kessler, [mksoft.ch](https://mksoft.ch).
|
208
|
+
|
209
|
+
If you like Stylus Assets, you can watch the repository at [GitHub](https://github.com/netzpirat/stylus_assets) and
|
210
|
+
follow [@netzpirat](https://twitter.com/#!/netzpirat) on Twitter for project updates.
|
211
|
+
|
212
|
+
## Development
|
213
|
+
|
214
|
+
* Issues and feature request hosted at [GitHub Issues](https://github.com/netzpirat/stylus_assets/issues).
|
215
|
+
* Documentation hosted at [RubyDoc](http://rubydoc.info/github/netzpirat/stylus_assets/master/frames).
|
216
|
+
* Source hosted at [GitHub](https://github.com/netzpirat/stylus_assets).
|
217
|
+
|
218
|
+
Pull requests are very welcome! Please try to follow these simple rules if applicable:
|
219
|
+
|
220
|
+
* Please create a topic branch for every separate change you make.
|
221
|
+
* Make sure your patches are well tested. All specs must pass.
|
222
|
+
* Update the [Yard](http://yardoc.org/) documentation.
|
223
|
+
* Update the README.
|
224
|
+
* Update the CHANGELOG for noteworthy changes.
|
225
|
+
* Please **do not change** the version number.
|
226
|
+
|
227
|
+
## Contributors
|
228
|
+
|
229
|
+
See the [CHANGELOG](https://github.com/netzpirat/stylus_assets/blob/master/CHANGELOG.md) and the GitHub list of
|
230
|
+
[contributors](https://github.com/netzpirat/stylus_assets/contributors).
|
231
|
+
|
232
|
+
## Acknowledgement
|
233
|
+
|
234
|
+
* [TJ Holowaychuk](https://github.com/visionmedia) for creating Stylus, the expressive, robust, feature-rich CSS language.
|
235
|
+
|
236
|
+
## License
|
237
|
+
|
238
|
+
(The MIT License)
|
239
|
+
|
240
|
+
Copyright (c) 2012 Michael Kessler
|
241
|
+
|
242
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
243
|
+
a copy of this software and associated documentation files (the
|
244
|
+
'Software'), to deal in the Software without restriction, including
|
245
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
246
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
247
|
+
permit persons to whom the Software is furnished to do so, subject to
|
248
|
+
the following conditions:
|
249
|
+
|
250
|
+
The above copyright notice and this permission notice shall be
|
251
|
+
included in all copies or substantial portions of the Software.
|
252
|
+
|
253
|
+
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
254
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
255
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
256
|
+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
257
|
+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
258
|
+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
259
|
+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# coding: UTF-8
|
2
|
+
|
3
|
+
module StylusAssets
|
4
|
+
|
5
|
+
# Hook the less template into a Rails app.
|
6
|
+
#
|
7
|
+
class Engine < Rails::Engine
|
8
|
+
|
9
|
+
config.stylus_assets = ActiveSupport::OrderedOptions.new
|
10
|
+
|
11
|
+
# Initialize Haml Coffee Assets after Sprockets
|
12
|
+
#
|
13
|
+
initializer 'sprockets.stylusassets', :group => :all, :after => 'sprockets.environment' do |app|
|
14
|
+
next unless app.assets
|
15
|
+
|
16
|
+
# Register tilt template
|
17
|
+
app.assets.register_engine '.stylt', StylusTemplate
|
18
|
+
end
|
19
|
+
|
20
|
+
end
|
21
|
+
end
|
@@ -0,0 +1,67 @@
|
|
1
|
+
# coding: UTF-8
|
2
|
+
|
3
|
+
require 'tilt'
|
4
|
+
|
5
|
+
module StylusAssets
|
6
|
+
|
7
|
+
# Stylus template implementation for Tilt.
|
8
|
+
#
|
9
|
+
class StylusTemplate < Tilt::Template
|
10
|
+
|
11
|
+
class << self
|
12
|
+
# A proc that is called to modify the template name used as the
|
13
|
+
# JST key. The proc is passed the name as an argument and should
|
14
|
+
# return the modified name (or unmodified) name.
|
15
|
+
attr_accessor :name_filter
|
16
|
+
|
17
|
+
# The JavaScript Style template namespace
|
18
|
+
attr_accessor :namespace
|
19
|
+
end
|
20
|
+
|
21
|
+
# By default the namespace is JSST (JavaScript Style template)
|
22
|
+
self.namespace = 'window.JSST'
|
23
|
+
|
24
|
+
# By default, remove any leading `templates/`, `styles/` and `stylesheets/` in the name
|
25
|
+
self.name_filter = lambda { |n| n.sub /^(templates|styles|stylesheets)\//, '' }
|
26
|
+
|
27
|
+
# The default mime type of the tilt template
|
28
|
+
self.default_mime_type = 'application/javascript'
|
29
|
+
|
30
|
+
# Test if the compiler is initialized.
|
31
|
+
#
|
32
|
+
# @return [Boolean] the initialization status
|
33
|
+
#
|
34
|
+
def self.engine_initialized?
|
35
|
+
true
|
36
|
+
end
|
37
|
+
|
38
|
+
# Initialize the template engine.
|
39
|
+
#
|
40
|
+
def initialize_engine
|
41
|
+
end
|
42
|
+
|
43
|
+
# Prepare the template
|
44
|
+
#
|
45
|
+
def prepare
|
46
|
+
end
|
47
|
+
|
48
|
+
# Generates the Stylus template wrapped in a JavaScript template
|
49
|
+
#
|
50
|
+
# @param [String] name the template name
|
51
|
+
# @return [String] the less JavaScript template
|
52
|
+
#
|
53
|
+
def evaluate(scope, locals = { }, &block)
|
54
|
+
name = scope.logical_path
|
55
|
+
name = self.class.name_filter.call(name) if self.class.name_filter
|
56
|
+
|
57
|
+
<<-JST
|
58
|
+
(function() {
|
59
|
+
#{ self.class.namespace } || (#{ self.class.namespace } = {});
|
60
|
+
#{ self.class.namespace }['#{ name }'] = function(v, e) { return StylusAssets.render('#{ name }', \"#{ data.gsub(/\n/, "\\n") }\", v, e); };
|
61
|
+
}).call(this);
|
62
|
+
JST
|
63
|
+
end
|
64
|
+
|
65
|
+
end
|
66
|
+
end
|
67
|
+
|
@@ -0,0 +1,18 @@
|
|
1
|
+
# coding: UTF-8
|
2
|
+
|
3
|
+
require 'pathname'
|
4
|
+
|
5
|
+
require 'tilt'
|
6
|
+
require 'sprockets'
|
7
|
+
|
8
|
+
require 'stylus_assets/version'
|
9
|
+
require 'stylus_assets/stylus_template'
|
10
|
+
|
11
|
+
if defined?(Rails)
|
12
|
+
require 'rails'
|
13
|
+
require 'stylus_assets/engine'
|
14
|
+
else
|
15
|
+
require 'sprockets'
|
16
|
+
require 'sprockets/engines'
|
17
|
+
Sprockets.register_engine '.stylt', StylusAssets::StylusTemplate
|
18
|
+
end
|