bestax-migrate 2.26.0 → 2.28.0

package/dist/sources/bulma-classes/glyph.js

@@ -68,6 +68,8 @@ const FA_MODIFIERS = new Set([
     'fa-sharp',
     'fa-classic',
 ]);
+/** The class Font Awesome's script puts on each `<svg>` it draws. */
+const DRAWN = 'svg-inline--fa';
 /** Material Design Icons' classes that modify a glyph rather than name one. */
 const MDI_MODIFIERS = new Set([
     'mdi-18px',
@@ -123,6 +125,68 @@ export function readGlyph(glyph) {
     }
     return undefined;
 }
+/**
+ * The glyph of Font Awesome's own markup, `<i class="fas fa-home"
+ * aria-hidden="true">`: an `<i>` that carries that attribute and nothing
+ * else, and that `readGlyph` reads once it's set aside. Undefined for any
+ * other `<i>`, one that `readGlyph` reads as it is included.
+ */
+export function readHiddenGlyph(glyph) {
+    const hidden = glyph?.attributes.get('aria-hidden');
+    if (glyph?.attributes.size !== 1 || (hidden !== 'true' && hidden !== true)) {
+        return undefined;
+    }
+    return readGlyph({ ...glyph, attributes: new Map() });
+}
+/**
+ * A glyph as the props `Icon` is given, in the order they're written: one
+ * feature as a string, and more than one as a list.
+ */
+export function glyphProps(glyph) {
+    const { features } = glyph;
+    return [
+        ['library', glyph.library],
+        ['name', glyph.name],
+        ...(glyph.variant ? [['variant', glyph.variant]] : []),
+        ...(features
+            ? [
+                ['features', features.length === 1 ? features[0] : features],
+            ]
+            : []),
+    ];
+}
+/**
+ * The glyph Font Awesome's script drew an `<svg class="svg-inline--fa">` for,
+ * as the props `Icon` renders the `<i>` it was drawn from: the name from its
+ * `data-icon` (else its one class naming a glyph), the style from its
+ * `data-prefix`, and its other classes but the width one the script adds.
+ * For advice only: `Icon` renders that `<i>`, never the `<svg>`.
+ */
+export function readDrawnGlyph(svg) {
+    if (svg?.tag !== 'svg' || !svg.tokens?.includes(DRAWN))
+        return undefined;
+    const tokens = svg.tokens.filter(token => token !== DRAWN && !/^fa-w-\d+$/.test(token));
+    const prefix = svg.attributes.get('data-prefix');
+    const style = typeof prefix === 'string' && Object.hasOwn(FA_STYLES, prefix)
+        ? prefix
+        : 'fas';
+    const icon = svg.attributes.get('data-icon');
+    const named = typeof icon === 'string' && /^[a-z0-9-]+$/.test(icon)
+        ? {
+            name: icon,
+            features: tokens.filter(token => token !== `fa-${icon}`),
+        }
+        : nameIn(tokens, 'fa-', FA_MODIFIERS, style);
+    if (!named)
+        return undefined;
+    const variant = FA_STYLES[style];
+    return {
+        library: 'fa',
+        name: named.name,
+        ...(variant && { variant }),
+        ...(named.features.length > 0 && { features: named.features }),
+    };
+}
 /**
  * The one class among `tokens` that names a glyph (`fa-home`), without its
  * prefix, and the rest but `base`, as features. Undefined unless exactly one

package/dist/sources/bulma-classes/html-assets.d.ts

@@ -0,0 +1,87 @@
+/**
+ * The stylesheets and scripts a Bulma page loads, read from their URLs: what
+ * each one is (`html-asset:<kind>`, `ASSET_KINDS` in `html-rules.ts`) and what
+ * to do about it now that a component renders the page. Pure: the caller
+ * reads the page, decides where a note goes and whether Bulma's stylesheet
+ * becomes an import.
+ *
+ * A message names bestax's component for an extension only where one does
+ * what the extension did; each claim here was read off the component.
+ */
+import type { CssMode } from '../../types.js';
+export type Loads = 'stylesheet' | 'script';
+export type Asset = 
+/** Bulma's stylesheet; `build` names one of its other builds. */
+{
+    kind: 'bulma';
+    build: string | null;
+    version: string | null;
+} | {
+    kind: 'font-awesome';
+    major: number | null;
+    kit: boolean;
+}
+/** `name` is the package, as the URL spells it (`bulma-carousel`). */
+ | {
+    kind: 'bulma-extension';
+    name: string;
+} | {
+    kind: 'jquery';
+} | {
+    kind: 'webfont';
+    icons: 'material-icons' | 'material-symbols' | null;
+} | {
+    kind: 'stylesheet';
+} | {
+    kind: 'script';
+};
+export declare function classifyAsset(url: string, loads: Loads): Asset;
+export declare const GUIDE_0_9_TO_1 = "https://bestax.io/docs/guides/getting-started/migration/bulma-0-9-to-1";
+/** A primary color class: `is-primary`, `has-text-primary-dark`, … */
+export declare const PRIMARY_CLASS: RegExp;
+export interface BulmaFacts {
+    /** The URL, as the TODO quotes it. */
+    quoted: string;
+    version: string | null;
+    css: CssMode;
+    /** Whether the page's markup has a primary color class. */
+    usesPrimary: boolean;
+    /** Whether the page's module goes into a Next.js app. */
+    nextjs?: boolean;
+}
+/**
+ * What a page's link to Bulma's standard stylesheet leaves to do. Under
+ * `keep` it is only reported. Under `bestax` and `bulma` the module imports
+ * the stylesheet in its place, so what is left is the move to Bulma 1 (for a
+ * page made for an older one, or one whose URL doesn't say) and, under
+ * `bestax`, its primary color: nothing at all for a Bulma 1 page with no
+ * primary class, which then has no note. A Next.js app is the exception: its
+ * Pages Router takes a global stylesheet only in `pages/_app`, so there the
+ * module imports none, and the note says where it goes.
+ */
+export declare function bulmaStylesheetMessage(facts: BulmaFacts): string | null;
+/**
+ * A link to Bulma's stylesheet for some media only (`print`), which an
+ * import, applying to every medium, can't stand for.
+ */
+export declare function bulmaMediaMessage(quoted: string, version: string | null, media: string): string;
+/** One of Bulma's other builds, which no `--css` mode imports for the page. */
+export declare function bulmaBuildMessage(build: string, quoted: string): string;
+export declare function fontAwesomeMessage(asset: Extract<Asset, {
+    kind: 'font-awesome';
+}>, quoted: string): string;
+/**
+ * The extensions bestax has a component for, by package (a scoped one by its
+ * name alone), with the component that does what the extension did.
+ */
+export declare const EXTENSION_COMPONENTS: Readonly<Record<string, string>>;
+export declare function extensionMessage(name: string, quoted: string[], loads: ReadonlySet<Loads>, css: CssMode): string;
+export declare function jqueryMessage(quoted: string): string;
+export declare function webfontMessage(asset: Extract<Asset, {
+    kind: 'webfont';
+}>, quoted: string): string;
+/** Where a stylesheet or script is, read beside the page. */
+export type Place = 'beside' | 'missing' | 'elsewhere';
+export declare function stylesheetMessage(quoted: string, place: Place, target: string): string;
+export declare function scriptMessage(quoted: string, place: Place, target: string): string;
+//# sourceMappingURL=html-assets.d.ts.map

package/dist/sources/bulma-classes/html-assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-assets.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html-assets.ts"],"names":[],"mappings":"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"}

package/dist/sources/bulma-classes/html-assets.js

@@ -0,0 +1,246 @@
+/**
+ * The stylesheets and scripts a Bulma page loads, read from their URLs: what
+ * each one is (`html-asset:<kind>`, `ASSET_KINDS` in `html-rules.ts`) and what
+ * to do about it now that a component renders the page. Pure: the caller
+ * reads the page, decides where a note goes and whether Bulma's stylesheet
+ * becomes an import.
+ *
+ * A message names bestax's component for an extension only where one does
+ * what the extension did; each claim here was read off the component.
+ */
+import { FONT_AWESOME_PEER_RANGE } from '../_shared/deps-common.js';
+/** A URL's path, without its query and fragment. */
+function pathOf(url) {
+    return url.trim().replace(/[?#].*$/, '');
+}
+function hostOf(url) {
+    return url.trim().match(/^(?:[a-z][a-z\d+.-]*:)?\/\/([^/?#]+)/i)?.[1] ?? null;
+}
+/**
+ * Bulma's own stylesheets: the standard one, and the other builds Bulma 1
+ * ships under `css/versions/` and Bulma 0.9 shipped beside it (`bulma-rtl`).
+ */
+const BULMA_BUILD = /(?:^|[/\\])bulma(?:-(rtl|no-dark-mode|no-helpers-prefixed|no-helpers|prefixed))?(?:\.min)?\.css$/i;
+/** `bulma@0.9.4` (npm CDNs) and `bulma/0.9.4/` (cdnjs). */
+const BULMA_VERSION = /(?:^|[/@])bulma(?:@|\/)v?(\d+(?:\.\d+){0,2})(?=\/|$)/i;
+const FONT_AWESOME = /font-?awesome/i;
+const FONT_AWESOME_MAJOR = [
+    /(?:fontawesome-(?:free|pro)|font-awesome)(?:@|\/)v?(\d+)/i,
+    /fontawesome\.com\/releases\/v(\d+)/i,
+];
+const FONT_AWESOME_KIT = /(?:^|\/\/)kit\.fontawesome\.com\//i;
+/** A package whose name starts `bulma-`, as a path segment or a file. */
+const EXTENSION = /(?:^|[/\\])((?:@creativebulma\/)?bulma-[a-z\d]+(?:-[a-z\d]+)*)(?=@|[/\\]|(?:\.min)?\.(?:css|js)$)/i;
+/** jQuery itself, not a plugin: `jquery-3.7.1.min.js`, `jquery@3`. */
+const JQUERY = /(?:^|[/\\])jquery(?:-\d+(?:\.\d+)*)?(?:\.slim)?(?:\.min)?\.js$|(?:^|\/)jquery@[\d.]+$/i;
+/** Hosts that serve a web font's stylesheet. */
+const WEBFONT_HOSTS = new Set([
+    'fonts.googleapis.com',
+    'fonts.bunny.net',
+    'use.typekit.net',
+    'fonts.cdnfonts.com',
+    'api.fontshare.com',
+]);
+export function classifyAsset(url, loads) {
+    const urlPath = pathOf(url);
+    if (loads === 'stylesheet') {
+        const build = BULMA_BUILD.exec(urlPath);
+        if (build) {
+            return {
+                kind: 'bulma',
+                build: build[1]?.toLowerCase() ?? null,
+                version: BULMA_VERSION.exec(urlPath)?.[1] ?? null,
+            };
+        }
+    }
+    if (FONT_AWESOME.test(url)) {
+        const major = FONT_AWESOME_MAJOR.map(pattern => pattern.exec(urlPath)).find(Boolean)?.[1];
+        return {
+            kind: 'font-awesome',
+            major: major === undefined ? null : Number(major),
+            kit: FONT_AWESOME_KIT.test(url.trim()),
+        };
+    }
+    const extension = EXTENSION.exec(urlPath)?.[1];
+    if (extension)
+        return { kind: 'bulma-extension', name: extension };
+    if (loads === 'script') {
+        return JQUERY.test(urlPath) ? { kind: 'jquery' } : { kind: 'script' };
+    }
+    const host = hostOf(url)?.toLowerCase();
+    if (host && WEBFONT_HOSTS.has(host)) {
+        let family = url.replace(/\+/g, ' ');
+        try {
+            family = decodeURIComponent(family);
+        }
+        catch {
+            // A malformed escape: read the families as written.
+        }
+        return {
+            kind: 'webfont',
+            icons: /family=Material Symbols/i.test(family)
+                ? 'material-symbols'
+                : /family=Material Icons/i.test(family)
+                    ? 'material-icons'
+                    : null,
+        };
+    }
+    return { kind: 'stylesheet' };
+}
+// ---- Bulma's stylesheet ------------------------------------------------------
+export const GUIDE_0_9_TO_1 = 'https://bestax.io/docs/guides/getting-started/migration/bulma-0-9-to-1';
+/** Whether a version Bulma's URL names is older than 1. */
+function preV1(version) {
+    return Number(version.split('.')[0]) < 1;
+}
+/** A primary color class: `is-primary`, `has-text-primary-dark`, … */
+export const PRIMARY_CLASS = /^(?:is|has-text|has-background)-primary(?:-|$)/;
+/**
+ * What a page's link to Bulma's standard stylesheet leaves to do. Under
+ * `keep` it is only reported. Under `bestax` and `bulma` the module imports
+ * the stylesheet in its place, so what is left is the move to Bulma 1 (for a
+ * page made for an older one, or one whose URL doesn't say) and, under
+ * `bestax`, its primary color: nothing at all for a Bulma 1 page with no
+ * primary class, which then has no note. A Next.js app is the exception: its
+ * Pages Router takes a global stylesheet only in `pages/_app`, so there the
+ * module imports none, and the note says where it goes.
+ */
+export function bulmaStylesheetMessage(facts) {
+    const { quoted, version, css, usesPrimary, nextjs = false } = facts;
+    const named = version === null ? 'Bulma' : `Bulma ${version}`;
+    if (css === 'keep') {
+        return `the page loads ${named} from \`${quoted}\`, and a component doesn't: load Bulma once for the app, from its entry (\`import 'bulma/css/bulma.min.css'\`, with \`bulma${version === null ? '' : `@${version}`}\` installed) or a \`<link>\` in its index.html`;
+    }
+    const said = [];
+    if (version === null) {
+        said.push(`the URL doesn't say which Bulma it is, so if it predates Bulma 1, read the Bulma 0.9 to 1 guide (${GUIDE_0_9_TO_1}) for what changed`);
+    }
+    else if (preV1(version)) {
+        said.push(`the page was made for ${named}, so read the Bulma 0.9 to 1 guide (${GUIDE_0_9_TO_1}) for what changed`);
+    }
+    if (css === 'bestax' && usesPrimary) {
+        said.push("bestax's bundle builds Bulma with bestax blue as its primary, so the page's primary colors (`is-primary` and its kind) turn from Bulma's turquoise to blue: to keep them, set the `--bulma-primary-*` variables, `--bulma-primary-invert-l` among them (the bestax-migrate skill's `references/css-migration.md` says which), or use `--css bulma`");
+    }
+    if (nextjs) {
+        const target = css === 'bestax'
+            ? "`import '@allxsmith/bestax-bulma/bestax.css'`"
+            : "`import 'bulma/css/bulma.min.css'` (with `bulma` in package.json) and `import '@allxsmith/bestax-bulma/extras.css'`";
+        return [
+            `the page loads ${named} from \`${quoted}\`, and in a Next.js app a global stylesheet is imported once, from the root layout (App Router) or \`pages/_app\` (Pages Router, which takes one nowhere else), so the module imports none: write ${target} there`,
+            ...said,
+        ].join('; and ');
+    }
+    if (said.length === 0)
+        return null;
+    const imported = css === 'bestax'
+        ? "the module imports bestax's bundle in its place (`@allxsmith/bestax-bulma/bestax.css`), which is Bulma 1 with bestax's extras"
+        : "the module imports Bulma's stylesheet in its place (`bulma/css/bulma.min.css`, with bestax's `extras.css`), and `--css bulma` moves the app to Bulma 1";
+    return `the page loaded ${named} from \`${quoted}\`, and ${imported}: ${said.join('; and ')}`;
+}
+/**
+ * A link to Bulma's stylesheet for some media only (`print`), which an
+ * import, applying to every medium, can't stand for.
+ */
+export function bulmaMediaMessage(quoted, version, media) {
+    const named = version === null ? 'Bulma' : `Bulma ${version}`;
+    return `the page loads ${named} from \`${quoted}\` for \`media="${media}"\` only, and a component doesn't: load it once for the app from a \`<link>\` in its index.html with the same \`media\`; the codemod writes an import only for a link with no media query, since an import applies to every medium`;
+}
+/** One of Bulma's other builds, which no `--css` mode imports for the page. */
+export function bulmaBuildMessage(build, quoted) {
+    return `the page loads Bulma's \`${build}\` build from \`${quoted}\`, and a component doesn't: load it once for the app, from its entry or a \`<link>\` in its index.html; the codemod writes an import only for Bulma's standard stylesheet (bestax's own builds, Bulma with its extras, are under \`@allxsmith/bestax-bulma/versions/\`)`;
+}
+// ---- Font Awesome ------------------------------------------------------------
+const ICON_LOADS_NO_FONT = "bestax's `Icon` loads no font of its own";
+const INSTALL_FONT_AWESOME = `install \`@fortawesome/fontawesome-free\` (bestax-bulma's optional peer range is \`${FONT_AWESOME_PEER_RANGE}\`) and import its \`css/all.min.css\` from the app's entry`;
+export function fontAwesomeMessage(asset, quoted) {
+    const { major, kit } = asset;
+    if (kit) {
+        return `the page loads a Font Awesome kit from \`${quoted}\`, whose version the URL doesn't say: ${ICON_LOADS_NO_FONT}, so keep loading the kit once for the app, from its index.html, or ${INSTALL_FONT_AWESOME}`;
+    }
+    if (major === null) {
+        return `the page loads Font Awesome from \`${quoted}\`, whose version the URL doesn't say: ${ICON_LOADS_NO_FONT} and writes the classes Font Awesome 5 and later read (\`fas fa-<name>\`), so keep loading it once for the app, or ${INSTALL_FONT_AWESOME}, with \`css/v4-shims.min.css\` beside it if the page's names are Font Awesome 4's (\`fa fa-<name>\`)`;
+    }
+    const loads = `the page loads Font Awesome ${major} from \`${quoted}\``;
+    if (major <= 4) {
+        return `${loads}, whose classes are \`fa fa-<name>\`: the codemod keeps that \`fa\` on each icon it converts (\`variant="fa"\`), which ${major} styles, but bestax's \`Icon\` given no \`variant\` writes \`fas fa-<name>\`, which ${major} doesn't, so for icons written from here on, ${INSTALL_FONT_AWESOME}, then either import \`css/v4-shims.min.css\` beside it, so the page's ${major} names keep working, or move them to the current names (\`fa-envelope-o\` is \`envelope\` with \`variant="regular"\`)`;
+    }
+    if (major === 5) {
+        return `${loads}: ${ICON_LOADS_NO_FONT} and writes the \`fas fa-<name>\` classes 5 reads, so the \`<link>\` keeps working from the app's index.html; installed from npm, \`@fortawesome/fontawesome-free\` takes 6 or 7 (bestax-bulma's optional peer range is \`${FONT_AWESOME_PEER_RANGE}\`, and an older one fails \`npm install\` with ERESOLVE), which still read the 5 names`;
+    }
+    if (major <= 7) {
+        return `${loads}: ${ICON_LOADS_NO_FONT}, so keep loading it once for the app, from a \`<link>\` in its index.html, or ${INSTALL_FONT_AWESOME}`;
+    }
+    return `${loads}: ${ICON_LOADS_NO_FONT}, and bestax-bulma's optional peer range for it is \`${FONT_AWESOME_PEER_RANGE}\`, so keep loading this one from a \`<link>\` in the app's index.html, where no peer range applies`;
+}
+// ---- Bulma extensions --------------------------------------------------------
+/**
+ * The extensions bestax has a component for, by package (a scoped one by its
+ * name alone), with the component that does what the extension did.
+ */
+export const EXTENSION_COMPONENTS = {
+    'bulma-accordion': '`Collapses`, with a `Collapse` for each item',
+    'bulma-badge': '`Badge`',
+    'bulma-calendar': '`DateInput` (and `TimeInput`, `DateTimeInput` and `DateRangeInput`)',
+    'bulma-carousel': '`Carousel`, with a `CarouselItem` for each slide',
+    'bulma-checkradio': '`Checkbox` and `Radio`, which draw their own box',
+    'bulma-collapsible': '`Collapse` (`Collapses` for an accordion)',
+    'bulma-pageloader': '`Loading` (`isFullPage` for one over the whole page)',
+    'bulma-quickview': '`Sidebar`',
+    'bulma-slider': '`Slider`',
+    'bulma-steps': '`Steps`',
+    'bulma-switch': '`Switch`',
+    'bulma-tagsinput': '`Taginput`',
+    'bulma-timeline': '`Timeline`',
+    'bulma-toast': '`Toast` (`toast.show()` from code, with a `ToastContainer` rendered once)',
+    'bulma-tooltip': '`Tooltip`',
+};
+export function extensionMessage(name, quoted, loads, css) {
+    const from = `from ${quoted.map(url => `\`${url}\``).join(' and ')}`;
+    const bare = name.replace(/^@[^/]+\//, '').toLowerCase();
+    if (bare === 'bulma-social') {
+        return `the page loads bulma-social, a Bulma extension for brand-colored buttons, ${from}, and bestax has no component for it: keep loading it once for the app (\`bulma-social\` from npm, imported from its entry, or the \`<link>\` in its index.html), since its classes (\`is-twitter\`, \`is-github\` and the rest) style Bulma's \`.button\`, which bestax's \`Button\` renders, so they go on \`Button\` through \`className\``;
+    }
+    if (bare === 'bulma-extensions') {
+        return `the page loads bulma-extensions, a bundle of Bulma extensions, ${from}: bestax has components for several of them (the bestax-migrate skill's \`references/bulma-classes/unmappables.md\` lists which), so render those in place of the extensions' markup and scripts, and keep loading the bundle only while the app still uses one bestax has no component for`;
+    }
+    const component = EXTENSION_COMPONENTS[bare];
+    if (component) {
+        return `the page loads ${name}, a Bulma extension, ${from}, and bestax has a component for what it does: ${component}, whose styles ship in bestax's \`extras.css\` and \`bestax.css\`; render that in place of the extension's markup${loads.has('script') ? ' and script' : ''}, and stop loading the extension once nothing the app keeps uses its classes`;
+    }
+    return `the page loads ${name}, a Bulma extension, ${from}, and a component doesn't: keep loading it once for the app (from npm, imported from its entry, or a \`<link>\` in its index.html) while the page's markup uses its classes, which go on bestax's components through \`className\`${css === 'keep' ? '' : ', and check it works with Bulma 1, which an extension can predate'}`;
+}
+// ---- Everything else ---------------------------------------------------------
+export function jqueryMessage(quoted) {
+    return `the page loads jQuery from \`${quoted}\`, and a component runs no page scripts: React renders the page now, so what the page's scripts did with jQuery (toggling classes, handlers, showing and hiding) becomes state and event props in the component; load jQuery in the app only if a library the app keeps still needs it`;
+}
+export function webfontMessage(asset, quoted) {
+    if (asset.icons !== null) {
+        const name = asset.icons === 'material-icons'
+            ? "Google's Material Icons"
+            : "Google's Material Symbols";
+        return `the page loads ${name}, an icon font, from \`${quoted}\`: bestax's \`Icon\` writes its classes with \`library="${asset.icons}"\` and loads no font of its own, so keep the \`<link>\` in the app's index.html, or install the \`${asset.icons}\` package and import its stylesheet from the entry`;
+    }
+    return `the page loads a web font's stylesheet from \`${quoted}\`, and a component doesn't: keep the \`<link>\` in the app's index.html, with the preconnects that go with it, or self-host the font and import it from the app's entry`;
+}
+export function stylesheetMessage(quoted, place, target) {
+    if (place === 'beside') {
+        // Beside the page is inside its folder, so this never climbs out of it.
+        const specifier = `./${target.replace(/^(?:\.\/)+/, '')}`;
+        return `the page's own stylesheet \`${quoted}\` is beside it, and a component doesn't load it: import it once for the app, in the order the page loads it, so its rules still win over Bulma's where they did (a module beside the page imports it as \`${specifier}\`), or move its rules into the app's stylesheet`;
+    }
+    // Only what the page's folder shows: a `<base href>` may have sent the
+    // browser somewhere else, so nothing here says the page never loaded it.
+    if (place === 'missing') {
+        return `the page loads the stylesheet \`${quoted}\`, which isn't beside the page (no \`${target}\` in its folder): load the stylesheet it meant once for the app, or drop it`;
+    }
+    return `the page loads the stylesheet \`${quoted}\`, and a component doesn't: load it once for the app, from its entry or a \`<link>\` in its index.html`;
+}
+export function scriptMessage(quoted, place, target) {
+    if (place === 'beside') {
+        return `the page's own script \`${quoted}\` is beside it, and a component runs no page scripts: port what it does into the component (state, effects, event handlers); its code is still in \`${target}\``;
+    }
+    if (place === 'missing') {
+        return `the page loads the script \`${quoted}\`, which isn't beside the page (no \`${target}\` in its folder): find the one it meant and port what it does into the component, or drop it`;
+    }
+    return `the page loads the script \`${quoted}\`, and a component runs no page scripts: load it in the app if the app still needs it, or replace what it does with React code`;
+}

package/dist/sources/bulma-classes/html-rules.d.ts

@@ -20,6 +20,11 @@ export declare const NAVBAR_FIXED_CLASSES: readonly string[];
 export declare const THEME_CLASSES: readonly string[];
 /** The patterns an inline script is checked for, each with its own recipe. */
 export declare const SCRIPT_PATTERNS: readonly string[];
+/**
+ * What a stylesheet or script the page loads is: Bulma's own stylesheet,
+ * Font Awesome, a Bulma extension, jQuery, a web font, or any other.
+ */
+export declare const ASSET_KINDS: readonly string[];
 export declare const HTML_KINDS: ReadonlySet<string>;
 /** Whether a token is one an id of this kind may carry. */
 export declare function inHtmlVocabulary(kind: string, token: string): boolean;

package/dist/sources/bulma-classes/html-rules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-rules.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html-rules.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,EAAE,SAAS,MAAM,EASjD,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAAkC,CAAC;AAE9E,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAO5C,CAAC;AAqCF,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,MAAM,CAAoC,CAAC;AAKhF,2DAA2D;AAC3D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAErE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAO/D"}
+{"version":3,"file":"html-rules.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html-rules.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,2EAA2E;AAC3E,eAAO,MAAM,oBAAoB,EAAE,SAAS,MAAM,EASjD,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,SAAS,MAAM,EAAkC,CAAC;AAE9E,8EAA8E;AAC9E,eAAO,MAAM,eAAe,EAAE,SAAS,MAAM,EAO5C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,MAAM,EAQxC,CAAC;AAoCF,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC,MAAM,CAAoC,CAAC;AAKhF,2DAA2D;AAC3D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAErE;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAO/D"}

package/dist/sources/bulma-classes/html-rules.js

@@ -38,14 +38,26 @@ export const SCRIPT_PATTERNS = [
     'modal',
     'theme',
 ];
+/**
+ * What a stylesheet or script the page loads is: Bulma's own stylesheet,
+ * Font Awesome, a Bulma extension, jQuery, a web font, or any other.
+ */
+export const ASSET_KINDS = [
+    'bulma',
+    'bulma-extension',
+    'font-awesome',
+    'jquery',
+    'script',
+    'stylesheet',
+    'webfont',
+];
 /** Every HTML event-handler attribute, as written (`onclick`). */
 const EVENT_ATTRIBUTES = Object.values(html.property)
     .map(info => info.attribute)
     .filter(attribute => /^on[a-z]+$/.test(attribute));
 const VOCABULARY = {
     'html-head': new Set(['title', 'meta', 'link', 'style', 'base']),
-    // Reported at the kind level until the asset vocabulary lands.
-    'html-asset': new Set(),
+    'html-asset': new Set(ASSET_KINDS),
     'html-script': new Set(SCRIPT_PATTERNS),
     'html-document': new Set([
         ...NAVBAR_FIXED_CLASSES,

package/dist/sources/bulma-classes/html.d.ts

@@ -11,10 +11,16 @@
  * What a component can't carry becomes a `TODO(bestax-migrate)` line and a
  * report entry under the `html-*` rules (`html-rules.ts`): the head, the
  * `<html>` and `<body>` attributes, scripts (dropped, since a component runs
- * none; their code stays in the page), and what the converter couldn't write
- * as it was. Document-level ones sit above the component, the rest above its
- * `return`, where the planner's own go. A report entry names the page and
- * its line, never the module's.
+ * none; their code stays in the page), the stylesheets and scripts it loads
+ * (`html-assets.ts` says what each is), and what the converter couldn't
+ * write as it was. Document-level ones sit above the component, the rest
+ * above its `return`, where the planner's own go. A report entry names the
+ * page and its line, never the module's.
+ *
+ * Under `--css bestax` or `--css bulma` the page's link to Bulma's stylesheet
+ * becomes `import 'bulma/css/bulma.min.css'` at the top of the module, which
+ * the transform's stylesheet pass then retargets exactly as it would in a JSX
+ * file, so the CLI's manifest step reads the module the same way too.
  *
  * Nothing is ever overwritten: a module already beside the page stops it
  * (`html-file:exists`), so a second run changes nothing, and the page itself
@@ -65,6 +71,8 @@ export declare function outputPathFor(file: string, options?: TransformOptions):
  * advice names the page's own (`-e html` takes no `.htm` page).
  */
 export declare function excludedHtml(file: string, source: string): TodoEntry | null;
+/** The import a page's Bulma `<link>` becomes, before `--css` retargets it. */
+export declare const BULMA_IMPORT = "import \"bulma/css/bulma.min.css\";";
 /**
  * The module as written, after the planner: a number attribute on a plain
  * element as a number (`tabIndex="-1"` as `tabIndex={-1}`), which React's

package/dist/sources/bulma-classes/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAEV,UAAU,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAexB,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAC;AAiDvC;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAYjE;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,SAoB3B,CAAC;AAIF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAiBlD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAQR;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAU3E;AAqrBD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA4BjD;AAID,+EAA+E;AAC/E,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,2EAA2E;IAC3E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAWD,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,aAAa,CAsGf;AAED,yCAAyC;AACzC,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,UAAU,CAGZ"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/html.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,OAAO,KAAK,EAEV,UAAU,EACV,aAAa,EACb,SAAS,EACT,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAexB,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,+BAA+B,CAAC;AAiEvC;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAYjE;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,SAoB3B,CAAC;AAIF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAiBlD;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAQR;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAU3E;AA4KD,+EAA+E;AAC/E,eAAO,MAAM,YAAY,wCAAsC,CAAC;AAivBhE;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA4BjD;AAID,+EAA+E;AAC/E,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,2EAA2E;IAC3E,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAWD,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,aAAa,CAgHf;AAED,yCAAyC;AACzC,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,OAAO,GAAE,gBAAqB,GAC7B,UAAU,CAGZ"}