Merge pull request #4 from Brightspace/dbatiste/add-css-d

Adding diff the build to assert that less and scss generated css are …

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
+test/output
+test/diff/less-scss-diff-new
 offscreen.css
 offscreen-less.css

.npmignore

@@ -6,6 +6,7 @@
 .csslintrc
 node_modules
 karma.conf.js
+test
 offscreen.css.less
 offscreen.css.scss
 offscreen-less.css

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

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"

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;
+ }