Have ideas to improve npm?Join in the discussion! »

    postcss-styl

    0.8.0 • Public • Published

    postcss-styl

    NPM license NPM version NPM downloads Build Status Greenkeeper badge Coverage Status

    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.
    You can use it more easily by using it with stylelint-plugin-stylus.

    For example, this PostCSS plugin 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.resolve("./path/to/custom-syntax.js")
        
        stylelint.lint({
          customSyntax,
          // ...
        })
      • with VSCode extension

        {
          "stylelint.customSyntax": "${workspaceFolder}/path/to/custom-syntax.js",
          "stylelint.validate": [
             ...,
             // ↓ Add "stylus" language.
             "stylus"
          ]
        }
      • 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).

    Install

    npm i postcss-styl

    DownloadsWeekly Downloads

    10,166

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    140 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar