less_assets 0.1.0 → 0.2.0

data/README.md

@@ -87,9 +87,9 @@ By default, `name_filter` strips the leading `templates/`, `stylesheets/` and `s
 
 ## Render
 
-When you have a template `app/assets/javascripts/style/header.lesst` with the given content:
+When you have a template named `header` with the given content:
 
-```scss
+```SCSS
 .header (@r) {
     padding: @r * 2;
     border-radius: @r;
@@ -121,7 +121,7 @@ which will return in the following CSS
 
 whereas rendering
 
-```javascript
+```JavaScript
 JSST['header']({ radius: '20px' })
 ```
 
@@ -135,11 +135,71 @@ will result in
 }
 ```
 
-It's up to you to apply the generated CSS to a style element, Less Assets doesn't provide any helper methods yet.
+### Default variables
+
+You do not need to define the variables in the less stylesheet, as they will be created before compilation, but you
+may want to have them added to provide default variables.
+
+Given the following style template named `box`
+
+```SCSS
+@box-margin: 10px;
+@box-padding: 10px;
+
+.box {
+  margin: @box-margin;
+  padding: @box-padding;
+}
+```
+
+Rendered with only some of the variables passed to the template
+
+```JavaScript
+JSST['box']({ 'box-margin': '20px' })
+```
+
+will use the default values that result in
+
+```CSS
+.box {
+  margin: 20px;
+  padding: 10px;
+}
+```
+
+### Applying the styles to a document
+
+You can let Less Assets to manage the styles on a HTML document by passing the document to the style template.
+
+Given the following Less style template named `divider`:
+
+```CSS
+div {
+  margin-top: @m;
+}
+```
+
+that is compiled with
+
+```JavaScript
+JSST['header']({ m: '20px' }, document)
+```
+
+will create a new style tag in the head of the document:
+
+```HTML
+<style id="less_asset_header">
+  div {
+    margin-top: 20px;
+  }
+</style>
+```
+
+Re-render the same style template again with other variables will replace the existing styles with the new ones.
 
 ## Author
 
-Developed by Michael Kessler, sponsored by [mksoft.ch](https://mksoft.ch).
+Developed by Michael Kessler, [mksoft.ch](https://mksoft.ch).
 
 If you like Less Assets, you can watch the repository at [GitHub](https://github.com/netzpirat/less_assets) and
 follow [@netzpirat](https://twitter.com/#!/netzpirat) on Twitter for project updates.

data/lib/less_assets/less_template.rb

@@ -57,7 +57,7 @@ module LessAssets
       <<-JST
 (function() {
   #{ self.class.namespace } || (#{ self.class.namespace } = {});
-  #{ self.class.namespace }['#{ name }'] = function(v) { return LessAssets.render(\"#{ data.gsub(/\n/, "\\n") }\", v); };
+  #{ self.class.namespace }['#{ name }'] = function(v, e) { return LessAssets.render('#{ name }', \"#{ data.gsub(/\n/, "\\n") }\", v, e); };
 }).call(this);
       JST
     end

data/lib/less_assets/version.rb

@@ -1,5 +1,5 @@
 # coding: UTF-8
 
 module LessAssets
-  VERSION = '0.1.0' unless defined?(LessAssets::VERSION)
+  VERSION = '0.2.0' unless defined?(LessAssets::VERSION)
 end

data/vendor/assets/javascripts/less_assets.js.coffee

@@ -6,17 +6,56 @@ class window.LessAssets
   #
   # @param [String] css the less css
   # @param [Object] variables the less variables
+  # @param [HTMLDocument] element a target element to add the styles
+  # @return [String] the css styles
   #
-  @render: (css, variables) ->
+  @render: (name, css, variables = {}, doc = undefined) ->
     result = undefined
+    newVariables = {}
 
+    # Replace existing less variables
+    #
+    for variable, value of variables
+      existing = ///@#{ variable }:\s*[^;]+;///
+
+      if existing.test css
+        css = css.replace existing, "@#{ variable }: #{ value };"
+      else
+        newVariables[variable] = value
+
+    # Add bew less variables
+    #
     style = ''
-    style += "@#{ variable }: #{ value };\n" for variable, value of variables
+    style += "@#{ variable }: #{ value };\n" for variable, value of newVariables
     style += css
 
+    # Compile the less stylesheet
+    #
     less.Parser().parse style, (err, tree) ->
       throw err if err
 
       result = tree.toCSS()
 
+    # Add a style tag with the css when a document is given
+    #
+    if doc instanceof HTMLDocument
+      id = "less_asset_#{ name.replace(/[^A-Za-z0-1_/-]/, '').replace(/[/-]/, '_') }"
+
+      style = document.getElementById(id) || document.createElement 'style'
+      style.type = 'text/css'
+      style.id = id
+
+      rules = document.createTextNode result
+
+      if style.styleSheet
+        style.styleSheet.cssText = rules.nodeValue
+      else
+        while style.hasChildNodes()
+          style.removeChild style.lastChild
+
+        style.appendChild rules
+
+      head = document.getElementsByTagName('head')[0]
+      head.appendChild(style);
+
     result

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: less_assets
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-16 00:00:00.000000000 Z
+date: 2012-05-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tilt
@@ -59,118 +59,6 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: railties
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '3.1'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '3.1'
-- !ruby/object:Gem::Dependency
-  name: rspec
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: guard-rspec
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: yard
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: redcarpet
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: pry
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: rake
-  requirement: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: '0'
 description: Less JavaScript Style Templates in the asset pipeline.
 email:
 - michi@netzpiraten.ch
@@ -201,7 +89,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 26994244759746071
+      hash: 3705905153218187553
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: