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

You can use this PostCSS plugin to apply Stylus syntax to stylelint.

For example, this PostCSS plugin is used as follows:

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
});

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.resolve("./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).

kekee000/postcss-styl