V5 - Migration : Helper Tool

[aavmurphy]

Browsing through the migration doco for V5, there are a lot of CSS class name changes
especially the (e.g.) mr-3 => me-3 changes (that's from margin-right to margin-end)

#1

A helper npm script would be useful to identify class name changes in code

[sample invocation]
v5-migration html/** css/** js/** templates/**

[sample output]
[filename] [ line no ] alert-danger replaced by bg-danger
[filename] [ line no ] mr-3 replaced by me-3

sure, you wouldn't get everything, and there would be false positives, but it would help a lot

#2

Allowing both (e.g.) mr-3 and me-3 would make a big difference - this would remove a big chunk of migration work.

e.g. mr-3 could be depreciated but not removed until v6
see #32402

[rohit2sharma95]

There is already an issue created for aliasing class names: #32450

[aavmurphy]

Thanks, @rohit2sharma95

[septatrix]

Due to the vast differences in frameworks and templating engine such a migration script will probably be very limiting at best. Even packages like PurifyCSS simply look for the words and do no fancy parsing. The best would probably be a custom regex like (script="[^"]*)(mr-3)([^"]*") and replace it with \1me-3\3. You could then put this in a small script to perform this for every changes class and maybe for other usages of classes.

[san-kumar]

I wrote a simple PHP script that looks like successfully upgraded my projects to v5. It's a super ugly hack so use it at your own risk but from the first look everything seems to be working for me.

<?php

$dir = $argv[1] ?: die("{$argv[0]} '\$dir'");
$upgrades = ['float', 'text', 'dropdown-menu', 'bs-popover', 'bs-tooltip', 'carousel-item', 'border',];
$fixed = ['ml-' => 'ms-', 'mr-' => 'me-', 'pl-' => 'ps-', 'pr-' => 'pe-', 'dropleft' => 'dropstart', 'dropright' => 'dropend',];
$suffixes = ['', 'xs', 'sm', 'md', 'lg', 'xl'];

$words = array_keys($fixed);
foreach ($upgrades as $upgrade) {
    foreach ($suffixes as $suffix) {
        foreach (['left', 'right'] as $direction) {
            $words[] = $upgrade . ($suffix ? "-$suffix" : '') . "-$direction";
        }
    }
}

$regex = join('|', array_map('preg_quote', $words));
$cmd = "find '$dir' -regextype posix-egrep -regex '.*\.(js|vue|s?css|php|html)$' -and -not -regex '.*/(node_modules|tools|dist_electron|themes|\.vuepress|source|\.chrome|vendor|dist|autocomplete|defunct)/.*' -and -not -regex '.*(chunk\-vendors|mimes)\.js$' -and -not -regex '.*(adminer)\.php$' -and -not -regex '.*\.min\..*' -print0 | xargs -0 egrep -lri '($regex)'";
echo $cmd, "\n";
$files = explode("\n", `$cmd`);
$backup = sprintf("zip 'backup-%s-upgrade-%s.zip' %s", basename($dir), date('d-M-Y-h-i-s'), join(' ', array_map('str_quote', $files)));
echo $backup, "\n";
system($backup);

foreach ($files as $file) {
    echo "upgrading $file..\n";
    $data = file_get_contents($file);

    foreach ($words as $word) {
        $replace = $fixed[$word] ?? str_replace('left', 'start', str_replace('right', 'end', $word));
        $data = str_replace($word, $replace, $data);
    }

    file_put_contents($file, $data);
}

P.S. I know it's super ugly and hacky and only works on linux, but may help someone so posting here. Also goes without saying but run it only on a backup dir.*

[mdo]

I think this is outside the scope of the main repo and our availability. Closing as a won't fix. It would be awesome if someone in the community helped us out on this with another tool :).

[mvgrimes]

I've created a pretty simple script that helps automate the upgrade to both Bootsrap v5 and Reactstrap v9. It won't fix everything, but it fixes or reports most of the breaking changes.

You can find it on Github at mvgrimes/bootstrap5-upgrade.