{"library":"sass-parser","title":"Sass Parser for PostCSS (Dart Sass Wrapper)","description":"sass-parser (current version 0.4.44) is a JavaScript library that provides a PostCSS-compatible API for parsing Sass and CSS. It serves as a wrapper around the official Dart Sass parser, aiming to offer a fully compatible parsing solution for both Sass and indented Sass syntax, which addresses known limitations of previous PostCSS plugins like `postcss-scss`. The project is under active development and, as of its current version, is explicitly not recommended for production use due to its incomplete support for all CSS and Sass syntax features and its lack of support for parsing raw metadata (which is crucial for certain source-to-source transformations). Its release cadence is independently managed but benefits from updates to the underlying Dart Sass project (which is currently at version 1.99.0). This library is primarily for developers building PostCSS plugins or tools that require programmatic access to the Sass Abstract Syntax Tree (AST) with PostCSS compatibility.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install sass-parser"],"cli":null},"imports":["import * as sassParser from 'sass-parser';","import { scss } from 'sass-parser';","const { scss, sass, css } = require('sass-parser');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { scss } from 'sass-parser';\n\nconst rawSass = `@use 'colors';\\n\\nbody {\\n  color: colors.$midnight-blue;\\n}\\n.container {\\n  font-size: 1rem;\\n  padding: 10px;\\n}\\n`;\n\n// Parse the Sass string into a PostCSS-compatible AST\nconst root = scss.parse(rawSass);\n\n// Access and modify the AST using PostCSS-like APIs\nconst styleRule = root.nodes[1]; // Assuming body is the second node\nif (styleRule && styleRule.type === 'rule') {\n  styleRule.selector = '.main-container';\n}\n\n// Access Sass-specific nodes (e.g., @use rule, variable expressions)\nconst useRule = root.nodes[0]; // Assuming @use is the first node\nif (useRule && useRule.type === 'atrule' && useRule.name === 'use') {\n  useRule.namespace = 'c'; // Change namespace from 'colors' to 'c'\n}\n\n// Assuming the variable expression is within the modified style rule\nconst colorDecl = styleRule.nodes.find(node => node.type === 'decl' && node.prop === 'color');\nif (colorDecl && colorDecl.valueExpression && colorDecl.valueExpression.type === 'variable') {\n  colorDecl.valueExpression.namespace = 'c';\n}\n\nconsole.log(root.toString());\n/* Expected Output:\n@use 'colors' as c;\n\n.main-container {\n  color: c.$midnight-blue;\n}\n.container {\n  font-size: 1rem;\n  padding: 10px;\n}\n*/","lang":"typescript","description":"This quickstart demonstrates how to import and use the `scss` parser to transform a Sass string into an Abstract Syntax Tree (AST), then modify the AST using PostCSS-compatible methods, and finally serialize it back to a string. It showcases basic node manipulation and Sass-specific property access.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}