Brunobkr/llama.cpp_AlgMor24_github

1# Usage Examples2 3## Basic Usage4 5### Parsing CSS6 7```javascript8import { parse } from '@adobe/css-tools';9 10// Basic CSS parsing11const css = `12  body {13    font-size: 12px;14    color: #333;15  }16  17  .container {18    max-width: 1200px;19    margin: 0 auto;20  }21`;22 23const ast = parse(css);24console.log(ast);25```26 27### Stringifying AST28 29```javascript30import { parse, stringify } from '@adobe/css-tools';31 32const css = 'body { font-size: 12px; color: #333; }';33const ast = parse(css);34 35// Convert back to CSS36const output = stringify(ast);37console.log(output); // "body { font-size: 12px; color: #333; }"38```39 40## Advanced Parsing Options41 42### Source Tracking43 44```javascript45import { parse } from '@adobe/css-tools';46 47const css = 'body { color: red; }';48const ast = parse(css, { source: 'styles.css' });49 50// Position information is available51const rule = ast.stylesheet.rules[0];52console.log(rule.position?.source); // "styles.css"53console.log(rule.position?.start); // { line: 1, column: 1 }54console.log(rule.position?.end); // { line: 1, column: 20 }55```56 57### Silent Error Handling58 59```javascript60import { parse } from '@adobe/css-tools';61 62const malformedCss = `63  body { color: red; }64  { color: blue; } /* Missing selector */65  .valid { background: green; }66`;67 68// Parse with silent error handling69const result = parse(malformedCss, { silent: true });70 71// Check for parsing errors72if (result.stylesheet.parsingErrors) {73  console.log('Parsing errors:', result.stylesheet.parsingErrors.length);74  result.stylesheet.parsingErrors.forEach(error => {75    console.log(`Error at line ${error.line}: ${error.message}`);76  });77}78 79// Valid rules are still parsed80console.log('Valid rules:', result.stylesheet.rules.length);81```82 83## AST Structure Examples84 85### Basic Rule86 87```javascript88import { parse } from '@adobe/css-tools';89 90const css = `91  .header {92    background: #f0f0f0;93    padding: 20px;94    border-bottom: 1px solid #ccc;95  }96`;97 98const ast = parse(css);99const rule = ast.stylesheet.rules[0];100 101console.log(rule.type); // "rule"102console.log(rule.selectors); // [".header"]103console.log(rule.declarations.length); // 3104 105rule.declarations.forEach(decl => {106  console.log(`${decl.property}: ${decl.value}`);107});108// Output:109// background: #f0f0f0110// padding: 20px111// border-bottom: 1px solid #ccc112```113 114### Media Queries115 116```javascript117import { parse } from '@adobe/css-tools';118 119const css = `120  @media screen and (max-width: 768px) {121    .container {122      padding: 10px;123    }124    125    .sidebar {126      display: none;127    }128  }129`;130 131const ast = parse(css);132const mediaRule = ast.stylesheet.rules[0];133 134console.log(mediaRule.type); // "media"135console.log(mediaRule.media); // "screen and (max-width: 768px)"136console.log(mediaRule.rules.length); // 2137```138 139### Keyframes140 141```javascript142import { parse } from '@adobe/css-tools';143 144const css = `145  @keyframes fadeIn {146    from {147      opacity: 0;148    }149    to {150      opacity: 1;151    }152  }153`;154 155const ast = parse(css);156const keyframesRule = ast.stylesheet.rules[0];157 158console.log(keyframesRule.type); // "keyframes"159console.log(keyframesRule.name); // "fadeIn"160console.log(keyframesRule.keyframes.length); // 2161 162keyframesRule.keyframes.forEach(keyframe => {163  console.log(`Keyframe: ${keyframe.values.join(', ')}`);164  keyframe.declarations.forEach(decl => {165    console.log(`  ${decl.property}: ${decl.value}`);166  });167});168```169 170### Comments171 172```javascript173import { parse } from '@adobe/css-tools';174 175const css = `176  /* Header styles */177  .header {178    background: red; /* Fallback color */179  }180  181  /* Footer styles */182  .footer {183    background: blue;184  }185`;186 187const ast = parse(css);188 189ast.stylesheet.rules.forEach(rule => {190  if (rule.type === 'comment') {191    console.log(`Comment: ${rule.comment}`);192  } else if (rule.type === 'rule') {193    console.log(`Rule: ${rule.selectors.join(', ')}`);194    195    rule.declarations.forEach(decl => {196      if (decl.type === 'comment') {197        console.log(`  Comment: ${decl.comment}`);198      } else {199        console.log(`  ${decl.property}: ${decl.value}`);200      }201    });202  }203});204```205 206## Stringifying Options207 208### Compressed Output209 210```javascript211import { parse, stringify } from '@adobe/css-tools';212 213const css = `214  body {215    font-size: 12px;216    color: #333;217    margin: 0;218    padding: 0;219  }220`;221 222const ast = parse(css);223 224// Compressed output225const compressed = stringify(ast, { compress: true });226console.log(compressed);227// Output: "body{font-size:12px;color:#333;margin:0;padding:0}"228```229 230### Custom Indentation231 232```javascript233import { parse, stringify } from '@adobe/css-tools';234 235const css = 'body { font-size: 12px; color: #333; }';236const ast = parse(css);237 238// Custom indentation239const formatted = stringify(ast, { indent: '    ' });240console.log(formatted);241// Output:242// body {243//     font-size: 12px;244//     color: #333;245// }246```247 248## Working with Complex CSS249 250### Nested Rules and At-Rules251 252```javascript253import { parse, stringify } from '@adobe/css-tools';254 255const complexCss = `256  @import url('https://fonts.googleapis.com/css2?family=Roboto');257  258  @charset "UTF-8";259  260  @media print {261    body {262      font-size: 12pt;263    }264  }265  266  @supports (display: grid) {267    .grid {268      display: grid;269    }270  }271  272  @keyframes slideIn {273    0% { transform: translateX(-100%); }274    100% { transform: translateX(0); }275  }276  277  @font-face {278    font-family: 'CustomFont';279    src: url('custom-font.woff2') format('woff2');280  }281`;282 283const ast = parse(complexCss);284 285ast.stylesheet.rules.forEach(rule => {286  switch (rule.type) {287    case 'import':288      console.log(`Import: ${rule.import}`);289      break;290    case 'charset':291      console.log(`Charset: ${rule.charset}`);292      break;293    case 'media':294      console.log(`Media query: ${rule.media}`);295      break;296    case 'supports':297      console.log(`Supports: ${rule.supports}`);298      break;299    case 'keyframes':300      console.log(`Keyframes: ${rule.name}`);301      break;302    case 'font-face':303      console.log('Font-face rule');304      break;305  }306});307```308 309### Manipulating the AST310 311```javascript312import { parse, stringify } from '@adobe/css-tools';313 314const css = `315  .button {316    background: blue;317    color: white;318    padding: 10px;319  }320`;321 322const ast = parse(css);323const rule = ast.stylesheet.rules[0];324 325// Add a new declaration326rule.declarations.push({327  type: 'declaration',328  property: 'border-radius',329  value: '5px'330});331 332// Modify existing declaration333const backgroundDecl = rule.declarations.find(d => d.property === 'background');334if (backgroundDecl) {335  backgroundDecl.value = 'red';336}337 338// Add a new selector339rule.selectors.push('.btn');340 341const modifiedCss = stringify(ast);342console.log(modifiedCss);343```344 345## Error Handling346 347### Catching Parse Errors348 349```javascript350import { parse, CssParseError } from '@adobe/css-tools';351 352try {353  const ast = parse('body { color: red; } { invalid }');354} catch (error) {355  if (error instanceof CssParseError) {356    console.log(`Parse error at line ${error.line}, column ${error.column}:`);357    console.log(error.message);358    console.log(`Source: ${error.filename}`);359  }360}361```362 363### Working with Silent Errors364 365```javascript366import { parse } from '@adobe/css-tools';367 368const problematicCss = `369  body { color: red; }370  { color: blue; } /* Missing selector */371  .valid { background: green; }372  .another { border: 1px solid; } /* Missing closing brace */373`;374 375const result = parse(problematicCss, { 376  silent: true, 377  source: 'problematic.css' 378});379 380// Process valid rules381const validRules = result.stylesheet.rules.filter(rule => rule.type === 'rule');382console.log(`Found ${validRules.length} valid rules`);383 384// Log errors for debugging385if (result.stylesheet.parsingErrors) {386  result.stylesheet.parsingErrors.forEach(error => {387    console.log(`Error: ${error.message} at line ${error.line}`);388  });389}390```391 392### CSS Minification393 394```javascript395import { parse, stringify } from '@adobe/css-tools';396 397function minifyCSS(css) {398  const ast = parse(css);399  return stringify(ast, { compress: true });400}401 402const css = `403  body {404    font-size: 12px;405    color: #333;406    margin: 0;407    padding: 0;408  }409  410  .container {411    max-width: 1200px;412    margin: 0 auto;413  }414`;415 416const minified = minifyCSS(css);417console.log(minified);418// Output: "body{font-size:12px;color:#333;margin:0;padding:0}.container{max-width:1200px;margin:0 auto}"419```420 421### CSS Validation422 423```javascript424import { parse } from '@adobe/css-tools';425 426function validateCSS(css, filename = 'unknown') {427  try {428    const ast = parse(css, { source: filename });429    return {430      valid: true,431      rules: ast.stylesheet.rules.length,432      errors: []433    };434  } catch (error) {435    return {436      valid: false,437      rules: 0,438      errors: [{439        message: error.message,440        line: error.line,441        column: error.column,442        source: error.filename443      }]444    };445  }446}447 448const result = validateCSS('body { color: red; } { invalid }', 'test.css');449console.log(result);450```451