bestax-migrate 2.1.0 → 2.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAUL,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AA6wBD,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf;AAED,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,CAGjE,CAAC"}
+{"version":3,"file":"specials.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/specials.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,EAUL,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAIxB,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AA21BD,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,EAClB,OAAO,EAAE,GAAG,GACX,aAAa,CAIf;AAED,kEAAkE;AAClE,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,CAGjE,CAAC"}

package/dist/sources/react-bulma-components/specials.js

@@ -131,33 +131,90 @@ const SPECIALS = {
         ctx.dirty = true;
         return { handledProps: ['multiline'] };
     },
-    /** `<Button remove />` is Bulma's delete cross → bestax `<Delete />`. */
-    button(ctx, _path, element) {
+    /**
+     * `<Button remove />` (or any truthy literal) is Bulma's delete
+     * cross → bestax `<Delete />`. A falsy literal just drops the prop; only a
+     * genuine expression can render as either one depending on runtime state, so
+     * it's a TODO instead of a silent guess.
+     */
+    button(ctx, path, element) {
         const attr = findAttr(element, 'remove');
         if (!attr)
             return {};
-        removeAttr(element, attr);
-        ctx.dirty = true;
-        return { target: 'Delete' };
+        const literal = literalValueOf(attr);
+        if (literal.kind !== 'expression') {
+            // A statically-known value always renders the same at runtime: truthy
+            // (`remove`, `remove={true}`, `remove="true"`) → `<Delete />`; falsy
+            // (`remove={false}`, `remove=""`, `remove={0}`) → just drop the prop.
+            removeAttr(element, attr);
+            ctx.dirty = true;
+            return literal.value ? { target: 'Delete' } : {};
+        }
+        addTodo(ctx, path, 'prop:remove', '`remove` has a dynamic value; this can render as either a Button or a Delete cross — split the branch by hand');
+        return {};
     },
-    /** Heading → Title / SubTitle / plain `.heading` paragraph. */
+    /**
+     * Heading → Title / SubTitle / plain `.heading` paragraph, matching RBC's
+     * `title: !subtitle && !heading` / `subtitle: subtitle` — the *value* of
+     * each prop picks the target, not merely whether it was passed. Any
+     * statically-known literal resolves to a fixed truthiness at codemod time
+     * (a bare prop and `heading={true}`/`heading="heading"` are all truthy;
+     * `heading={false}`/`heading=""`/`heading={0}` are falsy and equivalent to
+     * the prop being absent), exactly as RBC evaluates the prop at runtime —
+     * this mirrors the Button `remove` handler so the two don't contradict each
+     * other on string/number literals. Only a genuine expression can't be
+     * resolved: it's left in place with a TODO and a conservative
+     * (Title/SubTitle, never the structural plain-element rewrite) fallback so
+     * the branch can be split by hand. The subtitle class is applied
+     * independently of heading in RBC, so a dynamic `subtitle` blocks the
+     * structural `heading` collapse — collapsing would silently drop it.
+     */
     heading(ctx, path, element) {
         const headingAttr = findAttr(element, 'heading');
-        if (headingAttr) {
+        const subtitleAttr = findAttr(element, 'subtitle');
+        const headingLit = headingAttr ? literalValueOf(headingAttr) : undefined;
+        const subtitleLit = subtitleAttr ? literalValueOf(subtitleAttr) : undefined;
+        const headingDynamic = headingLit?.kind === 'expression';
+        const subtitleDynamic = subtitleLit?.kind === 'expression';
+        // A resolvable literal (boolean/string/number) collapses to its runtime
+        // truthiness; an expression stays dynamic.
+        const headingTruthy = !!headingLit && headingLit.kind !== 'expression' && !!headingLit.value;
+        const subtitleTruthy = !!subtitleLit && subtitleLit.kind !== 'expression' && !!subtitleLit.value;
+        // Dynamic values can't be resolved to a target: leave the prop on the
+        // element (so its expression survives for hand-splitting) plus a TODO.
+        if (subtitleDynamic) {
+            addTodo(ctx, path, 'prop:subtitle', '`subtitle` has a dynamic value; pick between Title / SubTitle by hand');
+        }
+        if (headingDynamic) {
+            addTodo(ctx, path, 'prop:heading', '`heading` has a dynamic value; when truthy it renders a plain `<p className="heading">` instead of Title/SubTitle — resolve by hand');
+        }
+        // A truthy literal `heading` collapses to a plain `.heading` paragraph —
+        // but only when `subtitle` isn't a dynamic value the collapse would drop.
+        // A truthy *literal* `subtitle` is safe to collapse: RBC applies its class
+        // independently, so it rides along on the paragraph as `heading subtitle`
+        // (dropping it would be the same silent loss the dynamic guard prevents).
+        if (headingTruthy && !subtitleDynamic) {
             removeAttr(element, headingAttr);
-            const className = mergeClassName(ctx, path, element, 'heading', 'Heading');
+            const className = mergeClassName(ctx, path, element, subtitleTruthy ? 'heading subtitle' : 'heading', 'Heading');
             const rest = stripModifierProps(ctx, path, attributesOf(element).filter(a => !['size', 'weight', 'spaced', 'subtitle'].includes(a.name.name)), 'Heading');
             const replacement = plainElement(ctx.j, 'p', className, rest, element.children ?? []);
             path.replace(replacement);
             ctx.dirty = true;
             return { replaced: true };
         }
-        const subtitleAttr = findAttr(element, 'subtitle');
-        if (subtitleAttr) {
+        // A resolvable literal `heading` that didn't collapse (falsy, or truthy
+        // but blocked by a dynamic subtitle) behaves as if the prop were absent —
+        // drop it. A dynamic `heading` stays put (its TODO is already filed above).
+        if (headingLit && !headingDynamic) {
+            removeAttr(element, headingAttr);
+            ctx.dirty = true;
+        }
+        if (subtitleLit && !subtitleDynamic) {
             removeAttr(element, subtitleAttr);
             ctx.dirty = true;
-            return { target: 'SubTitle' };
+            return { target: subtitleTruthy ? 'SubTitle' : 'Title' };
         }
+        // Dynamic subtitle (attr kept) or no subtitle → conservative Title.
         return { target: 'Title' };
     },
     'level-side'(ctx, path, element) {

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAqFrE,eAAO,MAAM,eAAe,EAAE,eAmL7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/sources/react-bulma-components/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,gBAAgB,CAAC;AAuKrE,eAAO,MAAM,eAAe,EAAE,eAmL7B,CAAC"}

package/dist/sources/react-bulma-components/styles.js

@@ -60,13 +60,98 @@ const OTHER_BULMA_IMPORT = /^\s*@import\s+['"][^'"]*bulma[^'"]*['"]/;
 const EXTENSION_IMPORT = /^\s*@import\s+['"][^'"]*\bbulma-([\w-]+?)(?:\/|\.|['"])/;
 /** Any `$name: value;` declaration (with or without `!default`). */
 const VAR_DECL = /^\s*\$([\w-]+)\s*:\s*(.+?)\s*(!default)?\s*;\s*$/;
+/**
+ * Strips Sass block comments (slash-star … star-slash spans) from a value
+ * before it is analyzed for foldability or top-level commas. A comment can
+ * carry an unbalanced quote (an apostrophe in `user's`) or a stray `(`/`$`
+ * that would otherwise fool the character scanners into mis-reading the
+ * value's structure; the comment is inert to Sass, so removing it for
+ * analysis is safe. The emitted value still carries the comment verbatim.
+ *
+ * The scan tracks quote state first and only recognizes a block comment
+ * outside a string, in one pass — a bare regex would treat a slash-star …
+ * star-slash-shaped span that straddles two quoted strings (opening marker in
+ * one string, closing marker in the next) as a comment and delete the real
+ * top-level comma between them, so a genuine list would fold unparenthesized.
+ * An unterminated comment consumes the rest of the value.
+ */
+function stripSassComments(value) {
+    let result = '';
+    let quote = null;
+    let escaped = false;
+    for (let i = 0; i < value.length; i += 1) {
+        const char = value[i];
+        if (quote) {
+            result += char;
+            if (escaped) {
+                escaped = false;
+            }
+            else if (char === '\\') {
+                escaped = true;
+            }
+            else if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '/' && value[i + 1] === '*') {
+            const end = value.indexOf('*/', i + 2);
+            if (end === -1)
+                break; // unterminated comment — drop the rest
+            i = end + 1; // resume after the closing */
+            continue;
+        }
+        if (char === '"' || char === "'")
+            quote = char;
+        result += char;
+    }
+    return result;
+}
 /**
  * A value is fold-safe for `with (…)` when it is a plain literal — no
  * function calls, interpolation, variable references, or at-rules. Hex
- * colors (`#ff6b35`) are fine; `#{…}` interpolation is not.
+ * colors (`#ff6b35`) are fine; `#{…}` interpolation is not. Block comments are
+ * ignored for this test — their contents don't make the value non-literal.
  */
 function isFoldableValue(value) {
-    return !/[()$@]|#\{/.test(value);
+    return !/[()$@]|#\{/.test(stripSassComments(value));
+}
+/**
+ * Whether `value` has a comma outside any quoted string — a bare Sass list
+ * (`'Nunito', sans-serif`) that must be parenthesized before it can sit
+ * inside `with (…)`, or Dart Sass reads the comma as an argument separator
+ * instead of a list delimiter. Block comments are stripped first so a quote or
+ * comma inside one (an apostrophe in `user's`) can't skew the scan.
+ */
+function hasTopLevelComma(value) {
+    let quote = null;
+    let escaped = false;
+    for (const char of stripSassComments(value)) {
+        if (escaped) {
+            escaped = false;
+            continue;
+        }
+        if (char === '\\') {
+            escaped = true;
+            continue;
+        }
+        if (quote) {
+            if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+        }
+        else if (char === ',') {
+            return true;
+        }
+    }
+    return false;
+}
+/** Formats a folded value for the `with (…)` clause, parenthesizing a bare list. */
+function formatFoldedValue(value) {
+    return hasTopLevelComma(value) ? `(${value})` : value;
 }
 function report(collector, file, line, rule, message) {
     collector?.add({ file, line, rule, message });
@@ -113,7 +198,7 @@ export const transformStyles = (filePath, source, collector, options) => {
                 out.push(`${indent}@use '${bulmaSass}' with (`);
                 foldableVars.forEach(({ name, value }, index) => {
                     const comma = index < foldableVars.length - 1 ? ',' : '';
-                    out.push(`${indent}  $${name}: ${value}${comma}`);
+                    out.push(`${indent}  $${name}: ${formatFoldedValue(value)}${comma}`);
                 });
                 out.push(`${indent});`);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bestax-migrate",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Codemods for migrating existing React apps from other Bulma libraries to @allxsmith/bestax-bulma",
   "type": "module",
   "bin": {