postcss-markdown

PostCSS HTML Syntax

PostCSS Syntax for parsing:

• HTML (and HTML-like)
  • PHP
  • Vue component
  • Quick App
• styled components
• Markdown

Getting Started

First thing's first, install the module:

npm install postcss-markdown --save-dev

If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install the corresponding module.

• SCSS: PostCSS-SCSS
• SASS: PostCSS-SASS
• LESS: PostCSS-LESS
• SugarSS: SugarSS

Use Cases

var syntax = require('postcss-markdown');
postcss(plugins).process(source, { syntax: syntax }).then(function (result) {
	// An alias for the result.css property. Use it with syntaxes that generate non-CSS output.
	result.content
});

Style Transformations

The main use case of this plugin is to apply PostCSS transformations to HTML / Markdown / Vue component. For example, if you need to lint SCSS in *.vue with Stylelint; or you need add vendor prefixes to CSS in *.html with Autoprefixer.

Syntax Infer for Stylesheet Files

When passing a stylesheet file, syntaxe can automatically be inferred from the following file extensions: .less, .sass, .scss and .sss, others will be inferred as CSS.

Custom unknown syntax

var syntax = require('postcss-markdown');
postcss(plugins).process(html, {
	syntax: syntax({
		stylus: require('postcss-stylus')
	})
}).then(function (result) {
	result.content
});