diff --git a/.gitignore b/.gitignore index a6e2eb6..4b34741 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ *.gem .sass-cache Gemfile.lock + +# npm files: +node_modules/ +*.log diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..4fe0ebc --- /dev/null +++ b/.npmignore @@ -0,0 +1,23 @@ +# This file pretty much copies `.gitignore`, +# but has stricter rules, which are defined in the end. +*.gem +.sass-cache +Gemfile.lock + +# npm files: +node_modules/ +*.log + +# These files are `.npmignore` specific, +# these rules remove unwanted files from `npm` package. +lib/ +tests/ +Rakefile +Gemfile +bower.json +*.yml +*.json +*.gemspec + +# package.json is required: +!package.json diff --git a/CHANGELOG.md b/CHANGELOG.md index b72de82..9dfcc84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 3.0.6 +* Support for Eyeglass. + ## 3.0.5 * Support for LibSass 3.2 diff --git a/README.md b/README.md index 596baff..ac17b3e 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,18 @@ A simple way for DRYier, faster and cleaner Modernizr tests in Sass. Requires Ruby Sass 3.4 or LibSass 3.2 -There are 3 ways of installing the Modernizr mixin: +There are 4 ways of installing the Modernizr mixin: ### Download Download [_modernizr.scss](/stylesheets/_modernizr.scss) and place it in your Sass directory. +### Npm + + npm install --save-dev modernizr-mixin + +Also, `modenirz-mixin` is ready to be used with [Eyeglass](https://github.com/sass-eyeglass/eyeglass) module. + ### Bower Run the following command: @@ -29,6 +35,10 @@ Import it into your main stylesheet: @import 'modernizr'; +Or if you are using `Eyeglass`: + + @import 'modernizr-mixin/_modernizr'; + The Modernizr helper includes two mixins: `yep` and `nope`. Simply pass a comma-separeted list (`argList`) of features as argument and the rules you need to print. ### yep diff --git a/bower.json b/bower.json index cae1d5e..bd35950 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "modernizr-mixin", - "version": "3.0.5", + "version": "3.0.6", "main": "modernizr.scss", "author": "Daniel Guillan", "ignore": ["*","!stylesheets/_modernizr.scss"] diff --git a/eyeglass-exports.js b/eyeglass-exports.js new file mode 100644 index 0000000..e46e11d --- /dev/null +++ b/eyeglass-exports.js @@ -0,0 +1,7 @@ +var path = require('path'); + +module.exports = function(eyeglass, sass) { + return { + sassDir: path.join(__dirname, 'stylesheets') + }; +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..4b1b751 --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "modernizr-mixin", + "version": "3.0.6", + "description": "A simple way for DRYier, faster and cleaner Modernizr tests in Sass.", + "license": "MIT", + "main": "eyeglass-exports.js", + "eyeglass": { + "exports": "eyeglass-exports.js" + }, + "repository": { + "type": "git", + "url": "https://github.com/danielguillan/modernizr-mixin" + }, + "bugs": { + "url": "https://github.com/danielguillan/modernizr-mixin/issues" + }, + "author": "Daniel Guillan", + "files": [ + "stylesheets/_modernizr.scss", + "eyeglass-exports.js" + ], + "keywords": [ + "modernizr", + "mixin", + "compass", + "eyeglass-module", + "sass", + "scss" + ], + "scripts": { + "test": "mocha tests" + }, + "dependencies": { + "eyeglass": "^0.2.0", + "node-sass": "^3.1.2" + }, + "devDependencies": { + "mocha": "^2.2.5" + }, + "private": false +} diff --git a/tests/eyeglass/control.css b/tests/eyeglass/control.css new file mode 100644 index 0000000..56fea2d --- /dev/null +++ b/tests/eyeglass/control.css @@ -0,0 +1,9 @@ +.my-selector .translate3d.opacity .my-selector { + transform: translate3d(0, 100px, 0); + opacity: 0; +} + +.my-selector .no-js .my-selector, .my-selector .no-translate3d .my-selector, .my-selector .no-opacity .my-selector { + top: 100px; + display: none; +} diff --git a/tests/eyeglass/test.scss b/tests/eyeglass/test.scss new file mode 100644 index 0000000..ff86c64 --- /dev/null +++ b/tests/eyeglass/test.scss @@ -0,0 +1,12 @@ +@import "modernizr-mixin/_modernizr"; + +.my-selector { + @include yep(translate3d, opacity) { + transform: translate3d(0, 100px, 0); + opacity: 0; + } + @include nope(translate3d, opacity) { + top: 100px; + display: none; + } +} diff --git a/tests/test_eyeglass.js b/tests/test_eyeglass.js new file mode 100644 index 0000000..de0988c --- /dev/null +++ b/tests/test_eyeglass.js @@ -0,0 +1,42 @@ +"use strict"; + +var Eyeglass = require("eyeglass"); +var sass = require("node-sass"); +var path = require("path"); +var assert = require("assert"); +var fs = require("fs"); // reads static files + +var Tester = function() { + this.compile = function(options, cb) { + // Eyeglass creates a wrapper around basic options, + // use ['options'] hack to make it work: + sass.render(new Eyeglass(options)['options'], cb); + }; + + this.assertCompiles = function(options, expectedOutput, done) { + this.compile(options, function(err, result) { + assert(!err, err && err.message); // done without errors. + assert.equal(expectedOutput, result.css.toString()); + done(); + }); + }; +}; + +describe("Eyeglass module testing", function() { + + var rawScss; + var controlCss; + before(function() { + var dir = path.join(__dirname, "eyeglass"); + rawScss = fs.readFileSync(path.join(dir, "test.scss"), 'utf8'); + controlCss = fs.readFileSync(path.join(dir, "control.css"), 'utf8'); + }); + + it("should compile a sass file", function(done) { + var tester = new Tester(); + // `outputStyle` could be: nested, expanded, compact, compressed + // controlCss has "expanded" style. + var options = { data: rawScss, outputStyle: "expanded" }; + tester.assertCompiles(options, controlCss, done); + }); +});