SC5 / sc5-styleguide

Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation
http://styleguide.sc5.io/
MIT License
1.26k stars 167 forks source link

No components added to the style guide created via CLI #1010

Closed tschofen closed 8 years ago

tschofen commented 8 years ago

I'm trying to use the CLI to generate a style guide (part of a larger node app). I created a primitive test to see how I needed to set it up for our larger project. When I generate the style guide, the less file is processed, but the only link I see is the 'Overview'.

Any idea what I'm doing wrong?

The sections array inside the generated styleguide.json file is empty, but variables from the less file appear:

{
  "sections": [],
  "variables": [
    {
      "name": "padding-base-horizontal",
      "value": "5px",
      "line": 1,
      "file": "test.less",
      "fileHash": "1051f5b877fc0f02d591b2835485c592"
    },
    {
      "name": "padding-base-vertical",
      "value": "5px",
      "line": 2,
      "file": "test.less",
      "fileHash": "1051f5b877fc0f02d591b2835485c592"
    }
  ],
  "section": [],
  "config": {
    "appRoot": "",
    "commonClass": "",
    "title": "TWA Styleguide",
    "disableEncapsulation": false,
    "disableHtml5Mode": false,
    "readOnly": false,
    "sideNav": false,
    "additionalNgDependencies": false
  }
}

My folder structure is primitive. It is just a simple test:

The styleguide.js (that controls the CLI options) is as simple as possible:

#!/usr/bin/env node
 var styleguide = require('sc5-styleguide/lib/modules/cli/styleguide-cli');
 styleguide({
     // Styleguide title
     title: 'My Styleguide',

     // Styleguide overview path
     overviewPath: 'homepage.md',

     // KSS source material
     kssSource: 'test.less',

     //css of the actual app
     styleSource: 'source.css',

     // Output path
     output: 'styleguide',

     parsers: {
       less: 'less'
     },

     // Serve
     server: true
 });

and the test.less is just a simple test of a less file

@padding-base-horizontal: 5px;
@padding-base-vertical: 5px;
@state-warning-bg: yellow;
@state-warning-text: red;
@state-warning-border: orange;
@padding-small-horizontal: 3px;
@font-size-large: 20px;

//Layout
//
//Structural aspects of the UI layout
//
//Weight: -10
//
//Styleguide Layout

// View
// 
// The view associated with a TWA view
// 
// .view-indented   - variant for mostly uib-collapsable on the member profile page
// 
// Markup:
// <div class="view {{modifier_class}}">
//  <div class="view-body">Content</div>
// </div>
// 
// Styleguide Layout.View

.view-indented{
  .view-body{
    margin-left: @padding-base-horizontal * 1.5;
    .table {
      margin-left: -2px;
      margin-top: @padding-base-vertical;
      margin-bottom: @padding-base-vertical;
    }
  }
}

Running node v6.4.0

tschofen commented 8 years ago

Turns out, that KSS alternate style guide references are not supported. Only numeric references work.

// Styleguide Layout.View // Style guide Layout.View // Style guide Layout - View

Is that a bug?