postcss-comment-annotation

PostCSS Comment Annotation

PostCSS plugin for annotating comments, inspired by and based on morishitter's CSS Annotation.

Install

npm install postcss-comment-annotation

Example

Annotate your CSS with key/value pairs. Keys without a defined value results in a value of true.

/*
@define Foo

@description
Foo is a base component
*/
.foo { }

/*
@define Bar
@parent Foo
@modifier

@description
Bar modifies Foo
*/
.foo-bar { }

Outputs an array to result.commentAnnotations.

[
  {
    "define": "Foo",
    "description": "Foo is a base component"
  }, {
    "define": "Bar",
    "parent": "Foo",
    "modifier": true,
    "description": "Bar modifies Foo"
  }
]

Usage

postcss([
  require('postcss-comment-annotation')({
    prefix: '@'
  })
])

Options

prefix

Takes string. Define the prefix to signify keys in your annotations. Default value: @.

Changelog

Changelog

v1.0.0 - 2017-5-17

Added

• Tests
• Keys/values with prefix are pushed to commentAnnotations array
• Keys with no value supplied are given value of true