gutterpress 0.11.21 → 0.11.22-alpha.2

package/dist/render.js

@@ -1477,6 +1477,124 @@ var GP_CLASSES = new Set([
   "gp-continued"
 ]);
 
+// src/lib/two-versions-markers.ts
+var YOUR_VERSION_LABEL = "your version";
+var ONLINE_VERSION_LABEL = "online version";
+var TWO_VERSIONS_OPEN = `<<<<<<< ${YOUR_VERSION_LABEL}`;
+var TWO_VERSIONS_SEPARATOR = "=======";
+var TWO_VERSIONS_CLOSE = `>>>>>>> ${ONLINE_VERSION_LABEL}`;
+
+// src/lib/markdown/two-versions.ts
+var TWO_VERSIONS_CSS = `
+.gp-two-versions {
+  margin: 1em 0;
+  border: 2px dashed #b7791f;
+  border-radius: 6px;
+  break-inside: avoid;
+}
+.gp-two-versions > .gp-version {
+  padding: 0.5em 0.9em;
+}
+.gp-two-versions > .gp-version + .gp-version {
+  border-top: 2px dashed #b7791f;
+}
+.gp-two-versions > .gp-version > .gp-version-text {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 0.85em;
+}
+.gp-two-versions > .gp-version::before {
+  content: attr(data-label);
+  display: block;
+  margin-bottom: 0.35em;
+  font-family: system-ui, sans-serif;
+  font-size: 0.7em;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #b7791f;
+}
+`;
+function lineText(state, line) {
+  return state.src.slice(state.bMarks[line] + state.tShift[line], state.eMarks[line]);
+}
+var MARKER_LINE = /^@[a-z]/;
+function hasMarkerLine(state, from, to) {
+  for (let line = from;line < to; line++) {
+    if (MARKER_LINE.test(lineText(state, line)))
+      return true;
+  }
+  return false;
+}
+function pushVerbatim(state, from, to) {
+  const raw = state.getLines(from, to, 0, false);
+  const token = state.push("html_block", "", 0);
+  token.map = [from, to];
+  token.block = true;
+  token.content = `<pre class="gp-version-text">${state.md.utils.escapeHtml(raw)}</pre>
+`;
+}
+function pushVersion(state, which, label, from, to) {
+  const open = state.push("two_version_open", "div", 1);
+  open.attrSet("class", `gp-version gp-version-${which}`);
+  open.attrSet("data-label", label);
+  open.map = [from, to];
+  open.block = true;
+  if (hasMarkerLine(state, from, to)) {
+    pushVerbatim(state, from, to);
+  } else {
+    state.parentType = "container";
+    state.lineMax = to;
+    state.md.block.tokenize(state, from, to);
+  }
+  const close = state.push("two_version_close", "div", -1);
+  close.block = true;
+}
+function twoVersions(state, startLine, endLine, silent) {
+  if (state.sCount[startLine] - state.blkIndent >= 4)
+    return false;
+  if (state.src.charCodeAt(state.bMarks[startLine] + state.tShift[startLine]) !== 60)
+    return false;
+  if (lineText(state, startLine) !== TWO_VERSIONS_OPEN)
+    return false;
+  let separator = -1;
+  let closer = -1;
+  for (let line = startLine + 1;line < endLine; line++) {
+    const text = lineText(state, line);
+    if (separator < 0 && text === TWO_VERSIONS_SEPARATOR)
+      separator = line;
+    else if (text === TWO_VERSIONS_CLOSE) {
+      closer = line;
+      break;
+    } else if (text === TWO_VERSIONS_OPEN)
+      return false;
+  }
+  if (separator < 0 || closer < 0)
+    return false;
+  if (silent)
+    return true;
+  const oldParent = state.parentType;
+  const oldLineMax = state.lineMax;
+  const open = state.push("two_versions_open", "div", 1);
+  open.attrSet("class", "gp-two-versions");
+  open.map = [startLine, closer + 1];
+  open.block = true;
+  pushVersion(state, "yours", "Your version", startLine + 1, separator);
+  pushVersion(state, "online", "Online version", separator + 1, closer);
+  const close = state.push("two_versions_close", "div", -1);
+  close.block = true;
+  state.parentType = oldParent;
+  state.lineMax = oldLineMax;
+  state.line = closer + 1;
+  return true;
+}
+function gpTwoVersions(md) {
+  md.block.ruler.before("html_block", "two_versions", twoVersions, {
+    alt: ["paragraph", "reference", "blockquote", "list"]
+  });
+}
+
 // src/lib/markdown/table-align.ts
 var ALIGN = /^text-align:(left|center|right)$/;
 function gpTableAlign(md) {
@@ -2352,6 +2470,7 @@ function createMarkdownRenderer(customPlugins) {
   md.use(gpPinScope);
   md.use(gpBlockNames);
   md.use(gpTableAlign);
+  md.use(gpTwoVersions);
   registerImageRule(md);
   if (customPlugins && customPlugins.length > 0) {
     applyPlugins(md, customPlugins);
@@ -2388,6 +2507,17 @@ function lastPageMode(print) {
 var WHICH_VALUES = new Set(["first", "start", "last", "first-except"]);
 
 // src/engine/shared/print-area.ts
+function isPositivePoints(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+var round3 = (n) => Math.round(n * 1000) / 1000;
+function cssLength(pt) {
+  const inches = round3(pt / 72);
+  return Math.abs(inches * 72 - pt) < 0.000001 ? `${inches}in` : `${round3(pt)}pt`;
+}
+function formatPageSize(page) {
+  return `${cssLength(page.width)} ${cssLength(page.height)}`;
+}
 function printAreaMeta(page) {
   const area = JSON.stringify({
     width: page.width,
@@ -2402,7 +2532,578 @@ function printAreaMeta(page) {
   return `<meta name="gp-print-area" content='${area.replace(/&/g, "&amp;").replace(/'/g, "&#39;")}'>`;
 }
 
+// src/engine/shared/gcpm-extract.ts
+var NESTED_AT_RULES = /^@(media|supports|layer|scope|container|document)\b/i;
+function scanRules(css) {
+  const out = [];
+  let i = 0;
+  let start = 0;
+  let depth = 0;
+  let bodyStart = -1;
+  while (i < css.length) {
+    const c = css[i];
+    if (c === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      i = end === -1 ? css.length : end + 2;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      i = skipString(css, i);
+      continue;
+    }
+    if (c === "{") {
+      if (depth === 0)
+        bodyStart = i;
+      depth++;
+      i++;
+      continue;
+    }
+    if (c === "}") {
+      depth--;
+      if (depth === 0) {
+        out.push({
+          prelude: stripComments(css.slice(start, bodyStart)).trim(),
+          body: css.slice(bodyStart + 1, i)
+        });
+        start = i + 1;
+      }
+      i++;
+      continue;
+    }
+    if (c === ";" && depth === 0) {
+      const stmt = stripComments(css.slice(start, i)).trim();
+      if (stmt)
+        out.push({ statement: stmt });
+      start = i + 1;
+      i++;
+      continue;
+    }
+    i++;
+  }
+  return out;
+}
+function stripComments(s) {
+  let out = "";
+  let i = 0;
+  while (i < s.length) {
+    if (s[i] === "/" && s[i + 1] === "*") {
+      const end = s.indexOf("*/", i + 2);
+      i = end === -1 ? s.length : end + 2;
+      continue;
+    }
+    if (s[i] === '"' || s[i] === "'") {
+      const end = skipString(s, i);
+      out += s.slice(i, end);
+      i = end;
+      continue;
+    }
+    out += s[i++];
+  }
+  return out;
+}
+function skipString(css, i) {
+  const quote = css[i];
+  i++;
+  while (i < css.length) {
+    if (css[i] === "\\")
+      i += 2;
+    else if (css[i] === quote)
+      return i + 1;
+    else
+      i++;
+  }
+  return i;
+}
+function parseDeclarations(body) {
+  const decls = {};
+  let i = 0;
+  let start = 0;
+  let depth = 0;
+  const push = (chunk) => {
+    const s = stripComments(chunk).trim();
+    if (!s)
+      return;
+    const colon = indexOfTopLevel(s, ":");
+    if (colon <= 0)
+      return;
+    const rawProp = s.slice(0, colon).trim();
+    const prop = rawProp.startsWith("--") ? rawProp : rawProp.toLowerCase();
+    const value = s.slice(colon + 1).trim().replace(/\s*!important$/i, "");
+    if (prop)
+      decls[prop] = value;
+  };
+  while (i < body.length) {
+    const c = body[i];
+    if (c === "/" && body[i + 1] === "*") {
+      const end = body.indexOf("*/", i + 2);
+      i = end === -1 ? body.length : end + 2;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      i = skipString(body, i);
+      continue;
+    }
+    if (c === "(" || c === "{" || c === "[")
+      depth++;
+    else if (c === ")" || c === "}" || c === "]")
+      depth--;
+    else if (c === ";" && depth === 0) {
+      push(body.slice(start, i));
+      start = i + 1;
+    }
+    i++;
+  }
+  push(body.slice(start));
+  return decls;
+}
+function indexOfTopLevel(s, ch) {
+  let depth = 0;
+  for (let i = 0;i < s.length; i++) {
+    const c = s[i];
+    if (c === '"' || c === "'") {
+      i = skipString(s, i) - 1;
+      continue;
+    }
+    if (c === "(")
+      depth++;
+    else if (c === ")")
+      depth--;
+    else if (c === ch && depth === 0)
+      return i;
+  }
+  return -1;
+}
+function extract(css) {
+  const model = {
+    pageRules: [],
+    stringSets: [],
+    pageAssignments: [],
+    breaks: [],
+    xrefs: [],
+    counterResets: [],
+    pageNames: [],
+    warnings: []
+  };
+  walk(css, model);
+  resolveGeometryVars(model, collectRootCustomProperties(css));
+  const names = new Set;
+  for (const r of model.pageRules)
+    if (r.name)
+      names.add(r.name);
+  for (const a of model.pageAssignments)
+    names.add(a.page);
+  model.pageNames = [...names];
+  return model;
+}
+var GEOMETRY_PROPS = [
+  "size",
+  "margin",
+  "margin-top",
+  "margin-right",
+  "margin-bottom",
+  "margin-left",
+  "bleed",
+  "marks"
+];
+function collectRootCustomProperties(css) {
+  const props = new Map;
+  const walkForRoot = (body) => {
+    for (const rule of scanRules(body)) {
+      if ("statement" in rule)
+        continue;
+      const { prelude, body: ruleBody } = rule;
+      if (NESTED_AT_RULES.test(prelude)) {
+        walkForRoot(ruleBody);
+        continue;
+      }
+      if (!prelude.startsWith("@")) {
+        const selectors = splitTopLevel(prelude, ",");
+        if (selectors.some((s) => s.trim() === ":root")) {
+          const decls = parseDeclarations(ruleBody);
+          for (const [k, v] of Object.entries(decls)) {
+            if (k.startsWith("--"))
+              props.set(k, v);
+          }
+        }
+      }
+    }
+  };
+  walkForRoot(css);
+  return props;
+}
+function matchParen(s, open) {
+  let depth = 0;
+  let i = open;
+  while (i < s.length) {
+    const c = s[i];
+    if (c === '"' || c === "'") {
+      i = skipString(s, i);
+      continue;
+    }
+    if (c === "(")
+      depth++;
+    else if (c === ")") {
+      depth--;
+      if (depth === 0)
+        return i;
+    }
+    i++;
+  }
+  return -1;
+}
+function resolveVarsInValue(value, customProps, stack = new Set) {
+  let out = "";
+  let i = 0;
+  while (i < value.length) {
+    const isVarStart = /^var\(/i.test(value.slice(i, i + 4)) && (i === 0 || !/[\w-]/.test(value[i - 1]));
+    if (!isVarStart) {
+      out += value[i];
+      i++;
+      continue;
+    }
+    const open = i + 3;
+    const close = matchParen(value, open);
+    if (close === -1) {
+      out += value.slice(i);
+      break;
+    }
+    const inner = value.slice(open + 1, close);
+    const commaIdx = indexOfTopLevel(inner, ",");
+    const name = (commaIdx === -1 ? inner : inner.slice(0, commaIdx)).trim();
+    const fallback = commaIdx === -1 ? undefined : inner.slice(commaIdx + 1).trim();
+    if (!/^--[\w-]+$/.test(name)) {
+      return { text: out, unresolved: `var(${inner}) is not a valid custom property reference` };
+    }
+    if (stack.has(name)) {
+      return { text: out, unresolved: `var(${name}) is circular` };
+    }
+    const rootValue = customProps.get(name);
+    if (rootValue !== undefined) {
+      const nested = resolveVarsInValue(rootValue, customProps, new Set(stack).add(name));
+      if (nested.unresolved)
+        return { text: out, unresolved: nested.unresolved };
+      out += nested.text;
+    } else if (fallback !== undefined) {
+      if (/\bvar\(/i.test(fallback)) {
+        return {
+          text: out,
+          unresolved: `var(${name}, ${fallback}) — a fallback containing another var() is not resolved`
+        };
+      }
+      out += fallback;
+    } else {
+      return {
+        text: out,
+        unresolved: `${name} is not defined at :root and var() has no fallback`
+      };
+    }
+    i = close + 1;
+  }
+  return { text: out };
+}
+function resolveGeometryVars(model, customProps) {
+  for (const rule of model.pageRules) {
+    for (const prop of GEOMETRY_PROPS) {
+      const value = rule.decls[prop];
+      if (!value || !/\bvar\(/i.test(value))
+        continue;
+      const { text, unresolved } = resolveVarsInValue(value, customProps);
+      if (unresolved) {
+        throw new Error(`${rule.raw} { ${prop}: ${value} } — cannot resolve ${unresolved}. ` + `Define the custom property at :root, add a literal var(--x, fallback) fallback, or use a literal value.`);
+      }
+      const unparsable = unparsableGeometry(prop, text);
+      if (unparsable) {
+        throw new Error(`${rule.raw} { ${prop}: ${value} } — resolves to \`${text.trim()}\`, ${unparsable}. ` + `Use a value this engine can read (a length like 0.75in/12pt/10mm, or a named page size for \`size\`).`);
+      }
+      rule.decls[prop] = text;
+    }
+  }
+}
+function unparsableGeometry(prop, text) {
+  const t = text.trim();
+  if (prop === "size") {
+    if (!t)
+      return "which is empty";
+    return parseSize(t) ? undefined : "which is not a page size";
+  }
+  if (prop === "margin" || prop.startsWith("margin-")) {
+    if (!t)
+      return "which is empty";
+    const parts = t.split(/\s+/);
+    if (prop !== "margin" && parts.length !== 1)
+      return "which is not a single length";
+    if (parts.length > 4)
+      return "which is not a valid margin";
+    const bad = parts.filter((p) => toPt(p) === undefined);
+    if (bad.length)
+      return `which this engine cannot read as a length (\`${bad[0]}\`)`;
+    return;
+  }
+  if (prop === "bleed") {
+    if (!t)
+      return "which is empty";
+    if (/^(auto|none)$/i.test(t))
+      return;
+    return toPt(t) === undefined ? "which this engine cannot read as a length" : undefined;
+  }
+  return;
+}
+function walk(css, model) {
+  for (const rule of scanRules(css)) {
+    if ("statement" in rule)
+      continue;
+    const { prelude, body } = rule;
+    if (NESTED_AT_RULES.test(prelude)) {
+      walk(body, model);
+      continue;
+    }
+    if (/^@page\b/i.test(prelude)) {
+      model.pageRules.push(parsePageRule(prelude, body));
+      continue;
+    }
+    if (prelude.startsWith("@"))
+      continue;
+    parseQualifiedRule(prelude, body, model);
+  }
+}
+function parsePageRule(prelude, body) {
+  const sel = prelude.replace(/^@page\s*/i, "").trim();
+  const nameMatch = /^([A-Za-z_][\w-]*)/.exec(sel);
+  const pseudos = [...sel.matchAll(/:([A-Za-z-]+)(\([^)]*\))?/g)].map((m) => m[1] + (m[2] ?? ""));
+  const rule = {
+    name: nameMatch?.[1],
+    pseudos,
+    decls: {},
+    marginBoxes: {},
+    raw: `@page ${sel}`.trim()
+  };
+  let rest = "";
+  let i = 0;
+  while (i < body.length) {
+    const at = findNextAtRule(body, i);
+    if (at === -1) {
+      rest += body.slice(i);
+      break;
+    }
+    rest += body.slice(i, at);
+    const open = body.indexOf("{", at);
+    if (open === -1) {
+      rest += body.slice(at);
+      break;
+    }
+    const name = body.slice(at + 1, open).trim().toLowerCase();
+    let depth = 1;
+    let j = open + 1;
+    while (j < body.length && depth > 0) {
+      const c = body[j];
+      if (c === "/" && body[j + 1] === "*") {
+        const end = body.indexOf("*/", j + 2);
+        j = end === -1 ? body.length : end + 2;
+        continue;
+      }
+      if (c === '"' || c === "'") {
+        j = skipString(body, j);
+        continue;
+      }
+      if (c === "{")
+        depth++;
+      else if (c === "}")
+        depth--;
+      j++;
+    }
+    rule.marginBoxes[`@${name}`] = parseDeclarations(body.slice(open + 1, j - 1));
+    i = j;
+  }
+  rule.decls = parseDeclarations(rest);
+  return rule;
+}
+function findNextAtRule(body, start) {
+  let i = start;
+  while (i < body.length) {
+    const c = body[i];
+    if (c === "/" && body[i + 1] === "*") {
+      const end = body.indexOf("*/", i + 2);
+      i = end === -1 ? body.length : end + 2;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      i = skipString(body, i);
+      continue;
+    }
+    if (c === "@")
+      return i;
+    i++;
+  }
+  return -1;
+}
+function parseQualifiedRule(selector, body, model) {
+  const decls = parseDeclarations(body);
+  for (const [prop, value] of Object.entries(decls)) {
+    if (prop === "string-set") {
+      for (const entry of splitTopLevel(value, ",")) {
+        const m = /^\s*([A-Za-z_][\w-]*)\s+(.+)$/.exec(entry);
+        if (m && m[1] !== undefined && m[2] !== undefined)
+          model.stringSets.push({ selector, name: m[1], value: m[2].trim() });
+      }
+    } else if (prop === "page") {
+      if (value && value !== "auto")
+        model.pageAssignments.push({ selector, page: value.trim() });
+    } else if (prop === "break-before" || prop === "break-after" || prop === "break-inside") {
+      model.breaks.push({ selector, prop, value });
+    } else if (prop === "counter-reset") {
+      const m = /\bpage\s+(-?\d+)/.exec(value);
+      if (m)
+        model.counterResets.push({ selector, start: Number(m[1]) });
+    } else if (prop === "content") {
+      for (const fn of ["target-counter", "target-text", "leader", "string"]) {
+        if (new RegExp(`\\b${fn}\\s*\\(`).test(value)) {
+          model.xrefs.push({ selector, content: value, fn });
+        }
+      }
+    }
+  }
+}
+function splitTopLevel(s, sep) {
+  const out = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0;i < s.length; i++) {
+    const c = s[i];
+    if (c === '"' || c === "'") {
+      i = skipString(s, i) - 1;
+      continue;
+    }
+    if (c === "(")
+      depth++;
+    else if (c === ")")
+      depth--;
+    else if (c === sep && depth === 0) {
+      out.push(s.slice(start, i));
+      start = i + 1;
+    }
+  }
+  out.push(s.slice(start));
+  return out.map((x) => x.trim()).filter(Boolean);
+}
+var UNITS_PER_PT = {
+  pt: 1,
+  px: 0.75,
+  in: 72,
+  pc: 12,
+  cm: 72 / 2.54,
+  mm: 72 / 25.4,
+  q: 72 / 101.6
+};
+function toPt(value) {
+  const m = /^(-?[\d.]+)([a-z%]*)$/i.exec(value.trim());
+  if (!m)
+    return;
+  const n = Number(m[1]);
+  const unit = (m[2] || "px").toLowerCase();
+  const factor = UNITS_PER_PT[unit];
+  return factor === undefined ? undefined : n * factor;
+}
+var PAGE_SIZES = {
+  a5: [419.53, 595.28],
+  a4: [595.28, 841.89],
+  a3: [841.89, 1190.55],
+  b5: [498.9, 708.66],
+  b4: [708.66, 1000.63],
+  "jis-b5": [515.91, 728.5],
+  "jis-b4": [728.5, 1031.81],
+  letter: [612, 792],
+  legal: [612, 1008],
+  ledger: [1224, 792]
+};
+function parseSize(value) {
+  const parts = value.trim().split(/\s+/);
+  let landscape = false;
+  const lens = [];
+  let named;
+  for (const p of parts) {
+    const key = p.toLowerCase();
+    if (key === "landscape")
+      landscape = true;
+    else if (key === "portrait")
+      continue;
+    else if (PAGE_SIZES[key])
+      named = PAGE_SIZES[key];
+    else {
+      const pt = toPt(p);
+      if (pt !== undefined)
+        lens.push(pt);
+    }
+  }
+  let w, h;
+  if (named)
+    [w, h] = named;
+  else if (lens.length === 1)
+    [w, h] = [lens[0], lens[0]];
+  else if (lens.length >= 2)
+    [w, h] = [lens[0], lens[1]];
+  else
+    return;
+  if (landscape && h > w)
+    [w, h] = [h, w];
+  return { width: w, height: h };
+}
+function parseMargin(value) {
+  const parts = value.trim().split(/\s+/).map((p) => toPt(p) ?? 0);
+  const a = parts[0] ?? 0;
+  const b = parts[1] ?? a;
+  const c = parts[2] ?? a;
+  const d = parts[3] ?? b;
+  return { top: a, right: b, bottom: c, left: d };
+}
+function resolvePage(model, ctx = {}) {
+  const wanted = new Set(ctx.pseudos ?? []);
+  const applicable = model.pageRules.filter((r) => r.name ? r.name === ctx.name : true).filter((r) => r.pseudos.every((p) => wanted.has(p))).sort((a, b) => specificity(a) - specificity(b));
+  const decls = {};
+  const marginBoxes = {};
+  const margin = { top: 72, right: 72, bottom: 72, left: 72 };
+  for (const rule of applicable) {
+    for (const [prop, value] of Object.entries(rule.decls)) {
+      if (prop === "margin")
+        Object.assign(margin, parseMargin(value));
+      else if (prop === "margin-top" || prop === "margin-right" || prop === "margin-bottom" || prop === "margin-left") {
+        const side = prop.slice(7);
+        margin[side] = toPt(value) ?? margin[side];
+      }
+    }
+    Object.assign(decls, rule.decls);
+    for (const [box, d] of Object.entries(rule.marginBoxes)) {
+      marginBoxes[box] = { ...marginBoxes[box] ?? {}, ...d };
+    }
+  }
+  const size = parseSize(decls.size ?? "letter") ?? { width: 612, height: 792 };
+  return {
+    decls,
+    marginBoxes,
+    geometry: {
+      width: size.width,
+      height: size.height,
+      margin,
+      bleed: decls.bleed ? toPt(decls.bleed) ?? 0 : 0,
+      marks: (decls.marks ?? "none").split(/\s+/).filter((m) => m && m !== "none")
+    }
+  };
+}
+function specificity(r) {
+  return (r.name ? 2 : 0) + r.pseudos.length;
+}
+
 // src/lib/markdown/assemble.ts
+function defaultPageSizeCss(css, page) {
+  if (!page || !isPositivePoints(page.width) || !isPositivePoints(page.height))
+    return null;
+  try {
+    if (resolvePage(extract(css)).decls.size !== undefined)
+      return null;
+  } catch {
+    return null;
+  }
+  return `@page { size: ${formatPageSize(page)}; }`;
+}
 async function assembleBookHtml(opts) {
   const title = opts.title ?? "Document";
   const projectCss = opts.projectCss ?? "";
@@ -2440,16 +3141,21 @@ async function assembleBookHtml(opts) {
       imageRefs.add(ref);
     opts.onImageRefs([...imageRefs]);
   }
+  const pageSize = defaultPageSizeCss(`${pluginCss}
+${projectCss}`, opts.printArea);
   const inlineCss = [
     "@layer gp.marker, gp.vocab;",
     `/* gutterpress markers */
 @layer gp.marker {
 ${MARKER_CSS.trim()}
+${TWO_VERSIONS_CSS.trim()}
 }`,
     `/* gutterpress */
 @layer gp.vocab {
 ${GUTTERPRESS_CSS.trim()}
 }`,
+    pageSize ? `/* page size (manifest) */
+${pageSize}` : null,
     pluginCss ? `/* extension css */
 ${pluginCss.trim()}` : null,
     `/* column alignment */