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 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,5 @@
1
+ # coding: UTF-8
2
+
3
+ module StylusAssets
4
+ VERSION = '0.2.0' unless defined?(StylusAssets::VERSION)
5
+ end
@@ -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