From 3b170ae079a2be36531724bd9905d9ebfd369d9d Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Fri, 12 Jun 2015 09:57:09 -0400
Subject: [PATCH] Adding diff the build to assert that less and scss generated
 css are the same, ignoring previously accepted differences.

---
 .gitignore               |  2 ++
 .npmignore               |  1 +
 README.md                | 36 ++++++++++++++++++++----------------
 package.json             | 10 ++++++++--
 test/diff/less-scss-diff | 13 +++++++++++++
 5 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 test/diff/less-scss-diff

diff --git a/.gitignore b/.gitignore
index 6cab495..21b4091 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 node_modules/
+test/output
+test/diff/less-scss-diff-new
 offscreen.css
 offscreen-less.css
diff --git a/.npmignore b/.npmignore
index 0bcf546..b2a694f 100644
--- a/.npmignore
+++ b/.npmignore
@@ -6,6 +6,7 @@
 .csslintrc
 node_modules
 karma.conf.js
+test
 offscreen.css.less
 offscreen.css.scss
 offscreen-less.css
diff --git a/README.md b/README.md
index 23eba4d..3a88364 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,20 @@
-# vui-offscreen
-[![NPM version][npm-image]][npm-url]
-[![Build status][ci-image]][ci-url]
-
-The **vui-offscreen** library provides a Less mixin and CSS for positioning elements off the screen. 
-Off-screen elements are valuable from an accessibility perspective when you wish to have elements which are only visible to screen readers. For more information, read [WebAIM's article on Invisible Content](http://webaim.org/techniques/css/invisiblecontent/).
-
-For further information on this component and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
-
-#### Coding styles
-See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on VUI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
-
-[npm-url]: https://npmjs.org/package/vui-offscreen
-[npm-image]: https://img.shields.io/npm/v/vui-offscreen.svg
-[ci-image]: https://travis-ci.org/Brightspace/valence-ui-offscreen.svg?branch=master
-[ci-url]: https://travis-ci.org/Brightspace/valence-ui-offscreen
+# vui-offscreen
+[![NPM version][npm-image]][npm-url]
+[![Build status][ci-image]][ci-url]
+[![Dependency Status][dependencies-image]][dependencies-url]
+
+This component contains Sass mixins and CSS for positioning elements off the screen. LESS mixins are still include for backward compatibility, however these will likely be removed in a future version.
+
+Off-screen elements are valuable from an accessibility perspective when you wish to have elements which are only visible to screen readers. For more information, read [WebAIM's article on Invisible Content](http://webaim.org/techniques/css/invisiblecontent/).
+
+For further information on this component and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
+
+#### Coding styles
+See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on VUI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
+
+[npm-url]: https://npmjs.org/package/vui-offscreen
+[npm-image]: https://img.shields.io/npm/v/vui-offscreen.svg
+[ci-image]: https://travis-ci.org/Brightspace/valence-ui-offscreen.svg?branch=master
+[ci-url]: https://travis-ci.org/Brightspace/valence-ui-offscreen
+[dependencies-url]: https://david-dm.org/brightspace/valence-ui-offscreen
+[dependencies-image]: https://img.shields.io/david/Brightspace/valence-ui-offscreen.svg
diff --git a/package.json b/package.json
index 63d6fa4..6030cef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vui-offscreen",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Mixins and CSS for positioning elements offscreen",
   "scripts": {
     "clean": "rimraf *.css",
@@ -9,7 +9,12 @@
     "build:less:css": "lessc offscreen.css.less > offscreen-less.css",
     "postbuild:less:css": "csslint offscreen-less.css",
     "build:sass:css": "node-sass --output-style expanded offscreen.css.scss offscreen.css",
-    "postbuild:sass:css": "csslint offscreen.css"
+    "postbuild:sass:css": "csslint offscreen.css",
+    "pretest": "npm run build",
+    "test": "npm run diff:assert",
+    "prediff:assert": "npm run diff:create",
+    "diff:assert": "assertnodiff --file1 ./test/diff/less-scss-diff --file2 ./test/diff/less-scss-diff-new",
+    "diff:create": "createpatch --file1 offscreen-less.css --file2 offscreen.css -o ./test/diff/less-scss-diff-new"
   },
   "repository": {
     "type": "git",
@@ -28,6 +33,7 @@
   "homepage": "https://github.com/Brightspace/valence-ui-offscreen",
   "devDependencies": {
     "csslint": "^0.10.0",
+    "diff-cli": "git://github.com/Brightspace/diff-cli.git#v0.0.1",
     "less": "^2.5.1",
     "node-sass": "^3.1.1",
     "rimraf": "^2.3.4"
diff --git a/test/diff/less-scss-diff b/test/diff/less-scss-diff
new file mode 100644
index 0000000..4e50981
--- /dev/null
+++ b/test/diff/less-scss-diff
@@ -0,0 +1,13 @@
+===================================================================
+--- offscreen-less.css
++++ offscreen.css
+@@ -4,8 +4,9 @@
+   overflow: hidden;
+   width: 1px;
+   height: 1px;
+ }
++
+ [dir="rtl"] .vui-offscreen {
+   left: auto;
+   right: -10000px;
+ }