stylus_assets 0.2.0
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/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 [](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
|