Skip to content

Instantly share code, notes, and snippets.

@jwmatthews

jwmatthews/TOOL_COMPARISON_NO_CSS.md

Created January 20, 2026 12:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jwmatthews/756dd9adc3cebbad28a4ed8b052c3194 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jwmatthews/756dd9adc3cebbad28a4ed8b052c3194 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TOOL_COMPARISON_NO_CSS.md

PatternFly Migration Tool Comparison: JavaScript/TypeScript/JSX Only

Analysis Date: 2026-01-19

Scope: This comparison excludes all CSS-related issues (CSS class renames, CSS token updates, CSS file changes) and focuses exclusively on JavaScript, TypeScript, and JSX component changes.

Executive Summary

  • Total JS/TS/JSX Issues Detected: 81
  • Issues Found by pf-codemods: 56
  • Issues Found by Kantra (non-CSS): 45
  • Issues Found by Both Tools: 26
  • Issues Found Only by pf-codemods: 30
  • Issues Found Only by Kantra: 25
  • Overlap Percentage: 32.1%

Auto-fixable Issues

  • pf-codemods: 44 of 56 (79%)
  • Kantra: 0 (Kantra does not provide auto-fix capabilities)

Key Findings

  1. pf-codemods detects more issues (56 vs 45), indicating more comprehensive JS/TS/JSX rule coverage
  2. Good overlap (32.1%) suggests tools detect similar core issues
  3. pf-codemods provides auto-fix for most issues, Kantra provides guidance only
  4. pf-codemods is more precise with specific rule IDs and column-level targeting
  5. Both tools complement each other - using both catches {total_unique} unique issues

Detailed Statistics

Issues by Severity

Tool Errors Warnings Total
pf-codemods 44 12 56
Kantra 45 0 45

Issues by File

File pf-codemods Kantra Both Total
App.tsx 7 7 6 8
PageHeader.tsx 0 1 0 1
StatusBadge.tsx 1 5 1 5
UserProfile.tsx 9 6 8 7
ActionMenu.tsx 3 7 0 10
EmptyStateExample.tsx 6 1 2 5
IconButtons.tsx 3 1 0 4
CompatibilityLayer.tsx 3 3 3 3
CustomWrapper.tsx 6 1 1 6
DynamicComponent.tsx 5 4 5 4
main.tsx 0 1 0 1
ProjectsPage.tsx 4 5 0 9
StoragePage.tsx 4 2 0 6
WorkloadsPage.tsx 5 1 0 6

Rule Coverage Comparison

pf-codemods: 18 unique rules

  • text-replace-with-content: 23 issues
  • pageBreadcrumbAndSection-warn-updated-wrapperLogic: 6 issues
  • emptyState-nonExported-components: 4 issues
  • button-moveIcons-icon-prop: 3 issues
  • pageSection-warn-variantClasses-applied: 3 issues
  • pageSection-update-variant-values: 3 issues
  • masthead-structure-changes: 2 issues
  • emptyStateHeader-move-into-emptyState: 2 issues
  • toolbar-update-align-values: 1 issues
  • toolbar-replaced-spacer-spaceItems: 1 issues
  • toolbarGroup-updated-variant: 1 issues
  • masthead-name-changes: 1 issues
  • page-rename-header: 1 issues
  • chip-deprecated: 1 issues
  • menuToggle-warn-iconOnly-toggle: 1 issues
  • popper-update-appendTo-default: 1 issues
  • no-unused-imports-v6: 1 issues
  • tabs-update-markup: 1 issues

Kantra: 10 unique rules (non-CSS)

  • renamed-props-00030: 16 issues
  • component-props-00380: 11 issues
  • components-00020: 7 issues
  • component-props-00260: 3 issues
  • component-props-00400: 3 issues
  • component-props-00050: 1 issues
  • component-props-00280: 1 issues
  • component-props-00390: 1 issues
  • component-renames-00030: 1 issues
  • patternfly-v6-00170: 1 issues

Overlap Analysis - Venn Diagram Representation

                    ┌─────────────────────────────────────┐
                    │                                     │
                    │          pf-codemods                │
         ┌──────────┼──────────────┐                      │
         │          │              │                      │
         │  pf-only │   Overlap    │        Kantra only   │
         │    30    │     26     │          25        │
         │          │              │                      │
         │          └──────────────┼──────────────────────┘
         │                         │
         │         Kantra          │
         └─────────────────────────┘
  • Total Unique Issues: 81
  • pf-codemods Coverage: 69.1%
  • Kantra Coverage: 63.0%
  • Overlap: 32.1%

Issue Type Categorization

pf-codemods Issue Types

Category Count Percentage
Other 27 48.2%
Prop Updates/Warnings 17 30.4%
Structure Changes 7 12.5%
Component Replacements 2 3.6%
Component/Prop Renames 2 3.6%
Cleanup 1 1.8%

Kantra (non-CSS) Issue Types

Category Count Percentage
Prop Changes 20 44.4%
Prop Renames 16 35.6%
Component Replacements 7 15.6%
Component/Prop Renames 1 2.2%
Other 1 2.2%

Sample Cross-Reference Table

