Registry / serialization / postcss-styl

postcss-styl

JSON →
library0.12.3jsnpmunverified

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.

serializationhttp-networkingdevops
npm install postcss-styl
github ↗package ↗
INSTALL
IMPORT
SIG · POSTCSS-STYL
P
postcss-styl
serializationjavascriptv0.12.3
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

postcssStyl
✓ const postcssStyl = require('postcss-styl');
✗ import postcssStyl from 'postcss-styl';
Primarily consumed in CommonJS environments or via PostCSS configuration objects. While it might work with `import` for its default export, `require` is the idiomatic way shown in documentation for direct programmatic use.
customSyntax
✓ customSyntax: 'postcss-styl',
✗ customSyntax: require('postcss-styl'),
When used within `stylelint` configuration or `postcss.config.js`, the package name string is passed, not the imported module itself. PostCSS resolves this internally.
syntax
✓ postcss([plugin]).process(css, { syntax: postcssStyl });
When programmatically using PostCSS with this parser, pass the imported `postcssStyl` module directly to the `syntax` option of `postcss.process()`.

This quickstart demonstrates how to use `postcss-styl` to parse Stylus code and apply PostCSS transformations, specifically using `autoprefixer`.

const postcss = require('postcss'); const autoprefixer = require('autoprefixer'); const postcssStyl = require('postcss-styl'); const stylusCode = ` a color red display flex transform scale(0.5) &__element font-size 14px `; async function processStylus() { try { const result = await postcss([autoprefixer]) .process(stylusCode, { syntax: postcssStyl, from: 'input.styl', to: 'output.css' }); console.log(result.css); // Expected output: // a // color red; // display -webkit-box; // display -ms-flexbox; // display flex; // -webkit-transform scale(0.5); // -moz-transform scale(0.5); // transform scale(0.5); // &__element { // font-size 14px; // } } catch (error) { console.error('Error processing Stylus:', error); } } processStylus();
Debug
Known issues
gotchaThe plugin is still explicitly stated as being in an 'experimental state' in its README. Users should be aware that while functional, there might be edge cases or breaking changes not yet fully stabilized.
fix
Refer to the GitHub issues and changelog for known limitations or recent fixes before relying on it for critical production workflows without thorough testing.
affects: >=0.1.0
breakingIn version 0.10.0, the package's GitHub repository moved from `ota-meshi/postcss-styl` to `stylus/postcss-styl`. While this primarily affects development and contribution, users referencing the old repository for issues or documentation links should update them.
fix
Update any direct GitHub links to `https://github.com/stylus/postcss-styl`.
affects: >=0.10.0
gotchaIncorrect AST generation or stringification for certain Stylus constructs (e.g., comments, indentation, nested blocks with trailing comments, linebreak escapes) has been a recurring theme in bug fixes across multiple minor versions. This indicates potential fragility in parsing complex Stylus structures.
fix
Always update to the latest patch release (e.g., `0.12.3`) to benefit from the most recent bug fixes. Thoroughly test with your specific Stylus syntax, especially with comments, nesting, and complex expressions.
affects: <0.12.3
Errors
Common errors & fixes
Unknown word `customSyntax`
Using `customSyntax: require('postcss-styl')` directly in `stylelint` or PostCSS config.
fix
Set `customSyntax: 'postcss-styl'` as a string in your configuration files; PostCSS/stylelint handle the resolution.
Error: Cannot find module 'postcss-styl' when running stylelint.
The `postcss-styl` package is not installed or not resolvable in the current environment.
fix
Ensure `postcss-styl` is installed as a `devDependency` (`npm install -D postcss-styl` or `yarn add -D postcss-styl`) and is accessible from where stylelint is run.
SyntaxError: Missing parentheses in call to 'require' (or similar unexpected token error with import).
Attempting to use ES Modules `import` syntax in a CommonJS-only Node.js environment or configuration file without proper transpilation.
fix
Use `const postcssStyl = require('postcss-styl');` for Node.js scripts unless your environment explicitly supports ESM.
Upgrade
Version history
0.12.3latest on npm
Audit
Dependencies
postcssrequiredThis package is a PostCSS plugin and requires PostCSS to function as a parser or syntax definition.
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/stylus/postcss-styl ↗
packagehttps://www.npmjs.com/package/postcss-styl ↗
postcss-styl — npm install postcss-styl · libregistry