@loopress/cli 0.28.0 → 0.30.0

package/dist/utils/resource-dirs.js

@@ -1,33 +1,45 @@
 import { join } from 'node:path';
-// The default subdirectory for each file-backed resource, relative to rootDir. `lps init`
-// writes these same defaults into loopress.json, keep the two in sync.
+// The default subdirectory for each file-backed resource, relative to rootDir. Used whenever
+// loopress.json has no `<kind>Dir` key, which is the case for a fresh `lps init`.
 export const RESOURCE_DIR_DEFAULTS = {
     acf: 'acf',
     api: 'api',
     apps: 'apps',
+    blockCss: 'theme/blocks',
+    cpt: 'cpt',
+    css: 'theme/css',
     form: 'forms',
     hooks: 'hooks',
     menu: 'menus',
+    meta: 'meta',
     options: 'options',
     page: 'pages',
-    part: 'parts',
-    seo: 'seo',
+    part: 'theme/parts',
+    pattern: 'patterns',
+    role: 'roles',
     snippets: 'snippets',
-    template: 'templates',
+    taxonomy: 'taxonomies',
+    template: 'theme/templates',
     themeStyles: 'theme',
 };
 const CONFIG_KEY = {
     acf: 'acfDir',
     api: 'apiDir',
     apps: 'appsDir',
+    blockCss: 'blockCssDir',
+    cpt: 'cptDir',
+    css: 'cssDir',
     form: 'formDir',
     hooks: 'hooksDir',
     menu: 'menuDir',
+    meta: 'metaDir',
     options: 'optionsDir',
     page: 'pageDir',
     part: 'partDir',
-    seo: 'seoDir',
+    pattern: 'patternDir',
+    role: 'roleDir',
     snippets: 'snippetsDir',
+    taxonomy: 'taxonomyDir',
     template: 'templateDir',
     themeStyles: 'themeStylesDir',
 };

package/dist/utils/template-format.d.ts

@@ -1,5 +1,6 @@
-import { type PageProblem } from './page-format.js';
+import { type PageProblem, type SlugRule } from './page-format.js';
 export declare const CHILD_THEME_ENDPOINT = "loopress/v1/child-theme";
