postcss-styl

postcss-styl

PostCSS 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

The main use of this plugin is to apply the Stylus syntax to linter using PostCSS.

For example, if you want to use this plugin with stylelint, it is used as follows:

1. First, prepare a script that extends postcss-syntax.

   e.g. custom-syntax.js

   // Filename: `custom-syntax.js`
   const syntax = require("postcss-syntax");
   const postcssStyl = require("postcss-styl");
   
   module.exports = syntax({
     stylus: postcssStyl
   });
   

2. You can use the prepared script as shown in the following example.

   • via CLI

   stylelint ... --custom-syntax ./path/to/custom-syntax.js
   

   • use Node.js API

   const stylelint = require("stylelint")
   const customSyntax = require("./path/to/custom-syntax.js")
   
   stylelint.lint({
     customSyntax,
     ...
   })
   

   • with PostCSS

   const postcss = require("postcss")
   const customSyntax = require("./path/to/custom-syntax.js")
   
   postcss([
     require("stylelint"),
     require("reporter")
   ])
     .process(css, {
       from: "lib/app.styl",
       syntax: customSyntax
     })
   })
   

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.

License

See the LICENSE file for license rights and limitations (MIT).