bestax-migrate 2.3.8 → 2.4.0

package/dist/sources/rbx/deps.js

@@ -13,11 +13,8 @@
  * see the note on that below.
  * says so by name.
  */
-import { isPreV1, isRecognisedRange } from '../_shared/semver-range.js';
-const BESTAX_RANGE = '^5';
-const BULMA_RANGE = '^1.0.4';
-// Bulma v1's sass tree uses `color.channel(…)` — needs dart-sass ≥ 1.79.
-const SASS_RANGE = '^1.79.0';
+import { BULMA_RANGE, DEP_SECTIONS, addBestax, moveBulmaToV1, openManifest, replaceNodeSass, reportPeerRanges, } from '../_shared/deps-common.js';
+import { isRecognisedRange } from '../_shared/semver-range.js';
 /**
  * The Bulma extensions rbx depends on directly. Bulma v1 and bestax cover all
  * four: badge and tooltip became bestax components, the page loader became
@@ -29,23 +26,16 @@ const RBX_STYLE_DEPS = [
     'bulma-pageloader',
     'bulma-tooltip',
 ];
-const DEP_SECTIONS = ['dependencies', 'devDependencies'];
 export const updateDependencies = (filePath, pkg, collector, options) => {
-    const changes = [];
-    const next = pkg;
-    const section = (name) => (next[name] ?? undefined);
-    const note = (message) => {
-        changes.push(message);
-        collector?.add({ file: filePath, line: null, rule: 'deps', message });
-    };
+    const manifest = openManifest(filePath, pkg, collector);
     // rbx goes away entirely.
     const removed = [];
     for (const name of DEP_SECTIONS) {
-        const deps = section(name);
+        const deps = manifest.section(name);
         if (deps && 'rbx' in deps) {
             delete deps.rbx;
             removed.push('rbx');
-            note(`removed rbx from ${name}`);
+            manifest.note(`removed rbx from ${name}`);
         }
     }
     // The four Bulma extensions are REPORTED, not removed.
@@ -60,7 +50,7 @@ export const updateDependencies = (filePath, pkg, collector, options) => {
     const extensions = [];
     if (removed.includes('rbx')) {
         for (const name of DEP_SECTIONS) {
-            const deps = section(name);
+            const deps = manifest.section(name);
             if (!deps)
                 continue;
             for (const extension of RBX_STYLE_DEPS) {
@@ -70,56 +60,19 @@ export const updateDependencies = (filePath, pkg, collector, options) => {
         }
     }
     if (extensions.length > 0) {
-        collector?.add({
-            file: filePath,
-            line: null,
-            rule: 'deps',
-            message: `${extensions.join(', ')} ${extensions.length === 1 ? 'is a Bulma extension' : 'are Bulma extensions'} rbx depended on, and bestax ships ${extensions.length === 1 ? 'its' : 'their'} equivalent${extensions.length === 1 ? '' : 's'} (Badge, Divider, Loading, Tooltip). Declared in this manifest, so removing ${extensions.length === 1 ? 'it' : 'them'} is your call — drop ${extensions.length === 1 ? 'it' : 'them'} unless your own Sass imports ${extensions.length === 1 ? 'it' : 'them'} directly`,
-        });
-    }
-    // @allxsmith/bestax-bulma comes in (runtime dependency).
-    const dependencies = (next.dependencies ??= {});
-    if (!dependencies['@allxsmith/bestax-bulma'] &&
-        !section('devDependencies')?.['@allxsmith/bestax-bulma']) {
-        dependencies['@allxsmith/bestax-bulma'] = BESTAX_RANGE;
-        note(`added @allxsmith/bestax-bulma ${BESTAX_RANGE} to dependencies`);
-    }
-    // Bulma: rbx pinned 0.7.5 as a direct dependency, so this almost always
-    // fires. Add it back only when sources still reference bulma/… directly —
-    // otherwise it arrives transitively via bestax-bulma.
-    let bulmaDeclared = false;
-    let declaredBulma = '';
-    let bulmaBumped = false;
-    let bulmaAdded = false;
-    for (const name of DEP_SECTIONS) {
-        const deps = section(name);
-        if (deps?.bulma) {
-            bulmaDeclared = true;
-            declaredBulma = deps.bulma;
-            if (isPreV1(deps.bulma)) {
-                deps.bulma = BULMA_RANGE;
-                bulmaBumped = true;
-                note(`bumped bulma to ${BULMA_RANGE} in ${name} (was pre-1.0)`);
-            }
-        }
-    }
-    if (!bulmaDeclared && options.bulmaReferenced) {
-        dependencies.bulma = BULMA_RANGE;
-        bulmaAdded = true;
-        note(`added bulma ${BULMA_RANGE} to dependencies (sources import bulma/… directly)`);
+        manifest.report('deps', `${extensions.join(', ')} ${extensions.length === 1 ? 'is a Bulma extension' : 'are Bulma extensions'} rbx depended on, and bestax ships ${extensions.length === 1 ? 'its' : 'their'} equivalent${extensions.length === 1 ? '' : 's'} (Badge, Divider, Loading, Tooltip). Declared in this manifest, so removing ${extensions.length === 1 ? 'it' : 'them'} is your call — drop ${extensions.length === 1 ? 'it' : 'them'} unless your own Sass imports ${extensions.length === 1 ? 'it' : 'them'} directly`);
     }
+    addBestax(manifest);
+    // rbx pinned Bulma 0.7.5 as a direct dependency, so the bump almost always
+    // fires.
+    const bulma = moveBulmaToV1(manifest, options.bulmaReferenced);
     // The transform deliberately keeps a trimmed rbx import for components
     // with no bestax equivalent (Tile, Generic, List, …) so a partially
     // migrated app still runs. Removing the package from the manifest strands
     // exactly those imports once the user runs the install the report asks for,
     // so say so rather than letting them find out at build time.
     if (removed.includes('rbx') && options.sourceStillImported) {
-        collector?.add({
-            file: filePath,
-            line: null,
-            rule: 'deps',
-            message: 'rbx was removed from package.json, but some files still import it for components with no bestax equivalent — resolve those `TODO(bestax-migrate)` imports before installing, or re-add rbx until you have',
-        });
+        manifest.report('deps', 'rbx was removed from package.json, but some files still import it for components with no bestax equivalent — resolve those `TODO(bestax-migrate)` imports before installing, or re-add rbx until you have');
     }
     // The headline result: rbx pinned Bulma 0.7.5 as a DIRECT dependency, so
     // removing rbx is what frees the app to choose its own Bulma version.
@@ -130,63 +83,22 @@ export const updateDependencies = (filePath, pkg, collector, options) => {
     // arrives transitively via bestax-bulma. Saying "bumped bulma" there
     // described a pin the user would not find in their manifest.
     if (removed.includes('rbx')) {
-        collector?.add({
-            file: filePath,
-            line: null,
-            rule: 'deps',
-            message: `removed rbx ${bulmaBumped
-                ? `and bumped bulma to ${BULMA_RANGE}`
-                : bulmaAdded
-                    ? `and added bulma ${BULMA_RANGE}`
-                    : bulmaDeclared
-                        ? isRecognisedRange(declaredBulma)
-                            ? 'and left your declared bulma range alone (already v1)'
-                            : `and left your declared bulma specifier alone (${JSON.stringify(declaredBulma)} is not a version range this tool can read; make sure it resolves to Bulma 1.x)`
-                        : '— bulma now arrives transitively via @allxsmith/bestax-bulma'} — rbx pinned Bulma 0.7.5 as a direct dependency, so the app can now choose its own Bulma version${extensions.length > 0 ? `; ${extensions.length} Bulma extension(s) are reported above for you to remove` : ''}`,
-        });
-    }
-    // bestax-bulma requires React 18/19; rbx peer-depends on ^16.8.6, and React
-    // 19 removed the `defaultProps` its forwardRefAs base is built on — so this
-    // is the other half of why an rbx app is stuck. Report only: a React major
-    // upgrade is the app's own migration step.
-    for (const name of DEP_SECTIONS) {
-        const range = section(name)?.react;
-        if (range && /^[~^]?(?:[0-9]|1[0-7])(?:[.x]|$)/.test(range.trim())) {
-            collector?.add({
-                file: filePath,
-                line: null,
-                rule: 'peer-deps',
-                message: `react ${range} predates bestax-bulma's peer range (^18 || ^19) — upgrade react and react-dom to 18 or 19 before installing`,
-            });
-        }
-    }
-    // Font Awesome older than 6 conflicts with bestax-bulma's optional peer
-    // range and makes `npm install` fail with ERESOLVE. Report only — icon
-    // names change across FA majors, so upgrading is the app's decision.
-    for (const name of DEP_SECTIONS) {
-        const range = section(name)?.['@fortawesome/fontawesome-free'];
-        if (range && /^[~^]?[0-5](?:[.x]|$)/.test(range.trim())) {
-            collector?.add({
-                file: filePath,
-                line: null,
-                rule: 'peer-deps',
-                message: `@fortawesome/fontawesome-free ${range} predates bestax-bulma's optional peer range (^6.7.2 || ^7.0.0) — upgrade it, or install with \`npm install --legacy-peer-deps\``,
-            });
-        }
-    }
-    // node-sass is dead; dart-sass replaces it in the same section. rbx's own
-    // customisation guide told people to install node-sass, so this is common.
-    for (const name of DEP_SECTIONS) {
-        const deps = section(name);
-        if (deps && 'node-sass' in deps) {
-            delete deps['node-sass'];
-            note(`removed node-sass from ${name}`);
-            const sassDeclared = DEP_SECTIONS.some(s => section(s)?.sass);
-            if (!sassDeclared) {
-                deps.sass = SASS_RANGE;
-                note(`added sass ${SASS_RANGE} to ${name} (replaces node-sass)`);
-            }
-        }
+        manifest.report('deps', `removed rbx ${bulma.bumped
+            ? `and bumped bulma to ${BULMA_RANGE}`
+            : bulma.added
+                ? `and added bulma ${BULMA_RANGE}`
+                : bulma.declared !== null
+                    ? isRecognisedRange(bulma.declared)
+                        ? 'and left your declared bulma range alone (already v1)'
+                        : `and left your declared bulma specifier alone (${JSON.stringify(bulma.declared)} is not a version range this tool can read; make sure it resolves to Bulma 1.x)`
+                    : '— bulma now arrives transitively via @allxsmith/bestax-bulma'} — rbx pinned Bulma 0.7.5 as a direct dependency, so the app can now choose its own Bulma version${extensions.length > 0 ? `; ${extensions.length} Bulma extension(s) are reported above for you to remove` : ''}`);
     }
-    return changes.length > 0 ? next : null;
+    // rbx peer-depends on React ^16.8.6, and React 19 removed the
+    // `defaultProps` its forwardRefAs base is built on — so an old React is the
+    // other half of why an rbx app is stuck.
+    reportPeerRanges(manifest);
+    // rbx's own customisation guide told people to install node-sass, so this
+    // is common.
+    replaceNodeSass(manifest);
+    return manifest.result();
 };

package/dist/sources/rbx/mapping.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA8BnE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAoCtD,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAOrD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQvD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAShE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAktBpD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2FhD,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}
+{"version":3,"file":"mapping.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/mapping.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA8BnE;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CA6CtD,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAOrD,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAQvD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAShE,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAktBpD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CA2FhD,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,gBAAgB,GAAG,SAAS,CAM3E"}

package/dist/sources/rbx/mapping.js

@@ -78,6 +78,14 @@ export const UNIVERSAL_PROPS = {
     relative: {}, // boolean on both sides
     // Per-component maps override this with AS_OK where bestax has an `as`.
     as: AS_TODO,
+    // Same shape: the per-component maps override this with `rename: 'ref'` on
+    // the targets that forward one, and the `navbar-item` special handles the
+    // two it chooses between. Whatever is left reaches here, so no `innerRef`
+    // migrates in silence onto a target that cannot take it — the RBC sibling
+    // `domRef` has been flagged universally all along.
+    innerRef: {
+        todo: `\`innerRef\` has no counterpart; rename it to \`ref\` if this target forwards one, otherwise move it onto a wrapping element you control (${DOCS}/api)`,
+    },
 };
 /** rbx badge helper props → bestax `<Badge>` props. */
 export const BADGE_PROPS = {
@@ -121,7 +129,7 @@ export const MAPPING = {
     },
     forwardRefAs: {
         status: 'todo',
-        todo: '`forwardRefAs` is rbx-internal and has no counterpart. bestax forwards a ref from the form controls and from `Button`, `LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and `Navbar.Link`), `Dialog`, `Sidebar`, `Toast` and `Carousel` — pass `ref` directly on those. Mind the `Navbar.Dropdown` collision: your rbx `Navbar.Dropdown` is the menu and becomes `Navbar.DropdownMenu`, which forwards no ref, while bestax `Navbar.Dropdown` — the container your `<Navbar.Item dropdown>` becomes — does. The rest, `Box` included, are plain function components that forward no ref; put the ref on a wrapping element you control',
+        todo: '`forwardRefAs` is rbx-internal and has no counterpart. bestax forwards a ref from the form controls, plus `Avatar`, `Button`, `Carousel`, `CarouselItem`, `Dialog`, `Dropdown`, `Link`, `LinkButton`, `Menu.Item`, `Modal`, `Navbar`, `Navbar.Burger`, `Navbar.Dropdown`, `Navbar.Item`, `Navbar.Link`, `Sidebar` and `Toast` — pass `ref` directly on those, though not on the `Field`, `Field.Label`, `Field.Body`, `Checkboxes` and `Radios` wrappers, which forward none. Mind the `Navbar.Dropdown` collision: your rbx `Navbar.Dropdown` is the menu and becomes `Navbar.DropdownMenu`, which forwards no ref, while bestax `Navbar.Dropdown` — the container your `<Navbar.Item dropdown>` becomes — does. The rest, `Box` included, forward no ref: React 18 drops it with a warning, React 19 leaves it wherever the rest props go, so put the ref on a wrapping element you control',
     },
     // ---- elements -----------------------------------------------------------
     Block: { status: 'mapped', target: 'Block' },

package/dist/sources/rbx/specials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAYL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAUL,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAs2B9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf"}
+{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAO3C,OAAO,EAYL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAUL,KAAK,aAAa,EACnB,MAAM,8BAA8B,CAAC;AAEtC,YAAY,EAAE,aAAa,EAAE,CAAC;AAq3B9B,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf"}

package/dist/sources/rbx/specials.js

@@ -17,7 +17,7 @@ import { BADGE_PROPS, RESPONSIVE_BREAKPOINTS, TOOLTIP_PROPS, UNIVERSAL_PROPS, }
 import { addAttr, addTodo, buildJsxName, attributesOf, findAttr, jsxNameParts, literalValueOf, makeAttr, plainElement, removeAttr, resolveBooleanish, } from '../_shared/jsx-utils.js';
 import { alignTarget, applyIconProps, makeStripModifierProps, makeStructuralHelpers, mergeClassName, modifierClass, parseIconClasses, restrictAsToTargets, } from '../_shared/specials-utils.js';
 /* eslint-disable @typescript-eslint/no-explicit-any */
-const stripModifierProps = makeStripModifierProps(UNIVERSAL_PROPS, RESPONSIVE_BREAKPOINTS);
+const stripModifierProps = makeStripModifierProps(UNIVERSAL_PROPS, RESPONSIVE_BREAKPOINTS, 'innerRef');
 /**
  * Also strips the universal `responsive` object: responsive.ts would have
  * consumed it, but a `replaced: true` special skips that pass too, and it is
@@ -513,17 +513,27 @@ const SPECIALS = {
         // bestax's `Navbar.Dropdown` forwards a ref, but it is the one such target
         // the `innerRef: { rename: 'ref' }` entries in mapping.ts cannot reach:
         // that table is keyed on the rbx name (`Navbar.Item`), and only this
-        // handler knows which of the two targets was picked. A plain
-        // `Navbar.Item` is still a function component, so the rename is
-        // conditional — there, `innerRef` is left alone.
-        const renamedInnerRef = [];
-        if (target === 'Navbar.Dropdown') {
-            const innerRefAttr = findAttr(element, 'innerRef');
-            if (innerRefAttr) {
+        // handler knows which of the two targets was picked. The condition is
+        // about that, not about ref support: a plain `Navbar.Item` forwards one
+        // too since #661, so leaving `innerRef` alone there is a rename this
+        // handler declines rather than one the target cannot take. Performing it
+        // changes emitted output on code that migrates today, so it stays #734 —
+        // but declining silently is not an option either. `innerRef` is in no
+        // rbx prop table, so nothing downstream flags it and it used to reach the
+        // DOM as an unknown attribute with the report saying nothing, which is
+        // the silent skip bestax-migrate/CLAUDE.md rules out. It is flagged here
+        // instead, and the rename stays the user's to make.
+        const handledInnerRef = [];
+        const innerRefAttr = findAttr(element, 'innerRef');
+        if (innerRefAttr) {
+            handledInnerRef.push('innerRef');
+            if (target === 'Navbar.Dropdown') {
                 innerRefAttr.name = ctx.j.jsxIdentifier('ref');
-                renamedInnerRef.push('innerRef');
                 ctx.dirty = true;
             }
+            else {
+                addTodo(ctx, path, 'prop:innerRef', 'bestax `Navbar.Item` forwards a ref; rename `innerRef` to `ref` by hand');
+            }
         }
         restrictAsToTargets(ctx, path, element, target ?? 'Navbar.Item', [
             'Navbar.Item',
@@ -538,7 +548,7 @@ const SPECIALS = {
                 'expanded',
                 'hoverable',
                 'managed',
-                ...renamedInnerRef,
+                ...handledInnerRef,
             ],
         };
     },

package/dist/sources/rbx/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA4DvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CA0oCpB"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/rbx/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmDvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CA47BpB"}

package/dist/sources/rbx/transform.js

@@ -20,32 +20,16 @@
  * not a rename.
  */
 import { BADGE_PROPS, MAPPING, TOOLTIP_PROPS, UNIVERSAL_PROPS, resolveMapping, } from './mapping.js';
-import { addTodo, attributesOf, findAttr, jsxNameParts, literalValueOf, removeAttr, renameElement, } from '../_shared/jsx-utils.js';
+import { addTodo, attributesOf, findAttr, forgetJsxParens, jsxNameParts, literalValueOf, removeAttr, renameElement, reprintDirectives, } from '../_shared/jsx-utils.js';
 import { applyPropAction, applyUniversalProps } from '../_shared/props.js';
 import { enforcePolymorphicProps } from '../_shared/polymorphic.js';
+import { bestaxValueLocals, buildBestaxImport, carryPrunedComments, placeBestaxImport, seedBestaxImport, } from '../_shared/bestax-import.js';
+import { rewriteStylesheetImports } from '../_shared/css-imports.js';
 import { collectBoundNames, makeAliasRegistry, makeReserve, nameOf, prefersTabs, resolvesToBinding, } from '../_shared/imports.js';
 import { flattenResponsiveProps, RESPONSIVE_KINDS } from './responsive.js';
 import { runSpecial } from './specials.js';
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const RBX = 'rbx';
-const BESTAX = '@allxsmith/bestax-bulma';
-const BULMA_CSS = 'bulma/css/bulma.min.css';
-const BESTAX_CSS = '@allxsmith/bestax-bulma/bestax.css';
-const EXTRAS_CSS = '@allxsmith/bestax-bulma/extras.css';
-const BULMA_CSS_SPECIFIERS = new Set([
-    'bulma/css/bulma.css',
-    'bulma/css/bulma.min.css',
-]);
-const BESTAX_CSS_SPECIFIERS = new Set([
-    BESTAX_CSS,
-    '@allxsmith/bestax-bulma/bestax.min.css',
-    '@allxsmith/bestax-bulma/dist/bestax.css',
-    '@allxsmith/bestax-bulma/dist/bestax.min.css',
-]);
-const EXTRAS_CSS_SPECIFIERS = new Set([
-    EXTRAS_CSS,
-    '@allxsmith/bestax-bulma/dist/extras.css',
-]);
 /**
  * The four Bulma extensions rbx pinned. An app that imported their CSS
  * directly no longer needs to: bestax ships Badge/Tooltip/Loading/Divider.
@@ -125,35 +109,17 @@ export default function transform(fileInfo, api, options = {}) {
         addTodo(ctx, p, 'imports', `\`export * from '${RBX}'\` was not migrated; re-export the bestax components you need by hand`);
     });
     // ---- 1a. Stylesheet imports (mode-driven) -----------------------------
-    // `bestax` (default): everything converges on the recommended combined
-    // bundle. `bulma`: plain Bulma v1 CSS plus the separate extras file.
-    // `keep`: only the dead rbx CSS import is retargeted.
-    const cssMode = options.cssMode ?? 'bestax';
-    let sawBestaxCss = root
-        .find(j.ImportDeclaration)
-        .paths()
-        .some(p => BESTAX_CSS_SPECIFIERS.has(String(p.node.source.value)));
-    // Whether some import in this file will become bestax.css, regardless of
-    // where it sits relative to an existing extras import.
-    const willAdoptBestaxCss = cssMode === 'bestax' &&
-        root
-            .find(j.ImportDeclaration)
-            .paths()
-            .some(p => {
-            const v = String(p.node.source.value);
-            return ((v.startsWith(`${RBX}/`) && v.endsWith('.css')) ||
-                BULMA_CSS_SPECIFIERS.has(v));
-        });
-    root.find(j.ImportDeclaration).forEach(path => {
-        const source = String(path.node.source.value);
-        const isRbxCss = source.startsWith(`${RBX}/`) && source.endsWith('.css');
-        const isBulmaCss = BULMA_CSS_SPECIFIERS.has(source);
-        const isExtrasCss = EXTRAS_CSS_SPECIFIERS.has(source);
+    // `keep` retargets only the dead rbx CSS import, which carries Bulma 0.7.5.
+    rewriteStylesheetImports(ctx, root, options.cssMode ?? 'bestax', {
+        sourceCss: {
+            is: specifier => specifier.startsWith(`${RBX}/`) && specifier.endsWith('.css'),
+            label: "rbx's CSS import",
+        },
         // The four extensions rbx pinned; bestax covers all of them.
-        const isExtensionCss = RBX_EXTENSION_CSS.test(source) && source.endsWith('.css');
-        if (!isRbxCss && !isBulmaCss && !isExtrasCss && !isExtensionCss)
-            return;
-        if (isExtensionCss) {
+        handleOwn: (path, source) => {
+            if (!RBX_EXTENSION_CSS.test(source) || !source.endsWith('.css')) {
+                return false;
+            }
             // Kept, with a TODO, rather than dropped. The rbx JSX that needed this
             // stylesheet becomes bestax components that carry their own styles, so
             // for THAT markup it is dead -- but an app can also use the extension's
@@ -164,50 +130,8 @@ export default function transform(fileInfo, api, options = {}) {
             // manifest pass, which reports the same extensions rather than removing
             // them for exactly this reason.
             addTodo(ctx, path, 'css', `kept \`${source}\`: bestax ships Badge, Tooltip, Loading and Divider with their own styles, so this is only still needed by markup outside rbx that uses the extension's classes directly — drop the import once nothing does`);
-            return;
-        }
-        if (cssMode === 'bestax') {
-            if (isRbxCss || isBulmaCss) {
-                if (sawBestaxCss) {
-                    path.prune(); // bestax.css already imported elsewhere in this file
-                }
-                else {
-                    path.node.source = j.stringLiteral(BESTAX_CSS);
-                    sawBestaxCss = true;
-                }
-                ctx.dirty = true;
-            }
-            else if (isExtrasCss && (sawBestaxCss || willAdoptBestaxCss)) {
-                // bestax.css already contains the extras. `willAdoptBestaxCss` covers
-                // the case where the extras import comes FIRST in the file and the
-                // bulma/rbx import that becomes bestax.css has not been visited yet —
-                // previously the extras survived alongside it and double-loaded.
-                path.prune();
-                ctx.dirty = true;
-            }
-        }
-        else if (cssMode === 'bulma') {
-            if (isRbxCss) {
-                path.node.source = j.stringLiteral(BULMA_CSS);
-                ctx.dirty = true;
-            }
-            if ((isRbxCss || isBulmaCss) && !sawBestaxCss) {
-                const hasExtras = root
-                    .find(j.ImportDeclaration)
-                    .paths()
-                    .some(p => EXTRAS_CSS_SPECIFIERS.has(String(p.node.source.value)));
-                if (!hasExtras) {
-                    // Themed Radio/Checkbox need the bestax extras next to plain Bulma.
-                    path.insertAfter(j.importDeclaration([], j.stringLiteral(EXTRAS_CSS)));
-                    ctx.dirty = true;
-                }
-            }
-        }
-        else if (isRbxCss) {
-            // keep: minimal fix — rbx's CSS carries Bulma 0.7.5.
-            path.node.source = j.stringLiteral(BULMA_CSS);
-            addTodo(ctx, path, 'css', `replaced rbx's CSS import with '${BULMA_CSS}'; install bulma@^1 (see https://bestax.io/docs/guides/getting-started/installation)`);
-        }
+            return true;
+        },
     });
     if (imports.size === 0 && !ctx.dirty) {
         return undefined;
@@ -392,45 +316,7 @@ export default function transform(fileInfo, api, options = {}) {
             bound.add(head);
     });
     ctx.reserve = makeReserve(ctx, bound);
-    // Names the passes actually asked for. `ctx.needed` is also seeded from an
-    // existing bestax import's specifiers below (so JSX reuses their locals),
-    // and that seeding alone must not turn a type-only specifier into a value
-    // import nobody needed.
-    const requested = new Set();
-    const baseReserve = ctx.reserve;
-    ctx.reserve = root => {
-        requested.add(root);
-        return baseReserve(root);
-    };
-    // Merge with an existing bestax import: reuse its locals verbatim.
-    // Only a declaration that already uses NAMED specifiers can absorb more of
-    // them. `import * as Bestax from '…'` cannot: a namespace specifier may not
-    // share a declaration with named ones, and appending to it emits a file
-    // that does not parse.
-    const existingBestax = root
-        .find(j.ImportDeclaration, { source: { value: BESTAX } })
-        .paths()
-        .find(p => 
-    // A type-only declaration cannot take a value specifier: merging a
-    // component into `import type { … }` erases it at runtime.
-    p.node.importKind !== 'type' &&
-        (p.node.specifiers ?? []).every((spec) => spec.type === 'ImportSpecifier'));
-    const preExistingImports = new Set();
-    if (existingBestax) {
-        for (const spec of existingBestax.node.specifiers ?? []) {
-            if (spec.type === 'ImportSpecifier' && spec.local) {
-                // The local name is reused either way, so the JSX never needs an
-                // alias. But an inline `type` specifier (`import { type Box }`) is
-                // not a value binding: it is not counted as already imported, so the
-                // component is written as a value below — onto this specifier, which
-                // keeps its name, rather than as a duplicate.
-                ctx.needed.set(nameOf(spec.imported), nameOf(spec.local));
-                if (spec.importKind !== 'type') {
-                    preExistingImports.add(nameOf(spec.imported));
-                }
-            }
-        }
-    }
+    const bestaxImportState = seedBestaxImport(ctx, root);
     /**
      * Move one family of rbx helper props onto a wrapping bestax component.
      * Returns the wrapper element, or null when the element carries none of
@@ -871,62 +757,13 @@ export default function transform(fileInfo, api, options = {}) {
     // ---- 3. Rewrite imports -----------------------------------------------
     if (imports.size > 0) {
         const retainedNames = [...ctx.retained].sort((a, b) => a.localeCompare(b));
-        const freshNames = [...ctx.needed.entries()]
-            .filter(([imported]) => requested.has(imported) && !preExistingImports.has(imported))
-            .sort((a, b) => a[0].localeCompare(b[0]));
-        const bestaxImport = freshNames.length > 0
-            ? j.importDeclaration(freshNames.map(([imported, local]) => j.importSpecifier(j.identifier(imported), j.identifier(local))), j.stringLiteral(BESTAX))
-            : null;
-        /**
-    
-         * A pruned declaration takes its comments with it — a licence header, an
-    
-         * eslint directive. Hand them to what replaces it, or to the next statement.
-    
-         */
-        const carryComments = (node, importPath) => {
-            const comments = node.comments ?? [];
-            if (comments.length === 0)
-                return;
-            const body = importPath.parent?.node?.body ?? [];
-            const index = body.indexOf(node);
-            // The fresh specifiers are merged INTO an existing bestax import when there
-            // is one, and the `bestaxImport` node is then discarded — so the comments
-            // have to follow the declaration that survives, not the one that does not.
-            const carrier = (existingBestax ? existingBestax.node : bestaxImport) ??
-                (index >= 0 ? body[index + 1] : undefined);
-            if (carrier) {
-                carrier.comments = [...comments, ...(carrier.comments ?? [])];
-            }
-            else if (index > 0) {
-                // The import was the last statement: the comments stay where they
-                // were, after what precedes it.
-                const previous = body[index - 1];
-                previous.comments = [
-                    ...(previous.comments ?? []),
-                    ...comments.map((c) => ({
-                        ...c,
-                        leading: false,
-                        trailing: true,
-                    })),
-                ];
-            }
-            else {
-                // The import was the only statement: the comments become the file's.
-                const program = importPath.parent?.node;
-                if (program)
-                    program.comments = [...comments, ...(program.comments ?? [])];
-            }
-            node.comments = [];
-        };
+        const bestaxImport = buildBestaxImport(ctx, bestaxImportState);
         let inserted = false;
         // A retained rbx specifier must never collide with a bestax import local
         // (possible when one component is both JSX-migrated and value-retained).
         // Only a VALUE local can collide at runtime: a type-only specifier the
         // seeding above recorded, and nothing promoted, binds no value.
-        const bestaxLocals = new Set([...ctx.needed.entries()]
-            .filter(([imported]) => requested.has(imported) || preExistingImports.has(imported))
-            .map(([, local]) => local));
+        const bestaxLocals = bestaxValueLocals(ctx, bestaxImportState);
         for (const path of rbxImportPaths) {
             const node = path.node;
             const keepSpecifiers = (node.specifiers ?? []).filter((spec) => {
@@ -944,28 +781,7 @@ export default function transform(fileInfo, api, options = {}) {
                     !bestaxLocals.has(nameOf(spec.local)));
             });
             if (!inserted) {
-                if (existingBestax && bestaxImport) {
-                    const current = existingBestax.node.specifiers ?? [];
-                    const appended = [];
-                    for (const fresh of bestaxImport.specifiers) {
-                        // A type-only specifier for the same name becomes the value
-                        // import (a value import carries the type too); appending a
-                        // second `Box` beside `type Box` would be a duplicate identifier.
-                        const typeOnly = current.find((spec) => spec.type === 'ImportSpecifier' &&
-                            spec.importKind === 'type' &&
-                            nameOf(spec.imported) === nameOf(fresh.imported));
-                        if (typeOnly) {
-                            typeOnly.importKind = null;
-                        }
-                        else {
-                            appended.push(fresh);
-                        }
-                    }
-                    existingBestax.node.specifiers = [...current, ...appended];
-                }
-                else if (bestaxImport) {
-                    path.insertBefore(bestaxImport);
-                }
+                placeBestaxImport(bestaxImportState, bestaxImport, path);
                 inserted = true;
             }
             const droppedOnCollision = (node.specifiers ?? []).filter((spec) => spec.type === 'ImportSpecifier' &&
@@ -988,7 +804,7 @@ export default function transform(fileInfo, api, options = {}) {
                 }
             }
             else {
-                carryComments(node, path);
+                carryPrunedComments(node, path, bestaxImportState.existing?.node ?? bestaxImport);
                 path.prune();
             }
             ctx.dirty = true;
@@ -998,6 +814,8 @@ export default function transform(fileInfo, api, options = {}) {
     // import rewrite, so the drop is visible in the file and not only the report.
     if (!ctx.dirty)
         return undefined;
+    forgetJsxParens(j, root);
+    reprintDirectives(j, root);
     // Double quotes match the dominant JSX-attribute convention; users run
     // their own formatter afterwards anyway. Tab-indented sources keep tabs so
     // reprinted nodes don't drift from the untouched lines around them.

package/dist/sources/react-bulma-components/deps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deps.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/deps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAUzD,eAAO,MAAM,kBAAkB,EAAE,kBAqHhC,CAAC"}
+{"version":3,"file":"deps.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/deps.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAUzD,eAAO,MAAM,kBAAkB,EAAE,kBAuChC,CAAC"}