PostHTML Comment After Plugin

A PostHTML plug-in that adds comments after HTML elements.

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div>
  </body>
</html>

After:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p><!-- /.wow -->
    </div><!-- /#wrapper.container -->
  </body>
</html>

Install

npm install posthtml posthtml-comment-after --save-dev

Usage

const fs = require('fs');
const posthtml = require('posthtml');
const commentAfter = require('posthtml-comment-after');
 
posthtml()
  .use(commentAfter())
  .process(html)
  .then(result => fs.writeFileSync('./after.html', result.html));

Options

output
- sameline
- id
- class
- idTemplate
- classTemplate
- beforeText
- afterText
- templete
- compiler
- replaceAdjacentHyphens
targetAttribute
match

output.sameline

You can specify whether to insert comments on the same line.

Default

output.sameline: true

Add option:

const option = {
  output: {
    sameline: false
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div>
  </body>
</html>

After: comment is inserted after a line break.

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
      <!-- /.wow -->
    </div>
    <!-- /#wrapper.container -->
  </body>
</html>

output.id
output.class

You can specify display / non-display of id and class name in comment.

Default

output.id: true
output.class: true

Add option:

const option = {
  output: {
    id: true,
    class: false
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => fs.writeFileSync('./after.html', result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div>
  </body>
</html>

After: id name is displayed, and class name is hidden.

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div><!-- /#wrapper -->
  </body>
</html>

Note: If both are set to false, comments will not be inserted.

output.beforeText
output.afterText

You can specify the text to insert before and after the comment.

Default

output.beforeText: '/'
output.afterText: ''

Add option:

const option = {
  output: {
    beforeText: 'End of '
    afterText: ' !!!!' 
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => fs.writeFileSync('./after.html', result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div>
  </body>
</html>

After:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p><!-- End of .wow !!!! -->
    </div><!-- End of #wrapper.container !!!! -->
  </body>
</html>

output.idTemplate
output.classTemplate

You can specify how id names and class names are displayed in comments by underscore template format.

Default

output.idTemplate: '#<%= attrs.id %>'
output.classTemplate: '.<% print(attrs.class.trim().replace(/\\s+/g, ".")); %>'

Note: The variables that can be used in the template are PostHTML AST Node properties.

Add option:

const option = {
  output: {
    idTemplate: ' id: <%= attrs.id.toUpperCase() %>',
    classTemplate: ' class: <%= attrs.class.trim().replace(/\\s+/g, ", ") %>' 
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow foooo">OMG</p>
    </div>
  </body>
</html>

After:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow foooo">OMG</p><!-- / class: wow, foooo -->
    </div><!-- / id: WRAPPER class: container -->
  </body>
</html>

output.template

You can specify the comment format freely by underscore template format.

Note: This option overrides output.idTemplate, output.classTemplate, output.beforeText, and output.afterText.

Default

output.template: false

Add option:

const option = {
  output: {
    template: '<% if (attrs.id) { %>=== end of <%= attrs.id %> ===<% } %>'
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div>
  </body>
</html>

After:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow">OMG</p>
    </div><!-- === end of wrapper === -->
  </body>
</html>

Note: If the compiled text is empty, comments are not inserted.

output.compiler

You can freely customize the comment contents with the function you created.

Note: This option overrides output.template, output.idTemplate, output.classTemplate, output.beforeText, and output.afterText.

Default

output.compiler: false

Add option:

function myCompiler (className) {
 
  return function (node) {
    if (!node.attrs || !node.attrs.class) {
      return '';
    }
    
    if (node.attrs.class.split(' ').includes(className)) {
      return `👈 This Element has .${className} !!!`;
    }
    return '';
  };
 
}
 
const option = {
  output: {
    compiler: myCompiler('wow')
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow foooo">OMG</p>
    </div>
  </body>
</html>

After:

<html>
  <body>
    <div id="wrapper" class="container">
      <p class="wow foooo">OMG</p><!-- 👈 This Element has .wow !!! -->
    </div>
  </body>
</html>

Note: If the compiled text is empty, comments are not inserted.

output.replaceAdjacentHyphens

You can specify whether to replace adjacent hyphens.

Default

output.replaceAdjacentHyphens: false

Note: In WHATWG 's HTML, it is now allowed to accept adjacent hyphens in comments. (Update commit of 2016-06-21)

Add option:

const option = {
  output: {
    replaceAdjacentHyphens: true
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div id="wrapper" class="container">
      <a class="btn btn--large">OMG</a>
    </div>
  </body>
</html>

After: If true is specified, it is replaced with '__'.

<html>
  <body>
    <div id="wrapper" class="container">
      <a class="btn btn--large">OMG</a><!-- /.btn.btn__large -->
    </div><!-- #wrapper.container -->
  </body>
</html>

Add option:

const option = {
  output: {
    replaceAdjacentHyphens: '~~'
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

After:

<html>
  <body>
    <div id="wrapper" class="container">
      <a class="btn btn--large">OMG</a><!-- /.btn.btn~~large -->
    </div><!-- #wrapper.container -->
  </body>
</html>

targetAttribute

Insert comments only on elements with specified attributes.

Default

targetAttribute: false

Add option:

const option = {
  targetAttribute: 'data-posthtml-comment-after'
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div class="block" data-posthtml-comment-after>
      <p class="block__elem"></p>
    </div>
    <div class="block block--mod">
      <p class="block__elem" data-posthtml-comment-after></p>
      <p class="block__elem"></p>
    </div>
  </body>
</html>

After:

<html>
  <body>
    <div class="block">
      <p class="block__elem"></p>
    </div><!-- /.block -->
    <div class="block block--mod">
      <p class="block__elem"></p><!-- /.block__elem -->
      <p class="block__elem"></p>
    </div>
  </body>
</html>

match

You can specify expression to match the node.

Default

match: false

Add option:

const option = {
  match: {
    attrs: {
      class: /^(?!.*__).+$/ // match class not including '__'.
    }
  }
};
 
posthtml()
  .use(commentAfter(option))
  .process(html)
  .then(result => console.log(result.html));

Before:

<html>
  <body>
    <div class="block">
      <p class="block__elem"></p>
    </div>
    <div class="block block--mod">
      <p class="block__elem"></p>
      <p class="block__elem"></p>
    </div>
  </body>
</html>

After: comment is inserted only in BEM Block

<html>
  <body>
    <div class="block">
      <p class="block__elem"></p>
    </div><!-- /.block -->
    <div class="block block--mod">
      <p class="block__elem"></p>
      <p class="block__elem"></p>
    </div><!-- /.block.block--mod -->
  </body>
</html>

Contributing

See PostHTML Guidelines and contribution guide.

License

MIT

npm