Zeplin CLI Comments Plugin

Zeplin CLI plugin to generate descriptions and code snippets
from documentation comments. We use this to for (S)CSS themes.


Installation

``sh
npm install --save-dev @dimensional-de/zeplin-cli-comment-connect
`

Usage

Run CLI connect command using the plugin.

`sh
zeplin connect -p @dimensional-de/zeplin-cli-comment-connect
`

$3

| Property | Description |
|----------------------|------------------------------------------------------------------------------|
| snippetPath | A base path for external snippets files that start with /. The default value is snippets.|
| snippetLanguages | A mapping of file extensions to languages. Fallback value is the extension without the dot.| |

Here's a sample configuration file (.zeplin/components.json):

`json
{
"plugins" : [{
"name": "@dimensional-de/zeplin-cli-comment-connect",
"config": {
"snippetPath": "snippets",
"snippetLanguages": {
".js": "javascript"
}
}
}]
}
`

☝️ _Note that after adding the plugin to the configuration file, you don't need to pass it as the -p argument to
the connect command—running zeplin connect should be enough._

Basic Syntax

Add a comment to the component file.

`CSS
/**
* A description for the component
*/
.example {
}
`

The plugin looks for the first comment with a "@zeplin" annotation and falls back
to the first comment of the file.

`CSS
/**
* Ignored
*/

/**
* A description for the component
*
* @zeplin
*/
.example {
}
`

Snippets

Use "@snippet" annotation to provide the example snippet.

$3

`CSS
/**
* Description with inline snippet
*
* @snippet


*/
.example {
}
`

`CSS
/**
* Description with inline snippet, with language identifier
*
* @snippet html
*


*/
.example {
}
`

$3

If the annotation content starts with "/", "./", or "../" it will be treated as
an external file and the language will be mapped from the file extension.

`CSS
/**
* Description with snippet file
*
* @snippet ./example.html
*/
.example {
}
``

About Connected Components

Connected Components in Zeplin lets you access components in your codebase directly on designs in Zeplin, with links to Storybook, GitHub and any other source of documentation based on your workflow. 🧩

Zeplin CLI uses plugins like this one to analyze component source code and publishes a high-level overview to be displayed in Zeplin.