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

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

Usage

Run CLI connect command using the plugin.

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

Configuration

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):

{
    "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.

/**
 * 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.

/**
 * Ignored
 */

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

Snippets

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

Inline

/**
 * Description with inline snippet
 *
 * @snippet <div class="example"></div> 
 */
.example {
}

/**
 * Description with inline snippet, with language identifier
 *
 * @snippet html
 *   <div class="example"></div> 
 */
.example {
}

Separate File

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.

/**
 * 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.