@stylelint/postcss-markdown

What is @stylelint/postcss-markdown?

@stylelint/postcss-markdown is a plugin for Stylelint that allows you to lint CSS within Markdown files. This is particularly useful for projects that include CSS code snippets in Markdown documentation, ensuring that the CSS code adheres to your Stylelint configuration.

What are @stylelint/postcss-markdown's main functionalities?

Linting CSS in Markdown

This configuration extends the standard Stylelint configuration and applies it to all Markdown files in the project. The `customSyntax` option is set to `@stylelint/postcss-markdown`, enabling Stylelint to parse and lint CSS code blocks within Markdown files.

module.exports = {
  "extends": "stylelint-config-standard",
  "overrides": [
    {
      "files": ["**/*.md"],
      "customSyntax": "@stylelint/postcss-markdown"
    }
  ]
};

Other packages similar to @stylelint/postcss-markdown

stylelint-processor-markdown

stylelint-processor-markdown is another Stylelint processor that allows you to lint CSS within Markdown files. It works similarly to @stylelint/postcss-markdown but is a separate package. Both packages serve the same purpose, but @stylelint/postcss-markdown is more integrated with the PostCSS ecosystem.

remark-lint

remark-lint is a plugin for remark, a Markdown processor, that provides linting for Markdown files. While it doesn't specifically target CSS within Markdown, it can be extended with plugins to achieve similar functionality. It is more focused on the Markdown content itself rather than the embedded CSS.

README

PostCSS Markdown Syntax

PostCSS Syntax for parsing Markdown

Getting Started

First thing's first, install the module:

npm install postcss-syntax 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-syntax")({
  // Enable support for HTML (default: true) See: https://github.com/gucong3000/postcss-html
  htmlInMd: true,
  // syntax for parse scss (non-required options)
  scss: require("postcss-scss"),
  // syntax for parse less (non-required options)
  less: require("postcss-less"),
  // syntax for parse css blocks (non-required options)
  css: require("postcss-safe-parser")
});
var autoprefixer = require("autoprefixer");
postcss([autoprefixer])
  .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;
  });

input:

# title

```css
::placeholder {
	color: gray;
}
```

output:

# title

```css
::-webkit-input-placeholder {
	color: gray;
}
:-ms-input-placeholder {
	color: gray;
}
::-ms-input-placeholder {
	color: gray;
}
::placeholder {
	color: gray;
}
```

If you want support SCSS/SASS/LESS/SugarSS syntax, you need to install these module:

• SCSS: postcss-scss
• SASS: postcss-sass
• LESS: postcss-less
• SugarSS: sugarss

Advanced Use Cases

See: postcss-syntax

Style Transformations

The main use case of this plugin is apply PostCSS transformations to CSS (and CSS-like) code blocks in markdown file.

Changelog

0.36.2

• Fixed: outdated remark dependencies