+export declare const TEMPLATE_SLUG_RULE: SlugRule;
 export type Template = {
     html: string;
     postTypes?: string[];
@@ -20,6 +21,7 @@ export type ChildTheme = {
     parts: Part[];
     stylesheet: string;
     templates: Template[];
+    unknownBlocks?: string[];
 };
 export declare function parseTemplateFile(slug: string, raw: string): Template;
 export declare function parsePartFile(slug: string, raw: string): Part;

package/dist/utils/template-format.js

@@ -1,5 +1,12 @@
 import { parseHtmlHeader, readLocalHtmlFiles, titleFromSlug } from './page-format.js';
 export const CHILD_THEME_ENDPOINT = 'loopress/v1/child-theme';
+// Mirrored server-side in ChildThemeController. Looser than a page slug: the template hierarchy
+// embeds post type and taxonomy slugs as is (`taxonomy-download_tag`, `single-my_type`), and those
+// follow sanitize_key(), so lowercase letters, digits, `_` and `-`.
+export const TEMPLATE_SLUG_RULE = {
+    message: 'the file name must be lowercase letters, digits, "_" and "-" (e.g. "taxonomy-download_tag.html")',
+    pattern: /^[a-z0-9_-]+$/,
+};
 // A block delimiter as the first line (`<!-- wp:template-part ... /-->`, the usual one) is markup,
 // not a header.
 const BLOCK_START = /^\s*<!--\s*\/?wp:/;
@@ -28,9 +35,9 @@ export function parsePartFile(slug, raw) {
     const nameArea = /^(header|footer)(-|$)/.exec(slug)?.[1] ?? 'uncategorized';
     return { area: meta.area || nameArea, html: body, slug, title: meta.title || titleFromSlug(slug) };
 }
-// Same directory rules as pages/ (flat, `.html` only, strict slugs), every problem at once.
+// Same directory rules as pages/ (flat, `.html` only), with template slugs, every problem at once.
 export async function readLocalTemplates(templatesDir, partsDir) {
-    const templates = await readLocalHtmlFiles(templatesDir, parseTemplateFile);
-    const parts = await readLocalHtmlFiles(partsDir, parsePartFile);
+    const templates = await readLocalHtmlFiles(templatesDir, parseTemplateFile, TEMPLATE_SLUG_RULE);
+    const parts = await readLocalHtmlFiles(partsDir, parsePartFile, TEMPLATE_SLUG_RULE);
     return { parts: parts.files, problems: [...templates.problems, ...parts.problems], templates: templates.files };
 }

package/dist/utils/theme-css.d.ts

@@ -0,0 +1,19 @@
+import { type PageProblem } from './page-format.js';
+export type BlockStyle = {
+    css: string;
+    name: string;
+};
+export type ThemeAsset = {
+    content: string;
+    path: string;
+};
+export type ThemeCss = {
+    assets: ThemeAsset[];
+    blocks: BlockStyle[];
+    style: string;
+};
+export declare const STYLE_ENTRY = "style.css";
+export declare function bundleThemeCss(cssDir: string, blocksDir: string): Promise<{
+    css: ThemeCss;
+    problems: PageProblem[];
+}>;

package/dist/utils/theme-css.js

@@ -0,0 +1,100 @@
+import { build } from 'esbuild';
+import { Buffer } from 'node:buffer';
+import { existsSync } from 'node:fs';
+import { readdir } from 'node:fs/promises';
+import { extname, join, relative, resolve, sep } from 'node:path';
+// The global stylesheet's entry: it @imports the rest of theme/css/ in cascade order.
+export const STYLE_ENTRY = 'style.css';
+// WordPress's own block name rule (register_block_type): lowercase letters, digits and dashes,
+// starting with a letter, on both sides of the slash.
+const BLOCK_SEGMENT = /^[a-z][a-z0-9-]*$/;
+const ASSET_EXTENSIONS = ['.avif', '.eot', '.gif', '.jpeg', '.jpg', '.otf', '.png', '.svg', '.ttf', '.webp', '.woff', '.woff2'];
+async function listFiles(dir) {
+    try {
+        const entries = await readdir(dir, { recursive: true, withFileTypes: true });
+        return entries
+            .filter((entry) => entry.isFile() && !entry.name.startsWith('.'))
+            .map((entry) => join(entry.parentPath, entry.name))
+            .toSorted((a, b) => a.localeCompare(b));
+    }
+    catch (error) {
+        if (error.code === 'ENOENT')
+            return [];
+        throw error;
+    }
+}
+async function readBlockEntries(blocksDir, problems) {
+    const entries = [];
+    for (const file of await listFiles(blocksDir)) {
+        const segments = relative(blocksDir, file).split(sep);
+        const [namespace, block] = [segments[0], segments[1]?.replace(/\.css$/, '')];
+        if (segments.length !== 2 || extname(file) !== '.css' || !BLOCK_SEGMENT.test(namespace) || !BLOCK_SEGMENT.test(block)) {
+            problems.push({ file, message: `must be <namespace>/<block>.css, named after a block (e.g. ${join(blocksDir, 'core', 'button.css')})` });
+            continue;
+        }
+        entries.push({ file, name: `${namespace}/${block}` });
+    }
+    return entries;
+}
+function buildProblems(error) {
+    const { errors } = error;
+    if (!Array.isArray(errors))
+        throw error;
+    return errors.map((message) => ({
+        file: message.location ? `${message.location.file}:${message.location.line}` : 'esbuild',
+        message: message.text,
+    }));
+}
+// Bundles theme/css/style.css and every theme/blocks/<namespace>/<block>.css with esbuild:
+// @import resolved, relative url() copied to assets/ and rewritten, minified. Paths in the result
+// are the child theme's: style.css, blocks/core/button.css, assets/inter-HASH.woff2.
+export async function bundleThemeCss(cssDir, blocksDir) {
+    const problems = [];
+    const empty = { assets: [], blocks: [], style: '' };
+    const styleEntry = join(cssDir, STYLE_ENTRY);
+    const hasStyle = existsSync(styleEntry);
+    if (!hasStyle && (await listFiles(cssDir)).some((file) => extname(file) === '.css')) {
+        problems.push({ file: cssDir, message: `has CSS files but no ${STYLE_ENTRY}, the entry that @imports them: nothing in it would be loaded` });
+    }
+    const blocks = await readBlockEntries(blocksDir, problems);
+    if (problems.length > 0)
+        return { css: empty, problems };
+    const entryPoints = [
+        ...(hasStyle ? [{ in: resolve(styleEntry), out: 'style' }] : []),
+        ...blocks.map((block) => ({ in: resolve(block.file), out: `blocks/${block.name}` })),
+    ];
+    if (entryPoints.length === 0)
+        return { css: empty, problems };
+    // Never written: outdir only anchors the output paths and the relative url() rewrites.
+    const outdir = resolve('/loopress-child');
+    let outputFiles;
+    try {
+        ;
+        ({ outputFiles } = await build({
+            assetNames: 'assets/[name]-[hash]',
+            bundle: true,
+            charset: 'utf8',
+            entryPoints,
+            loader: Object.fromEntries(ASSET_EXTENSIONS.map((extension) => [extension, 'file'])),
+            logLevel: 'silent',
+            minify: true,
+            outdir,
+            write: false,
+        }));
+    }
+    catch (error) {
+        return { css: empty, problems: buildProblems(error) };
+    }
+    const css = { assets: [], blocks: [], style: '' };
+    for (const output of outputFiles) {
+        const path = relative(outdir, output.path).split(sep).join('/');
+        if (path === STYLE_ENTRY)
+            css.style = output.text;
+        else if (path.startsWith('blocks/') && path.endsWith('.css'))
+            css.blocks.push({ css: output.text, name: path.slice('blocks/'.length, -'.css'.length) });
+        else
+            css.assets.push({ content: Buffer.from(output.contents).toString('base64'), path });
+    }
+    css.blocks.sort((a, b) => a.name.localeCompare(b.name));
+    return { css, problems };
+}