{"library":"postcss-styl","title":"PostCSS Stylus Parser","description":"postcss-styl is a PostCSS parser plugin designed to convert Stylus syntax into a PostCSS Abstract Syntax Tree (AST). This allows developers to process Stylus code using the extensive PostCSS plugin ecosystem, enabling transformations like autoprefixing, minification, or custom linting. The current stable version is 0.12.3. The package maintains a fairly active release cadence, primarily addressing bug fixes related to AST correctness and stringification, as seen in recent versions. Its primary differentiator is providing a bridge between the Stylus language and PostCSS, allowing Stylus users to leverage PostCSS tools directly on their `.styl` files, most notably for integration with linters like stylelint.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-styl"],"cli":null},"imports":["const postcssStyl = require('postcss-styl');","customSyntax: 'postcss-styl',","postcss([plugin]).process(css, { syntax: postcssStyl });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"const postcss = require('postcss');\nconst autoprefixer = require('autoprefixer');\nconst postcssStyl = require('postcss-styl');\n\nconst stylusCode = `\na\n  color red\n  display flex\n  transform scale(0.5)\n  &__element\n    font-size 14px\n`;\n\nasync function processStylus() {\n  try {\n    const result = await postcss([autoprefixer])\n      .process(stylusCode, {\n        syntax: postcssStyl,\n        from: 'input.styl',\n        to: 'output.css'\n      });\n    console.log(result.css);\n    // Expected output:\n    // a\n    //   color red;\n    //   display -webkit-box;\n    //   display -ms-flexbox;\n    //   display flex;\n    //   -webkit-transform scale(0.5);\n    //   -moz-transform scale(0.5);\n    //   transform scale(0.5);\n    //   &__element {\n    //     font-size 14px;\n    //   }\n  } catch (error) {\n    console.error('Error processing Stylus:', error);\n  }\n}\n\nprocessStylus();","lang":"javascript","description":"This quickstart demonstrates how to use `postcss-styl` to parse Stylus code and apply PostCSS transformations, specifically using `autoprefixer`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}