From 5da95730221bb2bbd5dac74e0a38849fc888dab7 Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Fri, 29 May 2015 14:21:14 -0400
Subject: [PATCH] Sassifying. Adding scss mixins for offscreen.  Moving all the
 gulpiness to npm scripts and eliminating dependency on vui-helpers.

---
 .csslintrc         |  4 +---
 .gitignore         |  5 +++--
 .npmignore         | 19 +++++++++++--------
 gulpfile.js        | 26 --------------------------
 offscreen.css.scss |  5 +++++
 offscreen.scss     | 17 +++++++++++++++++
 package.json       | 20 +++++++++++++-------
 7 files changed, 50 insertions(+), 46 deletions(-)
 delete mode 100644 gulpfile.js
 create mode 100644 offscreen.css.scss
 create mode 100644 offscreen.scss

diff --git a/.csslintrc b/.csslintrc
index 252e453..4a80050 100644
--- a/.csslintrc
+++ b/.csslintrc
@@ -1,3 +1 @@
-{
-	"important": false
-}
+--ignore=important
diff --git a/.gitignore b/.gitignore
index 519d91d..6cab495 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
-node_modules/
-offscreen.css
+node_modules/
+offscreen.css
+offscreen-less.css
diff --git a/.npmignore b/.npmignore
index ca79895..0bcf546 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,8 +1,11 @@
-.csslintrc
-.editorconfig
-.gitignore
-.npmignore
-.travis.yml
-node_modules
-gulpfile.js
-offscreen.css.less
+.editorconfig
+.gitattributes
+.gitignore
+.npmignore
+.travis.yml
+.csslintrc
+node_modules
+karma.conf.js
+offscreen.css.less
+offscreen.css.scss
+offscreen-less.css
diff --git a/gulpfile.js b/gulpfile.js
deleted file mode 100644
index eea8be8..0000000
--- a/gulpfile.js
+++ /dev/null
@@ -1,26 +0,0 @@
-var del = require('del'),
-	gulp = require('gulp'),
-	jshint = require('gulp-jshint'),
-	vui = require('vui-helpers');
-
-gulp.task( 'clean', function( cb ) {
-	del( [ 'offscreen.css' ], cb );
-} );
-
-gulp.task( 'css', function () {
-	return vui.makeCss(
-		'offscreen.css.less',
-		'offscreen.css',
-		{ 'lintOpts' : '.csslintrc' }
-	);
-} );
-
-gulp.task( 'jshint', function() {
-	return gulp.src( ['gulpfile.js'] )
-		.pipe( jshint() )
-		.pipe( jshint.reporter('default') );
-} );
-
-gulp.task( 'default', [ 'clean' ], function() {
-	gulp.start( 'css', 'jshint' );
-} );
diff --git a/offscreen.css.scss b/offscreen.css.scss
new file mode 100644
index 0000000..70be3f2
--- /dev/null
+++ b/offscreen.css.scss
@@ -0,0 +1,5 @@
+@import 'offscreen';
+
+.vui-offscreen {
+	@include vui-offscreen;
+}
diff --git a/offscreen.scss b/offscreen.scss
new file mode 100644
index 0000000..597a15b
--- /dev/null
+++ b/offscreen.scss
@@ -0,0 +1,17 @@
+
+@mixin vui-offscreen() {
+
+	$offset: -10000px;
+
+	position: absolute !important;
+	left: $offset;
+	overflow: hidden;
+	width: 1px;
+	height: 1px;
+
+	[dir="rtl"] & {
+		left: auto;
+		right: $offset;
+	}
+
+}
diff --git a/package.json b/package.json
index ae17496..243a5ff 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,15 @@
 {
   "name": "vui-offscreen",
-  "version": "0.0.2",
-  "description": "LESS mixin and CSS for positioning elements offscreen",
+  "version": "0.1.0",
+  "description": "Mixins and CSS for positioning elements offscreen",
   "scripts": {
-    "test": "gulp"
+    "clean": "rimraf offscreen.css && rimraf offscreen-less.css",
+    "lint:css": "csslint offscreen.css",
+    "prebuild": "npm run clean",
+    "build:less": "lessc offscreen.css.less > offscreen-less.css",
+    "build:sass": "node-sass --output-style expanded offscreen.css.scss offscreen.css",
+    "build": "npm run build:sass && npm run build:less",
+    "postbuild": "npm run lint:css"
   },
   "repository": {
     "type": "git",
@@ -21,9 +27,9 @@
   },
   "homepage": "https://github.com/Brightspace/valence-ui-offscreen",
   "devDependencies": {
-    "del": "^0.1.3",
-    "gulp": "^3.8.8",
-    "gulp-jshint": "^1.8.5",
-    "vui-helpers": "^0.3.0"
+    "csslint": "^0.10.0",
+    "less": "^2.5.1",
+    "node-sass": "^3.1.1",
+    "rimraf": "^2.3.4"
   }
 }