build.mjs

#!/usr/bin/env node
/**
 * Builds the demo stylesheets.
 *
 * For each `examples/src/<name>.css` this emits three files into
 * `examples/dist/`:
 *
 * - `<name>.css` — the plugin's normal output: native rules behind
 *   `@supports (animation-timeline: scroll())`, fallback rules behind the
 *   negated query.
 * - `<name>.forced.css` — the fallback layer flattened to the top level, so a
 *   demo can exercise the fallback path in a browser that *does* support
 *   scroll-driven animations (see the `?forceFallback=1` switch in each demo).
 * - `<name>.manifest.js` — the manifest as a global, so the demos work when
 *   opened straight off the filesystem where `fetch()` of a JSON file fails.
 */

import { mkdir, readFile, readdir, writeFile } from 'node:fs/promises';
import { basename, dirname, join } from 'node:path';
import { fileURLToPath } from 'node:url';

import postcss from 'postcss';

import plugin from '../packages/postcss-scroll-anim-fallback/index.js';
import { SUPPORTS_FALLBACK } from '../packages/postcss-scroll-anim-fallback/lib/detect.js';

const here = dirname(fileURLToPath(import.meta.url));
const src = join(here, 'src');
const dist = join(here, 'dist');

/**
 * Lift the contents of the `@supports not (...)` layer to the top level and
 * drop the native layer, producing a stylesheet that always uses the fallback.
 *
 * @param {string} css Plugin output.
 * @returns {Promise<string>} Flattened fallback-only stylesheet.
 */
async function flattenFallback (css) {
  const root = postcss.parse(css);
  root.walkAtRules('supports', (atRule) => {
    const params = atRule.params.replace(/\s+/g, ' ').trim();
    if (params === SUPPORTS_FALLBACK) atRule.replaceWith(atRule.nodes ?? []);
    else atRule.remove();
  });
  // Re-indent the lifted rules, which still carry their nested whitespace.
  root.walkRules((rule) => {
    if (rule.parent?.type !== 'root') return;
    rule.raws.before = '\n\n';
    rule.raws.after = '\n';
    rule.walkDecls((decl) => { decl.raws.before = '\n  '; });
  });
  return root.toString();
}

await mkdir(dist, { recursive: true });

for (const file of (await readdir(src)).filter((name) => name.endsWith('.css'))) {
  const name = basename(file, '.css');
  const input = await readFile(join(src, file), 'utf8');
  const result = await postcss([plugin()]).process(input, { from: join(src, file), to: join(dist, file) });
  const manifest = result.messages.find((m) => m.type === 'scroll-anim-fallback-manifest').manifest;

  await writeFile(join(dist, `${name}.css`), result.css, 'utf8');
  await writeFile(join(dist, `${name}.forced.css`), await flattenFallback(result.css), 'utf8');
  await writeFile(
    join(dist, `${name}.manifest.js`),
    `/* Generated by examples/build.mjs — do not edit. */\nwindow.SAF_MANIFEST = ${JSON.stringify(manifest, null, 2)};\n`,
    'utf8'
  );

  const modes = manifest.timelines.map((t) => `${t.selector} → ${t.mode}`).join(', ');
  process.stdout.write(`built ${name}: ${modes}\n`);
}