convert-bootstrap-2-to-3

Description

Convert Bootstrap 2 variables, class names and HTML to Bootstrap 3

Installation

<sudo> npm install -g convert-bootstrap-2-to-3

Running

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

Options

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.

Experimental or less used options

-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.

Known issues and Caveats

• Does not handle HTML or CSS inside of Java or JavaScript files (still trying to think of how to best handle these cases, since it can be tough to tell what "mode" it should process in and look for).
• JavaScript parsing is still currently the weakest portion. The issue stems from the fact that CSS selectors can be used (for querying the DOM), or HTML fragments can be created. However, parsing .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).

• While it will check code inside of 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)