Skip to content
Content Plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test Updates (#2) Jul 5, 2016
.editorconfig Updates (#2) Jul 5, 2016
.gitignore
.npmignore
.travis.yml initial commit Jun 24, 2016
LICENSE.md
README.md
contributing.md
package.json

README.md

PostHTML Content

NPM Deps Tests Coverage Standard Code Style

Flexible content transform for posthtml

Note: This project is in early development, and versioning is a little different. Read this for more details.

Why Should You Care?

Rather than having a separate plugin for each kind of content transform you want to be able to do, why not just have one? Parse natural language, markdown, or whatever else you want with a minimalistic and simple interface 🍻

Install

npm i posthtml-content --save

Note: This project is compatible with node v6+ only

Usage

Start with some html you want to transform in some way. Add an attribute of your choosing to an element that has contents you want to transform.

<p windoge>Please use windows 98</p>

Now pass in an object to posthtml-content. Each key in the object represents an attribute that will be searched for in the html. The value is a function that will get that element's contents as a string, and replace the contents with whatever string is returned from the function.

const content = require('posthtml-content')({
  windoge: (str) => str.replace(/windows/g, 'winDOGE')
})

posthtml([plugin]).process(html)

The plugin will remove the custom attribute from the element and replace its contents with your transformed version. Wow!

<p>Please use winDOGE 98</p>

If you return an A+ compliant promise from your content function, it will resolve and work in your templates as well.

You can use external libraries for this as well, no problem. Just make sure you are passing in a function that takes a string and returns a string. You might have to wrap the library function if it doesn't behave like this, but it will work with anything that transforms content.

Examples

Markdown

<p md>Wow, it's **Markdown**!</p>
const markdown = require('markdown-it')(/* options */)

const plugin = require('posthtml-content')({
  md: (md) => markdown.renderInline(md)
})

posthtml([plugin]).process(html)
<p>Wow, it's <strong>Markdown</strong>!</p>

PostCSS

<style postcss>
  .test
    text-transform: uppercase;

    &__hello
      color: red;

    &__world
      color: blue;
</style>
const postcss = require('postcss')([ require('postcss-nested')() ])
const options = { parser: require('sugarss'), map: false }

const plugin = require('posthtml-content')({
  postcss: (css) => postcss.process(css, options).css
})

posthtml([plugin]).process(html)
<style>
  .test {
    text-transform: uppercase;
  }

  .test__hello {
    color: red;
  }

  .test__world {
    color: blue;
  }
</style>

Babel

<script babel>
  const hello = 'Hello World!'
  let greeter = {
    greet (msg) { alert (msg) }
  }
  greeter.greet(hello)
</script>
const babel = require('babel-core')
const options = { presets: ["es2015"], sourceMaps: false }

const plugin = require('posthtml-content')({
  babel: (js) => babel.transform(js, options).code
})

posthtml([plugin]).process(html)
<script>
  'use strict';
  var hello = "Hello World!";
  var greeter = {
    greet: function greet (msg) {
      alert(msg);
    };
  };
  greeter.greet(hello);
</script>

Return a Promise

<style postcss>
  .test
    text-transform: uppercase;

    &__hello
      color: red;

    &__world
      color: blue;
</style>
const postcss = require('postcss')([ require('postcss-nested')() ])
const options = { parser: require('sugarss'), map: false }

const plugin = require('posthtml-content')({
  postcss: (css) => {
    return postcss.process(css, options).then((res) => res.css)
  }
})

posthtml([plugin]).process(html)

License & Contributing

You can’t perform that action at this time.