Merge pull request #36 from darcyclarke/develop

Added stylus example and support and updated readme

README.md

@@ -1,11 +1,16 @@
+<<<<<<< HEAD
+DSS
+=======
 ![DSS](http://f.cl.ly/items/1J353X3U172A1u3r2K3b/dss-logo.png)
 
 DSS [![Build Status](https://secure.travis-ci.org/darcyclarke/DSS.png?branch=master)](http://travis-ci.org/darcyclarke/DSS)
+>>>>>>> 308468da85e1653f268dd51ea53e2e3b7101e3f7
 ===
 
 **@version 1.0**
+**@logo [DSS](http://f.cl.ly/items/1J353X3U172A1u3r2K3b/dss-logo.png)**
 
-**DSS**, Documented Style Sheets, is a [Grunt](http://gruntjs.com) plugin that exposes a [KSS](https://github.com/kneath/kss) style of comment blocking and parser of CSS, LESS, SASS and SCSS code for UI documentation generation.
+**DSS**, Documented Style Sheets, is a [Grunt](http://gruntjs.com) plugin that exposes a [KSS](https://github.com/kneath/kss) style of comment blocking and parser of CSS, LESS, STYLUS, SASS and SCSS code for UI documentation generation.
 
 ### Example Comment Block
 
@@ -23,6 +28,57 @@ DSS [![Build Status](https://secure.travis-ci.org/darcyclarke/DSS.png?branch=mas
   *   <button>This is a button</button>
   */ 
 ````
+#### or
+
+```scss
+//
+// @name Button
+// @description Your standard form button.
+// 
+// @state :hover - Highlights when hovering.
+// @state :disabled - Dims the button when disabled.
+// @state .primary - Indicates button is the primary action.
+// @state .smaller - A smaller button
+// 
+// @markup
+//   <button>This is a button</button>
+// 
+````
+
+### Example Generated Object
+
+```javascript
+{
+  "name": "Button",
+  "description": "Your standard form button.",
+  "state": [
+    { 
+      "name": ":hover",
+      "escaped": "pseudo-class-hover",
+      "description": "Highlights when hovering."
+    },
+    {
+      "name": ":disabled",
+      "escaped": "pseudo-class-disabled",
+      "description": "Dims the button when disabled."
+    },
+    {
+      "name": ".primary",
+      "escaped": "primary",
+      "description": "Indicates button is the primary action."
+    },
+    {
+      "name": ".smaller",
+      "escaped": "smaller",
+      "description": "A smaller button"
+    }
+  ],
+  "markup": {
+    "example": "<button>This is a button</button>",
+    "escaped": "&lt;button&gt;This is a button&lt;/button&gt;"
+  }
+}
+````
 
 ## Getting Started
 This plugin requires Grunt `~0.4.0`

example/foo.styl

@@ -0,0 +1,60 @@
+//
+// @name Button
+// @description Your standard form button.
+// 
+// @state :hover - Highlights when hovering.
+// @state :disabled - Dims the button when disabled.
+// @state .primary - Indicates button is the primary action.
+// @state .smaller - A smaller button
+//
+// @markup
+//   <button>This is a button</button>
+//
+button {
+  padding: 5px 15px;
+  line-height: normal;
+  font-family: "Helvetica Neue", Helvetica;
+  font-size: 12px;
+  font-weight: bold;
+  color: #666;
+  text-shadow: 0 1px rgba(255, 255, 255, 0.9);
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  border-bottom-color: #bbb;
+  background: #f5f5f5;
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='$start', endColorstr='$end');
+  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
+  background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  cursor: pointer; 
+}
+
+//
+// @name Anchor Tag
+// @description Your standard link tag.
+// 
+// @state :hover - Background changes when hovering.
+// @state .active - Highlights link when active.
+// 
+// @markup
+//   <a href="#">This is a link</a>
+//
+a {
+  text-decoration: none;
+  color: red;
+  padding: 10px;
+  display: inline-block;
+  background: #efefef;
+  bored-radius: 5px;
+}
+  
+  // Hover
+  a:hover {
+    background: #cccccc;
+  }
+
+  // Active
+  a:active,
+  a.active {
+    background: green;
+  }

tasks/DSS.js

@@ -376,7 +376,7 @@ module.exports = function(grunt) {
           temp = {};
 
         }); 
-        
+                
         // Execute callback with filename and blocks
         callback({ file: options.file, blocks: blocks });