Registry / serialization / postcss-sass

postcss-sass

JSON →
library0.5.0jsnpmunverified

postcss-sass is a PostCSS parser designed to interpret and transform Sass-like syntax, leveraging the `gonzales-pe` library as its core parsing engine. It is crucial to understand that this package acts solely as a parser; it converts Sass source code into an Abstract Syntax Tree (AST) that can then be manipulated by PostCSS plugins. It does *not* compile Sass into standard CSS. The package is currently at version 0.5.0 and is explicitly noted as being "under development," which means full compatibility with all Sass syntax is not guaranteed. Its release cadence is somewhat irregular, often focusing on dependency updates, security fixes, and incremental support for Sass features like media queries and loops. A key differentiator is its ability to enable PostCSS transformations directly on Sass source code, allowing for advanced processing workflows before or without full Sass compilation. The underlying `gonzales-pe` library itself has not been updated in several years, which could imply potential long-term maintenance considerations for `postcss-sass` users.

serializationweb-framework
npm install postcss-sass
github ↗package ↗
INSTALL
IMPORT
SIG · POSTCSS-SASS
P
postcss-sass
serializationjavascriptv0.5.0
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.

postcssSass
✓ const postcssSass = require('postcss-sass');
CommonJS import pattern as demonstrated in the official documentation.
postcssSass
✓ import postcssSass from 'postcss-sass';
✗ import { postcssSass } from 'postcss-sass';
ESM import pattern; the parser module is likely exported as the default.
postcss
✓ const postcss = require('postcss');
The core PostCSS library is a separate, required dependency.

Demonstrates parsing Sass input with `postcss-sass` and transforming it using a custom PostCSS plugin.

const postcss = require('postcss'); const postcssSass = require('postcss-sass'); // A simple PostCSS plugin to reverse selector order const reverseSelectors = postcss.plugin('reverse-selectors', () => { return (css) => { css.walkRules((rule) => { rule.selector = rule.selector.split(',').reverse().join(', '); }); }; }); const sassInput = ` $primary-color: #333; .my-button { color: $primary-color; &:hover { color: lighten($primary-color, 10%); } } .another-element { font-size: 16px; } `; postcss([reverseSelectors]).process(sassInput, { syntax: postcssSass, from: 'input.scss', to: 'output.css' }) .then(result => { console.log('Transformed Sass:\n', result.css); // Expected output shows selectors reversed (e.g., .my-button:hover, .my-button) }) .catch(err => { console.error('Error processing Sass:', err); });
Debug
Known issues
gotchaThis module acts as a parser for Sass syntax, but it does *not* compile Sass into CSS. Its purpose is to allow PostCSS plugins to process Sass source code. You will still need a separate Sass compiler (e.g., Dart Sass, Node-Sass) if you intend to convert Sass to standard CSS.
fix
Understand the role of `postcss-sass` as a parser. For compilation, integrate with a dedicated Sass compiler like Dart Sass or Node-Sass in your build pipeline, often *before* or *after* PostCSS processing, depending on your workflow.
affects: >=0.1.0
gotcha`postcss-sass` is explicitly stated as 'under development' and 'not all Sass syntax supported'. This means some advanced or newer Sass features might not be parsed correctly, leading to unexpected behavior or errors.
fix
Consult the project's GitHub repository for the latest information on supported Sass features. For unsupported syntax, simplify your Sass or consider alternative PostCSS parsers for SCSS if available (e.g., `postcss-scss` for general SCSS parsing, though it's not a direct replacement for this package's specific parsing approach).
affects: >=0.1.0
gotchaThe underlying `gonzales-pe` parsing library, upon which `postcss-sass` is built, has not been updated in several years (last published March 2020). This could pose a long-term maintenance or security risk, and may limit support for newer Sass language features.
fix
Monitor `postcss-sass` for updates or alternative parsing engines. Be aware that compatibility with very recent Sass features might lag due to the dependency chain. Review `gonzales-pe`'s status if encountering parsing issues.
affects: >=0.1.0
gotchaSecurity updates have been released in versions like v0.4.4 and v0.3.1 to address vulnerabilities (e.g., `hoek` dependency security fix). It is crucial to keep `postcss-sass` and its dependencies up to date.
fix
Regularly update `postcss-sass` and all its dependencies (`npm update postcss-sass` or `yarn upgrade postcss-sass`) to incorporate the latest security patches and ensure project integrity.
affects: >=0.3.1
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'process') (or similar for PostCSS methods)
The core `postcss` library was not correctly installed or imported before attempting to use its `process` method.
fix
Ensure `postcss` is installed (`npm install postcss`) and imported correctly (e.g., `const postcss = require('postcss');`) in your project.
Syntax Error: Unknown at-rule @my-mixin (or similar for unsupported Sass features like maps, loops, etc.)
`postcss-sass` does not support all features of the Sass language, as it is still under development. The parser encountered a Sass construct it doesn't recognize.
fix
Check the `postcss-sass` documentation or GitHub issues for known limitations and supported syntax. Simplify the Sass input to use more basic constructs or standard CSS. Consider processing complex Sass logic with a full Sass compiler before passing the output to PostCSS.
Module not found: Error: Can't resolve 'gonzales-pe' (or similar during installation/runtime)
The `gonzales-pe` dependency, which `postcss-sass` relies on, failed to install correctly or is not being resolved by the module loader.
fix
Try reinstalling `postcss-sass` to ensure its dependencies, including `gonzales-pe`, are properly installed (`npm uninstall postcss-sass && npm install postcss-sass`). Verify your `node_modules` directory for the presence of `gonzales-pe`.
Error: Cannot find module 'postcss-sass' (or similar when importing)
The `postcss-sass` package was not installed or is not resolvable from the current execution context.
fix
Ensure `postcss-sass` is listed in your `package.json` and installed (`npm install postcss-sass` or `yarn add postcss-sass`). Check that the import path is correct and that the module is accessible in your environment.
Upgrade
Version history
0.5.0latest on npm
Audit
Dependencies
postcssrequiredRequired as a peer dependency to process the AST generated by this parser.
gonzales-perequiredThe foundational parsing library used by postcss-sass to interpret Sass syntax.
Agent activity
6 hits · last 30 days
node
6
Resources
githubhttps://github.com/AleshaOleg/postcss-sass ↗
packagehttps://www.npmjs.com/package/postcss-sass ↗
postcss-sass — npm install postcss-sass · libregistry