postcss-styl
!NPM license
!NPM version
!NPM downloads
!Build Status
!Coverage StatusPostCSS parser plugin for converting Stylus syntax to PostCSS AST.
::: This plugin is still in an experimental state :::
Installation
npm install -D postcss-styl
Usage
Lint Stylus with stylelint
You can use this PostCSS plugin to apply Stylus syntax to stylelint.You can use it more easily by using it with stylelint-plugin-stylus.
For example, this PostCSS plugin is used as follows:
- First, add
customSyntax
option tostylelint
config file.
e.g. [stylelint.config.js](./stylelint.config.js)
```js
// Filename: `stylelint.config.js`
module.exports = {
overrides: [
{
files: ["*.styl", "**/*.styl", "*.stylus", "**/*.stylus"],
customSyntax: "postcss-styl",
},
],
};
```
- You need to include the stylus in the linting target, as shown in the following example.
- via CLI
```bash
stylelint ./path/to/input.styl
```
- with [VSCode extension]
```js
{
"stylelint.validate": [
...,
// ↓ Add "stylus" language.
"stylus"
]
}
```
Stylus Transformations
Also you can use this parser plugin to apply PostCSS transformations directly to the Stylus source code.For example, Stylus sources can be automatically prefixed using Autoprefixer.
const postcss = require("postcss");
const autoprefixer = require("autoprefixer");
const postcssStyl = require("postcss-styl");
const stylusCode = `
a
transform scale(0.5)
`;
postcss([autoprefixer])
.process(stylusCode, {
syntax: postcssStyl
})
.then(result => {
console.log(result.css);
// ->
// a
// -webkit-transform scale(0.5);
// -moz-transform scale(0.5);
// transform scale(0.5)
});
Contributing
Welcome contributing!Please use GitHub's Issues/PRs.
Development Tools
npm test
runs tests and measures coverage.
AST
You can check the AST online.https://stylus.github.io/postcss-styl/