feat(bestax-migrate): convert navbar dividers with classes, and navbar text colors

bestax-mcp/data/skills.json

@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 24541
+          "bytes": 24523
         },
         {
           "id": "bloomer-unmappables",
@@ -103,17 +103,17 @@
         {
           "id": "bulma-classes-component-map",
           "file": "references/bulma-classes/component-map.md",
-          "bytes": 14387
+          "bytes": 14321
         },
         {
           "id": "bulma-classes-prop-map",
           "file": "references/bulma-classes/prop-map.md",
-          "bytes": 26913
+          "bytes": 26868
         },
         {
           "id": "bulma-classes-unmappables",
           "file": "references/bulma-classes/unmappables.md",
-          "bytes": 15718
+          "bytes": 15550
         },
         {
           "id": "css-migration",

bestax-mcp/src/__tests__/server.test.ts

@@ -696,7 +696,7 @@ describe('lookup_bulma_classes', () => {
       '| `mt-2` | stays in `className` | bestax `Navbar.DropdownMenu` takes no helper props |'
     );
     expect(await lookup('navbar-divider mt-2', 'hr')).toContain(
-      '**Stays markup:** bestax `Navbar.Divider` drops its own class'
+      '| `mt-2` | stays in `className` | bestax `Navbar.Divider` takes no helper props |'
     );
     expect(await lookup('navbar-divider', 'hr')).toContain(
       '**Component:** `Navbar.Divider`.'

bestax-mcp/src/bulma-classes.ts

@@ -51,8 +51,6 @@ export interface RootRecord {
   wrapsChildren: Wraps | null;
   /** The component takes no helper props, so helper classes stay classes. */
   noHelpers: boolean;
-  /** The component drops its own class for a `className` it is given. */
-  ownClassOnly: boolean;
   /** For a `fold` root: the props that render it on the target inside. */
   folds: PropWrite[] | null;
   /** The component renders the element's only child itself. */
@@ -371,7 +369,6 @@ export function lookupClasses(
       omits: {},
       wrapsChildren: null,
       noHelpers: false,
-      ownClassOnly: false,
       folds: null,
       absorbs: null,
       writes: null,
@@ -549,17 +546,6 @@ export function lookupClasses(
   if (!reachable) {
     return result({ kind: 'wrong-tag', target, tag, reaches: reaches(entry) });
   }
-  // Every class but the component's own has to become a prop here, since a
-  // `className` would take the place of that class.
-  if (
-    entry.ownClassOnly &&
-    tokens.some(token => token !== root && verdicts.get(token)?.kind !== 'prop')
-  ) {
-    return result({
-      kind: 'markup',
-      why: `bestax \`${target}\` drops its own class when it is given a \`className\`, so it converts only with no other class`,
-    });
-  }
   const about = {
     wraps,
     absorbs: entry.absorbs ?? undefined,

bestax-migrate/e2e/bulma-classes-kitchen-sink.test.ts

@@ -199,7 +199,6 @@ describe('bulma-classes kitchen-sink e2e', () => {
     const rules = (app.todosByFile.get('leftovers.tsx') ?? []).map(t => t.rule);
     expect(rules.sort()).toEqual(
       [
-        'attr:className',
         'attr:color',
         'children:Card',
         'defaults:Delete',

bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/layout.tsx

@@ -21,14 +21,14 @@ export function Layout() {
                 <a className="navbar-item" href="/about">
                   About
                 </a>
-                <hr className="navbar-divider" />
+                <hr className="navbar-divider my-1" />
                 <a className="navbar-item" href="/jobs">
                   Jobs
                 </a>
               </div>
             </div>
           </div>
-          <div className="navbar-end">
+          <div className="navbar-end has-text-weight-semibold has-text-link">
             <div className="navbar-item">
               <div className="buttons">
                 <a className="button is-light" href="/login">

bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/leftovers.tsx

@@ -43,7 +43,6 @@ export function Leftovers() {
         <span aria-hidden="true" />
         <span aria-hidden="true" />
       </a>
-      <hr className="navbar-divider mt-2" />
       <div className="dropdown">A family converted later</div>
       <div className="tile is-ancestor">A Bulma 0.9 tile</div>
     </div>

bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts

@@ -785,17 +785,29 @@ describe('bloomer navigation handlers', () => {
 
   it('leaves a class-hostile target alone when it carries a spread', () => {
     const { output, rules } = migrate(
-      "import { NavbarDivider, PageEllipsis, DropdownDivider } from 'bloomer';\nexport const A = (p: Record<string, any>) => (<><NavbarDivider {...p.rest} /><PageEllipsis {...p.rest} /><DropdownDivider {...p.rest} /></>);\n"
+      "import { PageEllipsis, DropdownDivider } from 'bloomer';\nexport const A = (p: Record<string, any>) => (<><PageEllipsis {...p.rest} /><DropdownDivider {...p.rest} /></>);\n"
     );
     expect(rules).toEqual([
-      'component:NavbarDivider',
       'component:PageEllipsis',
       'component:DropdownDivider',
     ]);
-    expect(output).toContain('<NavbarDivider {...p.rest} />');
+    expect(output).toContain('<PageEllipsis {...p.rest} />');
     expect(output).toContain("from 'bloomer'");
   });
 
+  it('converts a NavbarDivider with helpers or a spread', () => {
+    // bestax `Navbar.Divider` merges a `className` with its own class.
+    const { output, rules } = migrate(
+      dyn(
+        'NavbarDivider',
+        '<><NavbarDivider isHidden="mobile" /><NavbarDivider {...p.rest} /></>'
+      )
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Navbar.Divider className="is-hidden-mobile" />');
+    expect(output).toContain('<Navbar.Divider {...p.rest} />');
+  });
+
   it('keeps a NavbarDropdown without isBoxed as the menu', () => {
     const { output, rules } = migrate(
       dyn('NavbarDropdown', '<NavbarDropdown>x</NavbarDropdown>')

bestax-migrate/src/sources/bloomer/mapping.ts

@@ -146,15 +146,14 @@ export const RESPONSIVE_PROPS: Record<string, string | null> = {
  * emitting an excess-property type error.
  */
 /**
- * Targets whose `className` cannot be used: `Navbar.Divider` and
- * `Pagination.Ellipsis` spread `{...props}` AFTER their own className (so one
- * written here replaces the class that makes them work), and
+ * Targets whose `className` cannot be used: `Pagination.Ellipsis` spreads
+ * `{...props}` AFTER its own className (so one written here replaces the
+ * class that makes it work), and
  * `Dropdown.Divider` is a bare `React.FC` that declares no props at all and
  * renders its own `<hr>` regardless. A helper on one of these is named, never
  * converted.
  */
 export const NO_CLASSNAME_TARGETS = new Set([
-  'Navbar.Divider',
   'Pagination.Ellipsis',
   'Dropdown.Divider',
 ]);
@@ -164,7 +163,7 @@ export const HELPERLESS_TARGETS = new Set([
   'Pagination.Next',
   'Navbar.Dropdown',
   'Navbar.DropdownMenu',
-  'Dropdown.Divider',
+  'Navbar.Divider',
   'Panel.Heading',
   'Panel.Tabs',
   'Panel.Block',

bestax-migrate/src/sources/bloomer/transform.ts

@@ -343,13 +343,13 @@ export default function transform(
     // Targets that extend only React's HTML attributes take none of bloomer's
     // universal helpers; each becomes a TODO naming the Bulma class rather
     // than an excess-property type error the report never mentions.
-    // `Navbar.Divider` and `Pagination.Ellipsis` spread their props after
-    // their own className, and `Dropdown.Divider` declares none at all, so a
-    // class cannot be written on any of them: every helper is named instead,
-    // and anything else left on the divider would not compile.
+    // `Pagination.Ellipsis` spreads its props after its own className, and
+    // `Dropdown.Divider` declares none at all, so a class cannot be written
+    // on either of them: every helper is named instead, and anything else
+    // left on the divider would not compile.
     if (NO_CLASSNAME_TARGETS.has(target)) {
       // A spread may carry a `className` that would replace the structural
-      // class on these two, or props `Dropdown.Divider` silently ignores —
+      // class on `Pagination.Ellipsis`, or props `Dropdown.Divider` silently ignores —
       // and the codemod cannot read inside it. Keep bloomer's element.
       const spread = (element.openingElement.attributes ?? []).some(
         (a: any) => a.type === 'JSXSpreadAttribute'

bestax-migrate/src/sources/bulma-classes/__testfixtures__/navbar.input.tsx

@@ -47,3 +47,24 @@ export function SiteNavbar() {
     </nav>
   );
 }
+
+export function DarkNavbar() {
+  return (
+    <nav className="navbar is-dark" role="navigation" aria-label="main navigation">
+      <div className="navbar-menu has-text-light">
+        <div className="navbar-start has-text-weight-bold">
+          <div className="navbar-item has-dropdown is-hoverable">
+            <div className="navbar-dropdown">
+              <a className="navbar-item">About</a>
+              <hr className="navbar-divider my-0 site-divider" />
+              <a className="navbar-item">Jobs</a>
+            </div>
+          </div>
+        </div>
+        <div className="navbar-end has-text-white">
+          <a className="navbar-item">Log in</a>
+        </div>
+      </div>
+    </nav>
+  );
+}

bestax-migrate/src/sources/bulma-classes/__testfixtures__/navbar.output.tsx

@@ -50,3 +50,24 @@ export function SiteNavbar() {
     </Navbar>
   );
 }
+
+export function DarkNavbar() {
+  return (
+    <Navbar color="dark" role="navigation" aria-label="main navigation">
+      <Navbar.Menu textColor="light">
+        <Navbar.Start textWeight="bold">
+          <Navbar.Item as="div" className="has-dropdown is-hoverable">
+            <Navbar.DropdownMenu>
+              <Navbar.Item>About</Navbar.Item>
+              <Navbar.Divider className="my-0 site-divider" />
+              <Navbar.Item>Jobs</Navbar.Item>
+            </Navbar.DropdownMenu>
+          </Navbar.Item>
+        </Navbar.Start>
+        <Navbar.End textColor="white">
+          <Navbar.Item>Log in</Navbar.Item>
+        </Navbar.End>
+      </Navbar.Menu>
+    </Navbar>
+  );
+}

bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts

@@ -444,19 +444,27 @@ describe('plan', () => {
       });
     });
 
-    it('converts a divider only when it carries no other class', () => {
+    it('converts a divider, keeping its other classes in className', () => {
       expect(plan(facts('hr', 'navbar-divider')).conversion?.target).toBe(
         'Navbar.Divider'
       );
-      expect(plan(facts('hr', 'navbar-divider mt-2'))).toEqual({
-        conversion: null,
-        todos: [
-          {
-            rule: 'attr:className',
-            message: expect.stringContaining('drops its own class'),
-          },
-        ],
-      });
+      const { conversion, todos } = plan(facts('hr', 'navbar-divider mt-2'));
+      expect(todos).toEqual([]);
+      expect(conversion?.props).toEqual([]);
+      expect(conversion?.className).toBe('mt-2');
+    });
+
+    it('writes a text color on the navbar areas as textColor', () => {
+      for (const [root, target] of [
+        ['navbar-menu', 'Navbar.Menu'],
+        ['navbar-start', 'Navbar.Start'],
+        ['navbar-end', 'Navbar.End'],
+      ]) {
+        const { conversion } = plan(facts('div', `${root} has-text-white`));
+        expect(conversion?.target).toBe(target);
+        expect(conversion?.props).toContainEqual(['textColor', 'white']);
+        expect(conversion?.className).toBeNull();
+      }
     });
 
     it('leaves the burger and the dropdown trigger to a person', () => {

bestax-migrate/src/sources/bulma-classes/class-map.ts

@@ -152,11 +152,6 @@ export interface RootEntry {
   readonly countsChildren?: { readonly tag: string; readonly prop: string };
   /** The target takes no helper props, so every helper class stays a class. */
   readonly noHelpers?: boolean;
-  /**
-   * The target drops its own class when it is given a `className`, so the
-   * element converts only when it carries no other class.
-   */
-  readonly ownClassOnly?: boolean;
   /**
    * Attributes the target types as numbers, among the ones it is given (the
    * child's, when it `absorbs` the child and puts them there). A numeric
@@ -1216,9 +1211,7 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     defaults: { role: 'navigation', 'aria-label': 'main navigation' },
     ownProps: ['textColor', 'color', 'bgColor', 'transparent', 'fixed'],
   },
-  // No background prop on these parts. Menu, Start and End spread `textColor`
-  // onto the element rather than reading it, and type `color` to six colors,
-  // so their text color stays a class.
+  // No background prop on these parts.
   'navbar-brand': {
     ...BASE,
     target: 'Navbar.Brand',
@@ -1230,7 +1223,6 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     ...BASE,
     target: 'Navbar.Menu',
     tag: 'div',
-    textColor: null,
     bgColor: null,
     modifiers: flags({ 'is-active': 'active' }),
     ownProps: ['textColor', 'color', 'active'],
@@ -1239,15 +1231,13 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     ...BASE,
     target: 'Navbar.Start',
     tag: 'div',
-    textColor: null,
     bgColor: null,
     ownProps: ['textColor', 'color'],
   },
   'navbar-end': {
     ...BASE,
     target: 'Navbar.End',
     tag: 'div',
-    textColor: null,
     bgColor: null,
     ownProps: ['textColor', 'color'],
   },
@@ -1278,8 +1268,6 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     textColor: null,
     bgColor: null,
     noHelpers: true,
-    // bulma-ui's Navbar.Divider spreads `className` over its own class.
-    ownClassOnly: true,
     ownProps: [],
   },
   notification: {

bestax-migrate/src/sources/bulma-classes/plan.ts

@@ -554,13 +554,6 @@ export function plan(facts: ElementFacts): Plan {
   });
 
   const rest = tokens.filter(token => !converted.has(token));
-  if (entry.ownClassOnly && (rest.length > 0 || conditionalStays)) {
-    return refuse(
-      'attr',
-      'className',
-      `bestax \`${target}\` drops its own class when it is given a \`className\`, so this element's other classes would take the place of \`.${root}\`; keep it as markup`
-    );
-  }
   return {
     conversion: {
       target,

bestax-migrate/src/sources/bulma-classes/rules.ts

@@ -52,7 +52,7 @@ const VOCABULARY: ReadonlySet<string> = new Set([
   // Refused on every target, so no entry lists them.
   'dangerouslySetInnerHTML',
   'children',
-  // Refused where the target drops its own class for one it is given.
+  // Refused on a wrapper a target renders and on a child it renders itself.
   'className',
   // Refused on the child a target renders itself.
   'key',

scripts/gen-mcp-index.mjs

@@ -517,7 +517,6 @@ export async function bulmaClassTable() {
         writes: entry.writes ?? null,
         countsChildren: entry.countsChildren ?? null,
         noHelpers: entry.noHelpers ?? false,
-        ownClassOnly: entry.ownClassOnly ?? false,
       },
     ])
   );

scripts/gen-mcp-index.test.mjs

@@ -235,10 +235,9 @@ test("the bulma-classes table is bestax-migrate's own, whole", () => {
   // A family the codemod leaves as markup still says why, for the lookup.
   assert.equal(roots.dropdown.status, 'todo');
   assert.match(roots.dropdown.why, /Dropdown/);
-  // And the parts that take no helpers, or no class beside their own, say so.
+  // And the parts that take no helpers say so.
   assert.equal(roots['navbar-dropdown'].noHelpers, true);
-  assert.equal(roots['navbar-divider'].ownClassOnly, true);
-  assert.equal(roots.button.ownClassOnly, false);
+  assert.equal(roots.button.noHelpers, false);
   // And a component that converts only beside one of its parts says which.
   assert.ok(roots.card.wrapsChildren.unless.includes('Card.Content'));
   assert.equal(roots.button.wrapsChildren, null);

skills/bestax-migrate/references/bloomer/prop-map.md

@@ -151,8 +151,8 @@ A few bestax parts extend only React's HTML attributes and take no Bulma helper
 `Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
 `Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
 parts. A bloomer helper on one of those becomes the Bulma class in `className` — except on
-`Navbar.Divider`, `Pagination.Ellipsis` and `Dropdown.Divider`, which write their own className
-last or take no props at all: there the helper is named in a TODO instead, and an element
+`Pagination.Ellipsis` and `Dropdown.Divider`, which write their own className last or take no
+props at all: there the helper is named in a TODO instead, and an element
 carrying a spread is left as bloomer's. Otherwise it is the Bulma class in `className` (`is-pulled-right`,
 `m-0`, `is-hidden-mobile`, …), since Bulma v1 still ships every one of them; only a dynamic
 value is flagged. The same conversion covers the modifiers bestax has no prop for anywhere —

skills/bestax-migrate/references/bulma-classes/component-map.md

@@ -98,7 +98,7 @@ that doesn't gets a `defaults:Navbar` TODO. A `.has-dropdown` item becomes a `Na
 keeps `has-dropdown` as a class, because a `Navbar.Dropdown` would give the `.navbar-link` inside
 it dropdown semantics the markup didn't have. That link and the `.navbar-burger` stay markup with
 a `family:<class>` TODO; converting either means building the dropdown or the toggle with bestax,
-by hand. A `.navbar-divider` converts only when it carries no other class.
+by hand.
 
 Form markup converts piece by piece: `.field` to `Field`, `.control` to `Control`, the input
 and textarea to `InputBase` and `TextAreaBase`, the controls without wrappers of their own, and a