{"id":26583,"library":"vfl-compiler","title":"VFL Compiler","description":"Converts GSS-flavored Visual Format Language (VFL) statements into GSS-flavored Constraint CSS (CCSS). Current stable version is 1.1.3, released in maintenance mode with no recent activity. It is part of the Grid Style Sheets (GSS) ecosystem and serves as a transpilation step for layout descriptions. Differentiates from Apple's VFL by targeting GSS constraint system rather than Auto Layout.","status":"maintenance","version":"1.1.3","language":"javascript","source_language":"en","source_url":"git://github.com/gss/vfl-compiler","tags":["javascript"],"install":[{"cmd":"npm install vfl-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add vfl-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add vfl-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"used for error reporting during compilation","package":"error-reporter","optional":false}],"imports":[{"note":"Package exports CommonJS by default; ESM import works with bundlers. Use default import to get compile function.","wrong":"const compiler = require('vfl-compiler')","symbol":"default","correct":"import compiler from 'vfl-compiler'"},{"note":"The compile function is the default export.","symbol":"compile","correct":"import compile from 'vfl-compiler'"},{"note":"TypeScript users can import the type for the returned output object.","symbol":"CompileOutput","correct":"import type { CompileOutput } from 'vfl-compiler'"}],"quickstart":{"code":"import compile from 'vfl-compiler';\n\nconst vfl = '|-50-[button1(100)]-20-[button2(button1)]-50-|';\ntry {\n  const result = compile(vfl);\n  console.log(result.ccss); // Compiled CCSS string\n  console.log(result.errors); // Array of errors, if any\n} catch (err) {\n  console.error('Compilation failed:', err);\n}","lang":"typescript","description":"Demonstrates compiling a VFL string to CCSS and handling potential errors."},"warnings":[{"fix":"Ensure VFL syntax follows GSS specification (http://gridstylesheets.org/guides/vfl/).","message":"Input VFL must be GSS-flavored (e.g., supports @horizontal and @vertical), not Apple's VFL.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install 'ccss-compiler' separately if needed for downstream processing.","message":"The ccss-compiler dependency was removed in v1.1.3, but it may still be a peer dependency in some setups.","severity":"deprecated","affected_versions":">=1.1.3"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install error-reporter","cause":"Missing 'error-reporter' dependency.","error":"Cannot find module 'error-reporter'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}