Brunobkr/llama.cpp_AlgMor24_github

1# API Reference2 3## Overview4 5`@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.6 7## Installation8 9```bash10npm install @adobe/css-tools11```12 13## Core Functions14 15### `parse(code, options?)`16 17Parses CSS code and returns an Abstract Syntax Tree (AST).18 19#### Parameters20 21- `code` (string) - The CSS code to parse22- `options` (object, optional) - Parsing options23  - `silent` (boolean) - Silently fail on parse errors instead of throwing. When `true`, errors are collected in `ast.stylesheet.parsingErrors`24  - `source` (string) - File path for better error reporting25 26#### Returns27 28- `CssStylesheetAST` - The parsed CSS as an AST29 30#### Example31 32```javascript33import { parse } from '@adobe/css-tools';34 35const css = `36  .example {37    color: red;38    font-size: 16px;39  }40`;41 42const ast = parse(css);43console.log(ast.stylesheet.rules);44```45 46### `stringify(ast, options?)`47 48Converts a CSS AST back to CSS string with configurable formatting.49 50#### Parameters51 52- `ast` (CssStylesheetAST) - The CSS AST to stringify53- `options` (CompilerOptions, optional) - Stringification options54  - `indent` (string) - Indentation string (default: `'  '`)55  - `compress` (boolean) - Whether to compress/minify the output (default: `false`)56 57#### Returns58 59- `string` - The formatted CSS string60 61#### Example62 63```javascript64import { parse, stringify } from '@adobe/css-tools';65 66const css = '.example { color: red; }';67const ast = parse(css);68 69// Pretty print70const formatted = stringify(ast, { indent: '  ' });71console.log(formatted);72// Output:73// .example {74//   color: red;75// }76 77// Compressed78const minified = stringify(ast, { compress: true });79console.log(minified);80// Output: .example{color:red}81```82 83## Type Definitions84 85### Core Types86 87#### `CssStylesheetAST`88The root AST node representing a complete CSS stylesheet.89 90```typescript91type CssStylesheetAST = {92  type: CssTypes.stylesheet;93  stylesheet: {94    source?: string;95    rules: CssRuleAST[];96    parsingErrors?: CssParseError[];97  };98};99```100 101#### `CssRuleAST`102Represents a CSS rule (selector + declarations).103 104```typescript105type CssRuleAST = {106  type: CssTypes.rule;107  selectors: string[];108  declarations: CssDeclarationAST[];109  position?: CssPosition;110  parent?: CssStylesheetAST;111};112```113 114#### `CssDeclarationAST`115Represents a CSS property declaration.116 117```typescript118type CssDeclarationAST = {119  type: CssTypes.declaration;120  property: string;121  value: string;122  position?: CssPosition;123  parent?: CssRuleAST;124};125```126 127#### `CssMediaAST`128Represents a CSS @media rule.129 130```typescript131type CssMediaAST = {132  type: CssTypes.media;133  media: string;134  rules: CssRuleAST[];135  position?: CssPosition;136  parent?: CssStylesheetAST;137};138```139 140#### `CssKeyframesAST`141Represents a CSS @keyframes rule.142 143```typescript144type CssKeyframesAST = {145  type: CssTypes.keyframes;146  name: string;147  keyframes: CssKeyframeAST[];148  position?: CssPosition;149  parent?: CssStylesheetAST;150};151```152 153#### `CssPosition`154Represents source position information.155 156```typescript157type CssPosition = {158  source?: string;159  start: {160    line: number;161    column: number;162  };163  end: {164    line: number;165    column: number;166  };167};168```169 170#### `CssParseError`171Represents a parsing error.172 173```typescript174type CssParseError = {175  message: string;176  reason: string;177  filename?: string;178  line: number;179  column: number;180  source?: string;181};182```183 184### Compiler Options185 186#### `CompilerOptions`187Options for the stringifier.188 189```typescript190type CompilerOptions = {191  indent?: string;    // Default: '  '192  compress?: boolean; // Default: false193};194```195 196## Error Handling197 198### Silent Parsing199 200When parsing malformed CSS, you can use the `silent` option to collect errors instead of throwing:201 202```javascript203import { parse } from '@adobe/css-tools';204 205const malformedCss = `206  body { color: red; }207  { color: blue; } /* Missing selector */208  .valid { background: green; }209`;210 211const result = parse(malformedCss, { silent: true });212 213if (result.stylesheet.parsingErrors) {214  result.stylesheet.parsingErrors.forEach(error => {215    console.log(`Error at line ${error.line}: ${error.message}`);216  });217}218 219// Valid rules are still parsed220console.log('Valid rules:', result.stylesheet.rules.length);221```222 223### Source Tracking224 225Enable source tracking for better error reporting:226 227```javascript228import { parse } from '@adobe/css-tools';229 230const css = 'body { color: red; }';231const ast = parse(css, { source: 'styles.css' });232 233const rule = ast.stylesheet.rules[0];234console.log(rule.position?.source); // "styles.css"235console.log(rule.position?.start);  // { line: 1, column: 1 }236console.log(rule.position?.end);    // { line: 1, column: 20 }237```238 239## Advanced Usage240 241### Working with At-Rules242 243```javascript244import { parse, stringify } from '@adobe/css-tools';245 246const css = `247  @media (max-width: 768px) {248    .container {249      padding: 10px;250    }251  }252  253  @keyframes fadeIn {254    from { opacity: 0; }255    to { opacity: 1; }256  }257`;258 259const ast = parse(css);260 261// Access media rules262const mediaRule = ast.stylesheet.rules.find(rule => rule.type === 'media');263console.log(mediaRule.media); // "(max-width: 768px)"264 265// Access keyframes266const keyframesRule = ast.stylesheet.rules.find(rule => rule.type === 'keyframes');267console.log(keyframesRule.name); // "fadeIn"268```269 270### Custom Formatting271 272```javascript273import { parse, stringify } from '@adobe/css-tools';274 275const css = '.example{color:red;font-size:16px}';276const ast = parse(css);277 278// Custom indentation279const formatted = stringify(ast, { indent: '    ' });280console.log(formatted);281// Output:282// .example {283//     color: red;284//     font-size: 16px;285// }286 287// Compressed with no spaces288const compressed = stringify(ast, { compress: true });289console.log(compressed);290// Output: .example{color:red;font-size:16px}291```292 293## TypeScript Integration294 295The library provides comprehensive TypeScript support with full type definitions for all AST nodes and functions:296 297```typescript298import { parse, stringify, type CssStylesheetAST } from '@adobe/css-tools';299 300const css: string = '.example { color: red; }';301const ast: CssStylesheetAST = parse(css);302const output: string = stringify(ast);303```304 305## Performance Considerations306 307- The parser is optimized for large CSS files308- AST nodes are lightweight and memory-efficient309- Stringification is fast and supports streaming for large outputs310- Consider using `compress: true` for production builds to reduce file size311 312## Browser Support313 314The library works in all modern browsers and Node.js environments. For older environments, you may need to use a bundler with appropriate polyfills.315