Mail

frontend/node_modules/@adobe/css-tools/docs/API.md

@@ -0,0 +1,314 @@
+# API Reference
+
+## Overview
+
+`@adobe/css-tools` provides a modern CSS parser and stringifier with comprehensive TypeScript support. It can parse CSS into an Abstract Syntax Tree (AST) and convert the AST back to CSS with various formatting options.
+
+## Installation
+
+```bash
+npm install @adobe/css-tools
+```
+
+## Core Functions
+
+### `parse(code, options?)`
+
+Parses CSS code and returns an Abstract Syntax Tree (AST).
+
+#### Parameters
+
+- `code` (string) - The CSS code to parse
+- `options` (object, optional) - Parsing options
+  - `silent` (boolean) - Silently fail on parse errors instead of throwing. When `true`, errors are collected in `ast.stylesheet.parsingErrors`
+  - `source` (string) - File path for better error reporting
+
+#### Returns
+
+- `CssStylesheetAST` - The parsed CSS as an AST
+
+#### Example
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = `
+  .example {
+    color: red;
+    font-size: 16px;
+  }
+`;
+
+const ast = parse(css);
+console.log(ast.stylesheet.rules);
+```
+
+### `stringify(ast, options?)`
+
+Converts a CSS AST back to CSS string with configurable formatting.
+
+#### Parameters
+
+- `ast` (CssStylesheetAST) - The CSS AST to stringify
+- `options` (CompilerOptions, optional) - Stringification options
+  - `indent` (string) - Indentation string (default: `'  '`)
+  - `compress` (boolean) - Whether to compress/minify the output (default: `false`)
+
+#### Returns
+
+- `string` - The formatted CSS string
+
+#### Example
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = '.example { color: red; }';
+const ast = parse(css);
+
+// Pretty print
+const formatted = stringify(ast, { indent: '  ' });
+console.log(formatted);
+// Output:
+// .example {
+//   color: red;
+// }
+
+// Compressed
+const minified = stringify(ast, { compress: true });
+console.log(minified);
+// Output: .example{color:red}
+```
+
+## Type Definitions
+
+### Core Types
+
+#### `CssStylesheetAST`
+The root AST node representing a complete CSS stylesheet.
+
+```typescript
+type CssStylesheetAST = {
+  type: CssTypes.stylesheet;
+  stylesheet: {
+    source?: string;
+    rules: CssRuleAST[];
+    parsingErrors?: CssParseError[];
+  };
+};
+```
+
+#### `CssRuleAST`
+Represents a CSS rule (selector + declarations).
+
+```typescript
+type CssRuleAST = {
+  type: CssTypes.rule;
+  selectors: string[];
+  declarations: CssDeclarationAST[];
+  position?: CssPosition;
+  parent?: CssStylesheetAST;
+};
+```
+
+#### `CssDeclarationAST`
+Represents a CSS property declaration.
+
+```typescript
+type CssDeclarationAST = {
+  type: CssTypes.declaration;
+  property: string;
+  value: string;
+  position?: CssPosition;
+  parent?: CssRuleAST;
+};
+```
+
+#### `CssMediaAST`
+Represents a CSS @media rule.
+
+```typescript
+type CssMediaAST = {
+  type: CssTypes.media;
+  media: string;
+  rules: CssRuleAST[];
+  position?: CssPosition;
+  parent?: CssStylesheetAST;
+};
+```
+
+#### `CssKeyframesAST`
+Represents a CSS @keyframes rule.
+
+```typescript
+type CssKeyframesAST = {
+  type: CssTypes.keyframes;
+  name: string;
+  keyframes: CssKeyframeAST[];
+  position?: CssPosition;
+  parent?: CssStylesheetAST;
+};
+```
+
+#### `CssPosition`
+Represents source position information.
+
+```typescript
+type CssPosition = {
+  source?: string;
+  start: {
+    line: number;
+    column: number;
+  };
+  end: {
+    line: number;
+    column: number;
+  };
+};
+```
+
+#### `CssParseError`
+Represents a parsing error.
+
+```typescript
+type CssParseError = {
+  message: string;
+  reason: string;
+  filename?: string;
+  line: number;
+  column: number;
+  source?: string;
+};
+```
+
+### Compiler Options
+
+#### `CompilerOptions`
+Options for the stringifier.
+
+```typescript
+type CompilerOptions = {
+  indent?: string;    // Default: '  '
+  compress?: boolean; // Default: false
+};
+```
+
+## Error Handling
+
+### Silent Parsing
+
+When parsing malformed CSS, you can use the `silent` option to collect errors instead of throwing:
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const malformedCss = `
+  body { color: red; }
+  { color: blue; } /* Missing selector */
+  .valid { background: green; }
+`;
+
+const result = parse(malformedCss, { silent: true });
+
+if (result.stylesheet.parsingErrors) {
+  result.stylesheet.parsingErrors.forEach(error => {
+    console.log(`Error at line ${error.line}: ${error.message}`);
+  });
+}
+
+// Valid rules are still parsed
+console.log('Valid rules:', result.stylesheet.rules.length);
+```
+
+### Source Tracking
+
+Enable source tracking for better error reporting:
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = 'body { color: red; }';
+const ast = parse(css, { source: 'styles.css' });
+
+const rule = ast.stylesheet.rules[0];
+console.log(rule.position?.source); // "styles.css"
+console.log(rule.position?.start);  // { line: 1, column: 1 }
+console.log(rule.position?.end);    // { line: 1, column: 20 }
+```
+
+## Advanced Usage
+
+### Working with At-Rules
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = `
+  @media (max-width: 768px) {
+    .container {
+      padding: 10px;
+    }
+  }
+  
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+
+const ast = parse(css);
+
+// Access media rules
+const mediaRule = ast.stylesheet.rules.find(rule => rule.type === 'media');
+console.log(mediaRule.media); // "(max-width: 768px)"
+
+// Access keyframes
+const keyframesRule = ast.stylesheet.rules.find(rule => rule.type === 'keyframes');
+console.log(keyframesRule.name); // "fadeIn"
+```
+
+### Custom Formatting
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = '.example{color:red;font-size:16px}';
+const ast = parse(css);
+
+// Custom indentation
+const formatted = stringify(ast, { indent: '    ' });
+console.log(formatted);
+// Output:
+// .example {
+//     color: red;
+//     font-size: 16px;
+// }
+
+// Compressed with no spaces
+const compressed = stringify(ast, { compress: true });
+console.log(compressed);
+// Output: .example{color:red;font-size:16px}
+```
+
+## TypeScript Integration
+
+The library provides comprehensive TypeScript support with full type definitions for all AST nodes and functions:
+
+```typescript
+import { parse, stringify, type CssStylesheetAST } from '@adobe/css-tools';
+
+const css: string = '.example { color: red; }';
+const ast: CssStylesheetAST = parse(css);
+const output: string = stringify(ast);
+```
+
+## Performance Considerations
+
+- The parser is optimized for large CSS files
+- AST nodes are lightweight and memory-efficient
+- Stringification is fast and supports streaming for large outputs
+- Consider using `compress: true` for production builds to reduce file size
+
+## Browser Support
+
+The library works in all modern browsers and Node.js environments. For older environments, you may need to use a bundler with appropriate polyfills.

frontend/node_modules/@adobe/css-tools/docs/AST.md

@@ -0,0 +1,366 @@
+# Abstract Syntax Tree (AST)
+
+## Overview
+
+The AST represents CSS as a tree structure where each node has a specific type and properties. All nodes share common properties and have type-specific properties.
+
+## Common Properties
+
+All AST nodes have these properties:
+
+### `type`
+
+The node type as a string. See [Node Types](#node-types) for all possible values.
+
+### `position` (optional)
+
+Position information for the node in the source code:
+
+```typescript
+{
+  start: { line: number; column: number };
+  end: { line: number; column: number };
+  source?: string;
+}
+```
+
+### `parent` (optional)
+
+Reference to the parent node in the AST.
+
+## Node Types
+
+### `stylesheet`
+
+The root node representing an entire CSS document.
+
+**Properties:**
+- `stylesheet.source` (optional): Source file path
+- `stylesheet.rules`: Array of top-level rules
+- `stylesheet.parsingErrors` (optional): Array of parse errors when `silent` option is used
+
+**Example:**
+```json
+{
+  "type": "stylesheet",
+  "stylesheet": {
+    "rules": [
+      // ... other nodes
+    ]
+  }
+}
+```
+
+### `rule`
+
+A CSS rule with selectors and declarations.
+
+**Properties:**
+- `selectors`: Array of CSS selectors as strings
+- `declarations`: Array of declarations and comments
+
+**Example:**
+```json
+{
+  "type": "rule",
+  "selectors": ["body", "html"],
+  "declarations": [
+    {
+      "type": "declaration",
+      "property": "color",
+      "value": "red"
+    }
+  ]
+}
+```
+
+### `declaration`
+
+A CSS property declaration.
+
+**Properties:**
+- `property`: The CSS property name
+- `value`: The CSS property value as a string
+
+**Example:**
+```json
+{
+  "type": "declaration",
+  "property": "background-color",
+  "value": "#ffffff"
+}
+```
+
+### `comment`
+
+A CSS comment.
+
+**Properties:**
+- `comment`: The comment text (without `/*` and `*/`)
+
+**Example:**
+```json
+{
+  "type": "comment",
+  "comment": " This is a comment "
+}
+```
+
+### `media`
+
+A `@media` rule.
+
+**Properties:**
+- `media`: The media query string
+- `rules`: Array of rules within the media block
+
+**Example:**
+```json
+{
+  "type": "media",
+  "media": "screen and (max-width: 768px)",
+  "rules": [
+    // ... nested rules
+  ]
+}
+```
+
+### `keyframes`
+
+A `@keyframes` rule.
+
+**Properties:**
+- `name`: The keyframes name
+- `vendor` (optional): Vendor prefix (e.g., "-webkit-")
+- `keyframes`: Array of keyframe rules and comments
+
+**Example:**
+```json
+{
+  "type": "keyframes",
+  "name": "fade",
+  "keyframes": [
+    {
+      "type": "keyframe",
+      "values": ["from"],
+      "declarations": [
+        {
+          "type": "declaration",
+          "property": "opacity",
+          "value": "0"
+        }
+      ]
+    }
+  ]
+}
+```
+
+### `keyframe`
+
+A keyframe within a `@keyframes` rule.
+
+**Properties:**
+- `values`: Array of keyframe selectors (e.g., `["from"]`, `["to"]`, `["50%"]`)
+- `declarations`: Array of declarations and comments
+
+### `import`
+
+An `@import` rule.
+
+**Properties:**
+- `import`: The import string (URL or media query)
+
+**Example:**
+```json
+{
+  "type": "import",
+  "import": "url('styles.css')"
+}
+```
+
+### `charset`
+
+A `@charset` rule.
+
+**Properties:**
+- `charset`: The character encoding
+
+**Example:**
+```json
+{
+  "type": "charset",
+  "charset": "utf-8"
+}
+```
+
+### `namespace`
+
+A `@namespace` rule.
+
+**Properties:**
+- `namespace`: The namespace declaration
+
+**Example:**
+```json
+{
+  "type": "namespace",
+  "namespace": "url(http://www.w3.org/1999/xhtml)"
+}
+```
+
+### `supports`
+
+A `@supports` rule.
+
+**Properties:**
+- `supports`: The supports condition
+- `rules`: Array of rules within the supports block
+
+**Example:**
+```json
+{
+  "type": "supports",
+  "supports": "(display: grid)",
+  "rules": [
+    // ... nested rules
+  ]
+}
+```
+
+### `document`
+
+A `@document` rule.
+
+**Properties:**
+- `document`: The document condition
+- `vendor` (optional): Vendor prefix
+- `rules`: Array of rules within the document block
+
+### `page`
+
+A `@page` rule.
+
+**Properties:**
+- `selectors`: Array of page selectors
+- `declarations`: Array of declarations and comments
+
+### `font-face`
+
+A `@font-face` rule.
+
+**Properties:**
+- `declarations`: Array of font declarations and comments
+
+### `host`
+
+A `:host` rule.
+
+**Properties:**
+- `rules`: Array of rules within the host block
+
+### `container`
+
+A `@container` rule.
+
+**Properties:**
+- `container`: The container query
+- `rules`: Array of rules within the container block
+
+### `layer`
+
+A `@layer` rule.
+
+**Properties:**
+- `layer`: The layer name
+- `rules` (optional): Array of rules within the layer block
+
+### `custom-media`
+
+A `@custom-media` rule.
+
+**Properties:**
+- `name`: The custom media query name
+- `media`: The media query definition
+
+### `starting-style`
+
+A `@starting-style` rule.
+
+**Properties:**
+- `rules`: Array of rules within the starting-style block
+
+## Type Hierarchy
+
+The AST nodes are organized in the following hierarchy:
+
+- `CssStylesheetAST` - Root node
+- `CssAtRuleAST` - Union of all at-rule and rule nodes
+- `CssAllNodesAST` - Union of all possible node types
+
+## Working with the AST
+
+### Traversing Nodes
+
+```typescript
+import { parse, CssStylesheetAST } from '@adobe/css-tools';
+
+const ast: CssStylesheetAST = parse('body { color: red; }');
+
+// Access top-level rules
+ast.stylesheet.rules.forEach(rule => {
+  if (rule.type === 'rule') {
+    console.log('Selectors:', rule.selectors);
+    rule.declarations.forEach(decl => {
+      if (decl.type === 'declaration') {
+        console.log(`${decl.property}: ${decl.value}`);
+      }
+    });
+  }
+});
+```
+
+### Modifying Nodes
+
+```typescript
+// Add a new declaration
+const newDecl = {
+  type: 'declaration' as const,
+  property: 'font-size',
+  value: '16px'
+};
+
+// Find a rule and add the declaration
+ast.stylesheet.rules.forEach(rule => {
+  if (rule.type === 'rule' && rule.selectors.includes('body')) {
+    rule.declarations.push(newDecl);
+  }
+});
+```
+
+### Error Handling
+
+When parsing with the `silent` option, errors are collected in the AST:
+
+```typescript
+const ast = parse('invalid css {', { silent: true });
+
+if (ast.stylesheet.parsingErrors) {
+  ast.stylesheet.parsingErrors.forEach(error => {
+    console.error('Parse error:', error.message);
+  });
+}
+```
+
+## Position Information
+
+Position information is available on most nodes and includes:
+
+- `start.line` and `start.column`: Beginning of the node
+- `end.line` and `end.column`: End of the node  
+- `source`: Source file path (if provided during parsing)
+
+This is useful for:
+- Error reporting
+- Source mapping
+- Code analysis tools
+- IDE integration

frontend/node_modules/@adobe/css-tools/docs/CHANGELOG.md

@@ -0,0 +1,191 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [4.4.4] - 2025-07-22
+
+### Changed
+- Switch from yarn to npm for package management
+- Switch from eslint to biome for code formatting and linting
+- Reformat codebase to comply with biome recommendations
+- Switch from webpack to rollup for bundling
+
+### Fixed
+- Fix module exports to ensure proper compatibility with bundlers
+- Add validation check to prevent future export issues
+
+## [4.4.3] - 2025-05-15
+
+### Security
+- Fix polynomial regular expression vulnerability on uncontrolled data
+- Refactor code to enable GitHub security static analysis
+
+### Performance
+- Improve parsing performance with minor optimizations
+- Replace regex patterns with string search (indexOf-based) for better performance
+
+### Added
+- Add new utility functions with comprehensive unit tests
+- Add improved formatting for CSS Grid template areas (#283 by @jogibear9988)
+
+### Fixed
+- Fix TypeScript error with ConstructorParameters in Parcel bundler (#444)
+
+## [4.4.2] - 2025-02-12
+
+### Fixed
+- Fix regular expression for parsing quoted values in parentheses
+
+## [4.4.0] - 2024-06-05
+
+### Added
+- Add support for CSS `@starting-style` at-rule (#319)
+
+## [4.3.3] - 2024-01-24
+
+### Changed
+- Update package export configuration (#271)
+
+## [4.3.2] - 2023-11-28
+
+### Security
+- Fix ReDoS vulnerability with crafted CSS strings - CVE-2023-48631
+
+### Fixed
+- Fix parsing issues with `:is()` and nested `:nth-child()` selectors (#211)
+
+## [4.3.1] - 2023-03-14
+
+### Security
+- Fix ReDoS vulnerability with crafted CSS strings - CVE-2023-26364
+
+## [4.3.0] - 2023-03-07
+
+### Changed
+- Update build toolchain and dependencies
+- Update package exports configuration and file structure
+
+## [4.2.0] - 2023-02-21
+
+### Added
+- Add support for CSS `@container` at-rule
+- Add support for CSS `@layer` at-rule
+
+## [4.1.0] - 2023-01-25
+
+### Added
+- Add support for ES Modules (ESM)
+
+## [4.0.2] - 2023-01-12
+
+### Fixed
+- Fix `@import` parsing when URL contains semicolons (#71)
+- Fix regression in selector parsing for attribute selectors (#77)
+
+## [4.0.1] - 2022-08-03
+
+### Fixed
+- Fix `globalThis` configuration for webpack to enable UMD module usage in Node.js environments
+
+## [4.0.0] - 2022-06-09
+
+### Changed
+- Fork from original css library to Adobe's `@adobe/css-tools` package
+- Convert codebase from JavaScript to TypeScript
+- Improve parsing performance by approximately 25%
+- Update all dependencies to latest versions
+- Remove source map support
+
+---
+
+## Legacy Versions (Pre-Adobe Fork)
+
+## [3.0.0] - 2020-07-01
+
+### Changed
+- Bump major version due to major dependency updates and Node.js version requirement changes
+
+## [2.2.1] - 2015-06-17
+
+### Fixed
+- Fix parsing of escaped quotes in quoted strings
+
+## [2.2.0] - 2015-02-18
+
+### Added
+- Add `parsingErrors` property to list errors when parsing with `silent: true`
+- Accept EOL characters and all whitespace characters in at-rules such as `@media`
+
+## [2.1.0] - 2014-08-05
+
+### Added
+- Add `inputSourcemaps` option to disable input source map processing
+- Add `sourcemap: 'generator'` option to return the `SourceMapGenerator` object
+- Use `inherits` package for inheritance (fixes browser compatibility issues)
+
+### Changed
+- Change error message format and add `.reason` property to error objects
+
+## [2.0.0] - 2014-06-18
+
+### Added
+- Add non-enumerable parent reference to each AST node
+- Add support for `@custom-media`, `@host`, and `@font-face` at-rules
+- Allow commas inside selector functions
+- Allow empty property values
+- Add `node.position.content` property
+- Integrate css-parse and css-stringify libraries
+- Apply original source maps from source files
+
+### Changed
+- Change default `options.position` value to `true`
+- Remove comments from properties and values
+
+### Removed
+- Drop Component(1) support
+
+### Fixed
+- Fix assertion errors when selectors are missing
+
+## [1.6.1] - 2014-01-02
+
+### Fixed
+- Fix component.json configuration
+
+## [1.6.0] - 2013-12-21
+
+### Changed
+- Update dependencies
+
+## [1.5.0] - 2013-12-03
+
+### Changed
+- Update dependencies
+
+## [1.1.0] - 2013-04-04
+
+### Changed
+- Update dependencies
+
+## [1.0.7] - 2012-11-21
+
+### Fixed
+- Fix component.json configuration
+
+## [1.0.4] - 2012-11-15
+
+### Changed
+- Update css-stringify dependency
+
+## [1.0.3] - 2012-09-01
+
+### Added
+- Add Component support
+
+## [0.0.1] - 2010-01-03
+
+### Added
+- Initial release

frontend/node_modules/@adobe/css-tools/docs/EXAMPLES.md

@@ -0,0 +1,450 @@
+# Usage Examples
+
+## Basic Usage
+
+### Parsing CSS
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+// Basic CSS parsing
+const css = `
+  body {
+    font-size: 12px;
+    color: #333;
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+`;
+
+const ast = parse(css);
+console.log(ast);
+```
+
+### Stringifying AST
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = 'body { font-size: 12px; color: #333; }';
+const ast = parse(css);
+
+// Convert back to CSS
+const output = stringify(ast);
+console.log(output); // "body { font-size: 12px; color: #333; }"
+```
+
+## Advanced Parsing Options
+
+### Source Tracking
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = 'body { color: red; }';
+const ast = parse(css, { source: 'styles.css' });
+
+// Position information is available
+const rule = ast.stylesheet.rules[0];
+console.log(rule.position?.source); // "styles.css"
+console.log(rule.position?.start); // { line: 1, column: 1 }
+console.log(rule.position?.end); // { line: 1, column: 20 }
+```
+
+### Silent Error Handling
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const malformedCss = `
+  body { color: red; }
+  { color: blue; } /* Missing selector */
+  .valid { background: green; }
+`;
+
+// Parse with silent error handling
+const result = parse(malformedCss, { silent: true });
+
+// Check for parsing errors
+if (result.stylesheet.parsingErrors) {
+  console.log('Parsing errors:', result.stylesheet.parsingErrors.length);
+  result.stylesheet.parsingErrors.forEach(error => {
+    console.log(`Error at line ${error.line}: ${error.message}`);
+  });
+}
+
+// Valid rules are still parsed
+console.log('Valid rules:', result.stylesheet.rules.length);
+```
+
+## AST Structure Examples
+
+### Basic Rule
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = `
+  .header {
+    background: #f0f0f0;
+    padding: 20px;
+    border-bottom: 1px solid #ccc;
+  }
+`;
+
+const ast = parse(css);
+const rule = ast.stylesheet.rules[0];
+
+console.log(rule.type); // "rule"
+console.log(rule.selectors); // [".header"]
+console.log(rule.declarations.length); // 3
+
+rule.declarations.forEach(decl => {
+  console.log(`${decl.property}: ${decl.value}`);
+});
+// Output:
+// background: #f0f0f0
+// padding: 20px
+// border-bottom: 1px solid #ccc
+```
+
+### Media Queries
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = `
+  @media screen and (max-width: 768px) {
+    .container {
+      padding: 10px;
+    }
+    
+    .sidebar {
+      display: none;
+    }
+  }
+`;
+
+const ast = parse(css);
+const mediaRule = ast.stylesheet.rules[0];
+
+console.log(mediaRule.type); // "media"
+console.log(mediaRule.media); // "screen and (max-width: 768px)"
+console.log(mediaRule.rules.length); // 2
+```
+
+### Keyframes
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = `
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+const ast = parse(css);
+const keyframesRule = ast.stylesheet.rules[0];
+
+console.log(keyframesRule.type); // "keyframes"
+console.log(keyframesRule.name); // "fadeIn"
+console.log(keyframesRule.keyframes.length); // 2
+
+keyframesRule.keyframes.forEach(keyframe => {
+  console.log(`Keyframe: ${keyframe.values.join(', ')}`);
+  keyframe.declarations.forEach(decl => {
+    console.log(`  ${decl.property}: ${decl.value}`);
+  });
+});
+```
+
+### Comments
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const css = `
+  /* Header styles */
+  .header {
+    background: red; /* Fallback color */
+  }
+  
+  /* Footer styles */
+  .footer {
+    background: blue;
+  }
+`;
+
+const ast = parse(css);
+
+ast.stylesheet.rules.forEach(rule => {
+  if (rule.type === 'comment') {
+    console.log(`Comment: ${rule.comment}`);
+  } else if (rule.type === 'rule') {
+    console.log(`Rule: ${rule.selectors.join(', ')}`);
+    
+    rule.declarations.forEach(decl => {
+      if (decl.type === 'comment') {
+        console.log(`  Comment: ${decl.comment}`);
+      } else {
+        console.log(`  ${decl.property}: ${decl.value}`);
+      }
+    });
+  }
+});
+```
+
+## Stringifying Options
+
+### Compressed Output
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = `
+  body {
+    font-size: 12px;
+    color: #333;
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+const ast = parse(css);
+
+// Compressed output
+const compressed = stringify(ast, { compress: true });
+console.log(compressed);
+// Output: "body{font-size:12px;color:#333;margin:0;padding:0}"
+```
+
+### Custom Indentation
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = 'body { font-size: 12px; color: #333; }';
+const ast = parse(css);
+
+// Custom indentation
+const formatted = stringify(ast, { indent: '    ' });
+console.log(formatted);
+// Output:
+// body {
+//     font-size: 12px;
+//     color: #333;
+// }
+```
+
+## Working with Complex CSS
+
+### Nested Rules and At-Rules
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const complexCss = `
+  @import url('https://fonts.googleapis.com/css2?family=Roboto');
+  
+  @charset "UTF-8";
+  
+  @media print {
+    body {
+      font-size: 12pt;
+    }
+  }
+  
+  @supports (display: grid) {
+    .grid {
+      display: grid;
+    }
+  }
+  
+  @keyframes slideIn {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0); }
+  }
+  
+  @font-face {
+    font-family: 'CustomFont';
+    src: url('custom-font.woff2') format('woff2');
+  }
+`;
+
+const ast = parse(complexCss);
+
+ast.stylesheet.rules.forEach(rule => {
+  switch (rule.type) {
+    case 'import':
+      console.log(`Import: ${rule.import}`);
+      break;
+    case 'charset':
+      console.log(`Charset: ${rule.charset}`);
+      break;
+    case 'media':
+      console.log(`Media query: ${rule.media}`);
+      break;
+    case 'supports':
+      console.log(`Supports: ${rule.supports}`);
+      break;
+    case 'keyframes':
+      console.log(`Keyframes: ${rule.name}`);
+      break;
+    case 'font-face':
+      console.log('Font-face rule');
+      break;
+  }
+});
+```
+
+### Manipulating the AST
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+const css = `
+  .button {
+    background: blue;
+    color: white;
+    padding: 10px;
+  }
+`;
+
+const ast = parse(css);
+const rule = ast.stylesheet.rules[0];
+
+// Add a new declaration
+rule.declarations.push({
+  type: 'declaration',
+  property: 'border-radius',
+  value: '5px'
+});
+
+// Modify existing declaration
+const backgroundDecl = rule.declarations.find(d => d.property === 'background');
+if (backgroundDecl) {
+  backgroundDecl.value = 'red';
+}
+
+// Add a new selector
+rule.selectors.push('.btn');
+
+const modifiedCss = stringify(ast);
+console.log(modifiedCss);
+```
+
+## Error Handling
+
+### Catching Parse Errors
+
+```javascript
+import { parse, CssParseError } from '@adobe/css-tools';
+
+try {
+  const ast = parse('body { color: red; } { invalid }');
+} catch (error) {
+  if (error instanceof CssParseError) {
+    console.log(`Parse error at line ${error.line}, column ${error.column}:`);
+    console.log(error.message);
+    console.log(`Source: ${error.filename}`);
+  }
+}
+```
+
+### Working with Silent Errors
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+const problematicCss = `
+  body { color: red; }
+  { color: blue; } /* Missing selector */
+  .valid { background: green; }
+  .another { border: 1px solid; } /* Missing closing brace */
+`;
+
+const result = parse(problematicCss, { 
+  silent: true, 
+  source: 'problematic.css' 
+});
+
+// Process valid rules
+const validRules = result.stylesheet.rules.filter(rule => rule.type === 'rule');
+console.log(`Found ${validRules.length} valid rules`);
+
+// Log errors for debugging
+if (result.stylesheet.parsingErrors) {
+  result.stylesheet.parsingErrors.forEach(error => {
+    console.log(`Error: ${error.message} at line ${error.line}`);
+  });
+}
+```
+
+### CSS Minification
+
+```javascript
+import { parse, stringify } from '@adobe/css-tools';
+
+function minifyCSS(css) {
+  const ast = parse(css);
+  return stringify(ast, { compress: true });
+}
+
+const css = `
+  body {
+    font-size: 12px;
+    color: #333;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+`;
+
+const minified = minifyCSS(css);
+console.log(minified);
+// Output: "body{font-size:12px;color:#333;margin:0;padding:0}.container{max-width:1200px;margin:0 auto}"
+```
+
+### CSS Validation
+
+```javascript
+import { parse } from '@adobe/css-tools';
+
+function validateCSS(css, filename = 'unknown') {
+  try {
+    const ast = parse(css, { source: filename });
+    return {
+      valid: true,
+      rules: ast.stylesheet.rules.length,
+      errors: []
+    };
+  } catch (error) {
+    return {
+      valid: false,
+      rules: 0,
+      errors: [{
+        message: error.message,
+        line: error.line,
+        column: error.column,
+        source: error.filename
+      }]
+    };
+  }
+}
+
+const result = validateCSS('body { color: red; } { invalid }', 'test.css');
+console.log(result);
+```