CSS Documentation parser integration for rendering DSS into SourceJS Specs.
Switch branches/tags
Nothing to show
Clone or download
operatino Merge pull request #4 from ndelangen/patch-1
CHANGE link to DSS project
Latest commit 66afb51 Feb 11, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
core fix spec path calculation Mar 29, 2016
.gitignore 0.1.0 Mar 15, 2015
LICENSE Initial commit Mar 14, 2015
README.md CHANGE link to DSS project Jan 21, 2017
package.json bump version to 0.1.1 Mar 29, 2016


CSS Documentation support for SourceJS

Gitter chat

Appends rendered DSS documentation into SourceJS Spec pages. Watch rendered example Spec and it's source code.

SourceJS plugin (for 0.5.0+ version).


To install middleware, run npm command in sourcejs/user folder:

npm install sourcejs-contrib-dss --save

After restarting your app, middleware will be loaded automatically. To disable it, remove npm module and restart the app.


DSS works as SourceJS middleware, when Spec (documentation page) is requested, plugin is searching CSS files in Spec folder by defined mask.

All found CSS (or LESS/SASS/SCSS/Stylus) will be processed through DSS in runtime, during request.

Here's an example of Spec folder structure


button.css contents:

  * @name Default
  * @state .button-pro_big - Bigger version
  * @markup
  *   <button class="button-pro">Click me</button>

.button-pro {}
.button-pro.button-pro_big {}

  * @name Disabled
  * @state .button-pro_big - Bigger disabled version
  * @markup
  *   <button class="button-pro button-pro_disabled">Click me</button>

.button-pro.button-pro_disabled {}

Spec rendered result (


readme.md contents will be rendered at the top of Spec file. Other file types as index.src or index.jade (with Jade plugin) could also be used.

Note that Spec file and info.json should be present in folder for page to load.


You can configure plugin options from user/options.js:

    core: {},
    assets: {},
    plugins: {
        dss: {
           targetCssMask: '**/*.{css,less,stylus,sass,scss}',
           visibleCode: true,
           templates: {
               sections: path.join(__dirname, '../views/sections.ejs')


Type: String Default value: **/*.{css,less,stylus,sass,scss}

Glob mask for searching CSS files for DSS parsing, starting from requested Spec path (https://github.com/isaacs/node-glob).


Type: Boolean Default: true

Set source_visible to every src-html code containers to show code preview by default. Set to false if you prefer hiding code blocks by default (toggled from menu Show source code).


Type: Object


Type: String Default: path.join(__dirname, '../views/sections.ejs')

Set path to EJS template for rendering DSS JSON result. Currently this plugin uses only one template for sections.

Upcoming features

  • DSS parser caching
  • Pre-build cache (during app start)
  • DSS improvements

Other SourceJS middlewares