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" } }