Convert Bootstrap 2 variables, class names and HTML to Bootstrap 3
<sudo> npm install -g convert-bootstrap-2-to-3
The simplest way to run it is:
bs3 path/to/file
However, you can also check multiple files at once:
find . -name '*.css' | xargs bs3
or with options:
find . -name '*.css' | xargs -J{} bs3 {} -di
There are some options that you can pass to the command:
-q, --quiet
will set it so that it only shows files that have changes. By default it will log out all files and report 'clear' if there are no changes.
-o, --open
If you have an editor specified in your gitconfig (under user.editor), this will open all of the files that need changes in your editor.
-i, --inline-edit
For some of the changes (mainly the ones that can be safely changed), if you pass this option, it will modify the file and convert the old value to the new equivalent.
I would recommend running this only on files that are checked into git or some VCS, as it may edit something incorrectly, and with the file in VCS, you can at least pick and choose which changes you'd like to keep.
-v, --variables
This option, which is true by default will try to convert variables to their new equivalents (including the camelCased to dashed-base style of your variables), and will comment out (or remove, if you pass an additional option) variables that have been removed in Bootstrap 3.
If you wish to have the CSS ignore variables, go ahead and pass either --no-v
or --no-variables
.
-d, --diff
This will display a colored diff of what would be changed on the line. This can get a bit noisy, but is useful if you want to see what will be changed by passing -i
.
--removeold
This will, if --variables
is set, remove the entire line that old variables are on. Be careful with this, as it will remove not just var declarations, but any usage of the variable, so something like background: $white;
would be deleted.
.btn
and btn
(as an example), when technically, the first could be a property of an object, and the second could be a variable name.
So token parsing in this case is a little tough.Dynamically created strings will more than likely be skipped, so something like:
<span class="btn <%= buttonType %>"></span>
would get flagged (since it's inside of a class attribute, and it can't tell if buttonType
contains "btn-default" or "btn-primary", etc) and this:
<%
String cssClass = "btn";
if (buttonType == "default") {
cssClass += " btn-default";
}
%>
<span class="<%= cssClass %>"></span>
would not get flagged either (since the parser looks at attributes, but doesn't know their dynamically calculated values).
style
tags and script
tags (including aui:script
), it won't be able to replace them, but it will output a message telling you what line the change needs to be made (and diff will still work)