doki

Generate a JSON with your styleguide's data

## Installation ```sh npm install --save doki ```

Basic usage

const Doki = require('doki');

let doki = new Doki('my-css-files/*.scss');
doki.parse('docs/styles.json');

Your .scss file

//
// @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>
//

output JSON`

{
  "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;"
  }
}

Multiples files will generate a array of objects.

Doki API

Doki was built on top of DSS

class Doki(sourceFile)

The constructor accept any patter from glob or an array of files.

const Doki = require('doki');

var doki = new Doki('css/*.css');

doki.parse(outputFile, options)

Generate a new JSON.

var doki = new Doki('css/*.css');

doki.parse('output-file');

doki.parser(name, cb(i, line, block))

DSS, by default, includes 4 parsers for the name, description, state and markup of a comment block. You can add to, or override, these defaults by registering a new parser.

var doki = new Doki('css/*.css');

doki.parser('name', (i, line, block) => line );
doki.parse('output-file');

Styleguide Documentation

@name

// @name Button

@description

// @description Your standard form button.

@state

// @state :hover - Highlights when hovering.

@markup

// @markup
//   <button>This is a button</button>

License

MIT © Filipe LInhares