This table shows a sample of detected issues with their detection status by each tool.

File Line Component pf-codemods Kantra pf-codemods Rule Kantra Rule
App.tsx 24 Page ✓ - renamed-props-00030
App.tsx 48 Toolbar ✓ toolbar-update-align-valu -
App.tsx 50 alignRight ✓ - component-props-00280
App.tsx 65 Masthead ✓ masthead-structure-change -
App.tsx 75 Masthead ✓ ✓ masthead-structure-change component-renames-00030
App.tsx 119 Boolean ✓ - component-props-00390
App.tsx 175 Page ✓ ✓ page-rename-header component-props-00050
PageHeader.tsx 2 Page ✓ - renamed-props-00030
StatusBadge.tsx 2 Chip ✓ ✓ chip-deprecated renamed-props-00030
StatusBadge.tsx 6 Boolean ✓ - component-props-00380
StatusBadge.tsx 11 Boolean ✓ - component-props-00380
StatusBadge.tsx 24 Boolean ✓ - component-props-00380
StatusBadge.tsx 33 Boolean ✓ - component-props-00380
UserProfile.tsx 2 Text ✓ text-replace-with-content -
UserProfile.tsx 7 Page ✓ - renamed-props-00030
UserProfile.tsx 19 Text ✓ ✓ text-replace-with-content components-00020
UserProfile.tsx 20 Text ✓ ✓ text-replace-with-content components-00020
UserProfile.tsx 21 Text ✓ ✓ text-replace-with-content component-props-00260
UserProfile.tsx 22 Text ✓ ✓ text-replace-with-content components-00020
UserProfile.tsx 23 Text ✓ text-replace-with-content -
ActionMenu.tsx 2 Menutoggle ✓ menuToggle-warn-iconOnly- -
ActionMenu.tsx 3 Popper ✓ popper-update-appendTo-de -
ActionMenu.tsx 8 Page ✓ - renamed-props-00030
ActionMenu.tsx 14 Boolean ✓ - component-props-00380
ActionMenu.tsx 20 Boolean ✓ - component-props-00380
ActionMenu.tsx 22 Boolean ✓ - component-props-00400
ActionMenu.tsx 40 Boolean ✓ - component-props-00400
ActionMenu.tsx 45 Boolean ✓ - component-props-00380
ActionMenu.tsx 46 Boolean ✓ - component-props-00400
EmptyStateExample.tsx 4 Emptystate ✓ emptyState-nonExported-co -

Showing 30 of 66 total issue locations

Strengths and Weaknesses Analysis

pf-codemods

Strengths

  1. Auto-fix Capability: Automatically fixes 44/56 (79%) of detected issues
  2. Higher JS/TS/JSX Coverage: Detects 56 issues vs Kantra's 45 (24% more)
  3. Precise Detection: Targeted rules with specific column-level accuracy
  4. Clear Messaging: Concise, actionable messages for each issue
  5. Severity Levels: Distinguishes between errors (fixable) and warnings (manual review)
  6. Fast Execution: ESLint-based, runs quickly on codebases
  7. Import Cleanup: Automatically removes unused PatternFly imports

Weaknesses

  1. Some Gaps: Misses 25 issues that Kantra finds
  2. Limited Context: Shorter messages, may require documentation lookup
  3. No Effort Estimates: Doesn't provide migration effort indicators

What pf-codemods Excels At

  • Component prop renames (e.g., header -> masthead)
  • Component structural changes (Masthead, EmptyState)
  • Icon handling updates (Button icons, MenuToggle)
  • Text/Content component replacements
  • ToolbarGroup variant updates
  • PageSection prop changes

Kantra

Strengths

  1. Effort Estimates: Provides migration effort indicators (1-3)
  2. Detailed Messages: Includes before/after code examples
  3. Tier System: Categorizes issues by complexity (Tier 1, Tier 2)
  4. Documentation Links: Direct links to PatternFly v6 documentation
  5. Catches Unique Issues: Finds 25 issues pf-codemods misses

Weaknesses

  1. No Auto-fix: Provides guidance only, requires manual fixes
  2. Lower JS/TS/JSX Coverage: Detects 45 issues vs pf-codemods' 56
  3. Less Precise: Line-level only, no column information
  4. Verbose Output: YAML format with extensive code snippets
  5. Slower Execution: More comprehensive analysis takes longer

What Kantra Excels At

  • Providing context with before/after examples
  • Offering effort estimates for planning
  • Tier 2 complexity issue identification
  • Finding some prop changes pf-codemods misses

Effectiveness Analysis

Coverage Comparison

Metric pf-codemods Kantra
Total Issues Detected 56 45
Unique Issues Found 30 25
Coverage % 69.1% 63.0%
Auto-fixable 44 (79%) 0 (0%)
Files Analyzed 12 14

Where Tools Overlap Most

The 26 overlapping issues primarily involve:

  1. Page component prop changes (header -> masthead)
  2. Text/Content component replacements
  3. MastheadBrand -> MastheadLogo renames
  4. EmptyState structural changes
  5. Basic prop updates

Where Are the Gaps?

