v2.2.0 - Classes Per Line and Sorted Classes

Features:

• There is now an sortClasses option to sort your classes, similar to sortAttributes. The goal is to reduce noise in snapshots to give more meaningful diffs. It is enabled by default, you'll likely see some snapshots needing updated after this.
  • vueSnapshots.sortClasses = false;
    • <span class="dog cat zebra pig"></span>
  • vueSnapshots.sortClasses = true;
    • <span class="cat dog pig zebra"></span>
• There is now a formatting.classesPerLine option, similar to formatting.attributesPerLine. This breaks up classes on to multiple lines based on the numeric setting (defaults to allowing 1 class on the same line as the class attribute). The goal with this setting is to decrease visual fatigue when looking at snapshot diffs, making them more "diffable".
  • vueSnapshots.formatting.classesPerLine = 500;

    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      disabled
    >
      9 classes
    </button>

  • vueSnapshots.formatting.classesPerLine = 1;

    <button
      class="
        bg-blue-500
        hover:bg-blue-700
        text-white
        font-bold
        py-2
        px-4
        rounded
        focus:outline-none
        focus:shadow-outline
      "
      disabled
    >
      9 classes
    </button>

  • vueSnapshots.formatting.classesPerLine = 0;

    <button
      class="
        bg-blue-500
      "
      disabled
    >
      1 class
    </button>

  • vueSnapshots.formatting.classesPerLine = 1;

    <button
      class="bg-blue-500"
      disabled
    >
      1 class
    </button>

Maintenance:

• Test coverage remains at 100%
• Updated Types.js for new API

Diff:

• v2.1.0...v2.2.0