Registry / web-framework / postcss-safe-parser

postcss-safe-parser

JSON →
library7.0.1jsnpmunverified

postcss-safe-parser is a fault-tolerant CSS parser designed specifically for use with PostCSS. It excels at parsing virtually any CSS input, including highly malformed or 'hacky' legacy code often encountered in historical examples or real-world unvalidated user input, and is particularly valuable for applications like live demo tools. The current stable version, 7.0.1, indicates active development and maintenance, typically aligning with the release cadence of the broader PostCSS ecosystem. Its primary differentiator is its robust error recovery mechanism, enabling it to process and recover from CSS syntax errors that would cause standard parsers to fail, thus providing a resilient parsing solution for environments where input validity cannot be guaranteed. It requires Node.js version 18 or higher and `postcss` version `^8.4.31` as a peer dependency.

npm install postcss-safe-parser
INSTALL
IMPORT
SIG · POSTCSS-SAFE-PARSE
P
postcss-safe-parser
web-frameworkjavascriptv7.0.1
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
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 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

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

safeParser
import safeParser from 'postcss-safe-parser'
import { safeParser } from 'postcss-safe-parser'
The default export is the parser function. Named import `{ safeParser }` is incorrect.
safeParser
const safeParser = require('postcss-safe-parser')
While Node.js 18+ encourages ESM, CommonJS `require` is still supported for compatibility.
PostCSS plugin usage
postcss([ /* other plugins */ ], { parser: safeParser })
The `safeParser` function is passed directly to the `parser` option of the PostCSS processor.

Demonstrates how to use `postcss-safe-parser` with `postcss` to parse and process malformed CSS, showcasing its fault-tolerant capabilities.

import postcss from 'postcss'; import safeParser from 'postcss-safe-parser'; async function processUnsafeCss() { const malformedCss = ` .bad-class { color: red; font-size: 16px; width: calc(100% - 20px; background: url('missing-quote.png); /* Missing closing brace .another-class { display: block; } `; try { const result = await postcss().process(malformedCss, { parser: safeParser, from: undefined // Prevents 'Cannot read properties of undefined' if input source is unknown }); console.log('Original CSS:\n', malformedCss); console.log('\nSuccessfully parsed and stringified CSS:\n', result.css); console.log('\nMessages (e.g., warnings/errors handled by parser):\n', result.messages); } catch (error) { console.error('An unexpected error occurred during processing:', error); } } processUnsafeCss();
Debug
Known issues
breakingVersion 7.x requires Node.js 18.0 or newer. Older Node.js versions are not supported and will lead to errors or unexpected behavior.
fix
Upgrade your Node.js environment to version 18.0 or higher. You can use a tool like `nvm` to manage Node.js versions.
affects: >=7.0.0
breaking`postcss-safe-parser` version 7.x requires `postcss` version `^8.4.31` as a peer dependency. Incompatible `postcss` versions can lead to runtime errors or incorrect parsing.
fix
Ensure that your project explicitly installs `postcss@^8.4.31` (or a compatible version). Run `npm install postcss@^8.4.31` or `yarn add postcss@^8.4.31`.
affects: >=7.0.0
gotchaWhile `postcss-safe-parser` is fault-tolerant, it will still generate warnings or fix details via `result.messages` if syntax errors are encountered. These messages should be reviewed for potential issues or unexpected parser corrections.
fix
Always inspect the `result.messages` array after processing with `postcss-safe-parser` to understand what corrections or warnings were generated. Implement logic to handle or log these messages as appropriate.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'error')
This often occurs when `postcss().process` is called without a `from` option, and the parser attempts to access properties of a non-existent source map or input object.
fix
When processing a raw string without a known file path, explicitly set `from: undefined` in the PostCSS options: `postcss().process(css, { parser: safeParser, from: undefined })`.
Error: Cannot find module 'postcss'
The `postcss` package is a peer dependency of `postcss-safe-parser` and must be installed separately in your project.
fix
Install `postcss` in your project: `npm install postcss` or `yarn add postcss`.
TypeError: (0 , _postcssSafeparser.default) is not a function
This error typically indicates an incorrect import statement, trying to access a named export that doesn't exist, or incorrectly handling a default export from a CommonJS module in an ESM context.
fix
Ensure you are using the correct default import: `import safeParser from 'postcss-safe-parser'` for ESM, or `const safeParser = require('postcss-safe-parser')` for CommonJS.
Upgrade
Version history
7.0.1latest on npm
Audit
Dependencies
postcssrequiredCore PostCSS library required for processing the AST generated by the safe parser.
Agent activity
2 hits · last 30 days
node
2
Resources
postcss-safe-parser — npm install postcss-safe-parser · libregistry