VFL Compiler

1.1.3 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

error Cannot find module 'error-reporter' ↓

cause Missing 'error-reporter' dependency.

fix

npm install error-reporter

Warnings

gotcha Input VFL must be GSS-flavored (e.g., supports @horizontal and @vertical), not Apple's VFL. ↓

fix Ensure VFL syntax follows GSS specification (http://gridstylesheets.org/guides/vfl/).

deprecated The ccss-compiler dependency was removed in v1.1.3, but it may still be a peer dependency in some setups. ↓

fix Install 'ccss-compiler' separately if needed for downstream processing.

Install

npm install vfl-compiler

yarn add vfl-compiler

pnpm add vfl-compiler

Imports

default
wrong
```
const compiler = require('vfl-compiler')
```
correct
```
import compiler from 'vfl-compiler'
```
Package exports CommonJS by default; ESM import works with bundlers. Use default import to get compile function.
compile
```
import compile from 'vfl-compiler'
```
The compile function is the default export.
CompileOutput
```
import type { CompileOutput } from 'vfl-compiler'
```
TypeScript users can import the type for the returned output object.

Quickstart

Demonstrates compiling a VFL string to CCSS and handling potential errors.

import compile from 'vfl-compiler';

const vfl = '|-50-[button1(100)]-20-[button2(button1)]-50-|';
try {
  const result = compile(vfl);
  console.log(result.ccss); // Compiled CCSS string
  console.log(result.errors); // Array of errors, if any
} catch (err) {
  console.error('Compilation failed:', err);
}