File size: 1,760 Bytes
794b22f 5240484 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | // v0.6.0 quick smoke - deform family + gradient tools compile cleanly
import { compile } from '../public/dssl/index.js';
const src = `
tokens { color { flame: #ff5533 } }
.card {
bend: 20
stretch: 1.2
gradient: linear 135, color.flame -> #00d4ff
gradient-flow: 6s alternate
}
.card:active {
bend: 0
stretch: 1 vertical
fold: 18
}
.title { gradient-text: linear to right, color.flame, color.ok }
nav {
bend-around: -24
transition: 200 snap bend, 150 stretch
}
.fly { bend: 45deg }
motion bendy {
from { bend: 0; stretch: 1 }
to { bend: 30; stretch: 1.15 }
at 50% { bend-y: -10 }
}
.loop { animate: bendy 900 infinite alternate }
`;
const r = compile(src, 'smoke.dssl');
console.log('ok:', r.ok);
for (const e of r.errors) console.log('ERR', e.line, e.message, '| hint:', e.hint || '');
const rule = (sel) => r.doc.rules.find(x => x.sel === sel);
const card = rule('.card');
console.log('\n.card decls:');
for (const d of card.decls) console.log(' ', d.prop, '=', typeof d.value === 'object' ? JSON.stringify(d.value) : d.value);
const active = rule('.card:active');
console.log('\n.card:active decls:');
for (const d of active.decls) console.log(' ', d.prop, '=', typeof d.value === 'object' ? JSON.stringify(d.value) : d.value);
const title = rule('.title');
console.log('\n.title decls:', title.decls.map(d => d.prop + '=' + d.value).join(' | '));
const nav = rule('nav');
console.log('\nnav decls:', nav.decls.map(d => d.prop + '=' + JSON.stringify(d.value)).join(' | '));
const loop = rule('.loop');
console.log('\n.loop @animate frames:', JSON.stringify(loop.decls[0].value.frames, null, 1));
const motion = Object.entries(r.doc.motions)[0];
console.log('\nmotion bendy parsed:', JSON.stringify(motion[1]._parsed, null, 1));
|