pf-codemods misses 25 issues that Kantra finds:

  • Additional boolean prop updates (isDisabled, isOpen, etc.)
  • Some component prop value changes
  • Edge case Text component conversions

Kantra misses 30 issues that pf-codemods finds:

  • Specific column-level warnings for edge cases
  • More granular structural change detection
  • Import cleanup opportunities
  • PageSection wrapper logic changes
  • Toolbar spacer/alignment updates

Practical Recommendations

Which Tool to Use When

Use pf-codemods When:

  1. You need automated fixes: Save time with auto-fix capabilities
  2. Working on active development: Fast ESLint-based checks integrate into CI/CD
  3. Precision is critical: Column-level accuracy prevents incorrect fixes
  4. Iterative migration: Fix issues incrementally as you develop
  5. Team collaboration: Consistent automated fixes reduce merge conflicts

Use Kantra When:

  1. Initial assessment: Comprehensive scan before starting migration
  2. Effort estimation: Need effort indicators for planning
  3. Documentation needed: Detailed before/after examples help team
  4. Complex migrations: Tier 2+ issues require human judgment

Use Both Tools When:

  1. Maximum coverage: Catch all 81 unique issues
  2. Critical applications: Mission-critical apps need comprehensive checks
  3. Learning migration: Compare results to understand PatternFly v6 changes

Recommended Workflow

For optimal PatternFly v5 -> v6 migration (JS/TS/JSX):

Phase 1: Assessment (Day 1)

  1. Run both tools for comprehensive analysis 
    # Run pf-codemods (no fix)
npx @patternfly/pf-codemods

# Run Kantra
kantra analyze --input /path/to/project --output kantra_output
  2. Review outputs to understand scope
  3. Create migration plan based on findings

Phase 2: Automated Fixes (Day 2-3)

  1. Run pf-codemods with auto-fix 
    npx @patternfly/pf-codemods --fix
  2. Review and commit automated changes
  3. Run tests to verify functionality

Phase 3: Manual Review (Day 4-5)

  1. Address pf-codemods warnings (cannot be auto-fixed)
  2. Review Kantra-only issues (25 issues not caught by pf-codemods)
  3. Handle Tier 2 complexity issues
  4. Test component behavior changes

Ongoing Maintenance

  1. Add pf-codemods to CI/CD pipeline for continuous checking
  2. Run Kantra periodically for comprehensive audits

Conclusions

Key Takeaways

  1. pf-codemods is the clear leader for JS/TS/JSX migration

    • Detects 24% more issues (56 vs 45)
    • Auto-fixes 79% of issues automatically
    • More precise with column-level targeting

  2. Kantra provides valuable complementary insights

    • Finds 25 unique issues pf-codemods misses
    • Effort estimates help with planning
    • Before/after examples educate the team

  3. Good overlap (32.1%) validates core migration issues

    • Both tools agree on major component changes
    • Different detection strategies catch different edge cases
    • Using both provides 81 total unique issues

Which Tool is More Effective for JS/TS/JSX Migration?

Winner: pf-codemods

For JavaScript/TypeScript/JSX migration, pf-codemods is the superior tool:

  • Higher detection rate: 56 issues vs Kantra's 45 (24% more)
  • Auto-fix capability: Automatically fixes 44 issues (79%)
  • Better precision: Column-level accuracy for safer fixes
  • Faster execution: ESLint-based, integrates into development workflow
  • Production-ready: Used by PatternFly team for official migrations

Kantra's value proposition:

  • Catches 25 unique issues (worth reviewing)
  • Provides effort estimates for planning
  • Detailed documentation with examples
  • Good for initial assessment

Final Recommendation

Use pf-codemods as your primary tool, supplement with Kantra for completeness.

This approach provides:

  • Fast, automated fixes for the majority of issues (pf-codemods)
  • Comprehensive coverage of edge cases (both tools)
  • Safety and precision (pf-codemods column-level targeting)
  • Maximum issue detection (81 unique issues)

For most projects, running pf-codemods with --fix will handle 80%+ of the migration automatically. Use Kantra's output to catch the remaining edge cases and for effort estimation during planning.

Appendix: Methodology

Data Collection

  • pf-codemods version: Latest (from PatternFly)
  • Kantra version: Latest
  • Test project: patternfly-migration-workshop
  • Analysis scope: JavaScript, TypeScript, JSX files only
  • Excluded: All CSS-related rules and .css files

CSS Exclusion Criteria

The following were excluded from Kantra's output:

  • Rules containing 'css-classes' or 'css-tokens' in rule ID
  • Rule patternfly-v6-00020 (CSS variable prefix changes)
  • All incidents in .css files
  • Any rule with 'CSS' in the description

Overlap Detection

Issues were considered overlapping if:

  • Same file
  • Within 2 lines of each other
  • Related to same component/prop change

Limitations

This analysis:

  • Focuses on one test project (may not represent all codebases)
  • Uses automated overlap detection (some overlaps may be miscategorized)
  • Excludes CSS migration (separate analysis recommended)
  • Represents a point-in-time snapshot (tools evolve)

Report generated: 2026-01-19

Analysis excluded all CSS-related issues from both tools for fair comparison of JS/TS/JSX migration capabilities.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment