├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── Gemfile ├── LICENSE ├── README.md ├── Rakefile ├── bower.json ├── eyeglass-exports.js ├── lib └── modernizr-mixin.rb ├── modernizr-mixin.gemspec ├── package.json ├── sache.json ├── stylesheets └── _modernizr.scss └── tests ├── .unit_tests.rb ├── config.rb ├── controls ├── 01-modernizr-single-supports.css ├── 02-modernizr-single-supports-false.css ├── 03-modernizr-multi-supports.css ├── 04-modernizr-multi-supports-false.css ├── 05-yep-single.css ├── 06-yep-multi.css ├── 07-nope-single.css ├── 08-nope-multi.css └── 09-modernizr-media-queries.css ├── eyeglass ├── control.css └── test.scss ├── test_eyeglass.js └── tests ├── 01-modernizr-single-supports.scss ├── 02-modernizr-single-supports-false.scss ├── 03-modernizr-multi-supports.scss ├── 04-modernizr-multi-supports-false.scss ├── 05-yep-single.scss ├── 06-yep-multi.scss ├── 07-nope-single.scss ├── 08-nope-multi.scss └── 09-modernizr-media-queries.scss /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | .sass-cache 3 | Gemfile.lock 4 | 5 | # npm files: 6 | node_modules/ 7 | *.log 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # This file pretty much copies `.gitignore`, 2 | # but has stricter rules, which are defined in the end. 3 | *.gem 4 | .sass-cache 5 | Gemfile.lock 6 | 7 | # npm files: 8 | node_modules/ 9 | *.log 10 | 11 | # These files are `.npmignore` specific, 12 | # these rules remove unwanted files from `npm` package. 13 | lib/ 14 | tests/ 15 | Rakefile 16 | Gemfile 17 | bower.json 18 | *.yml 19 | *.json 20 | *.gemspec 21 | 22 | # package.json is required: 23 | !package.json 24 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - "2.0.0" 4 | before_install: 5 | - "gem install sass" 6 | - "gem install compass" 7 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 3.0.7 4 | * Added warning for known bug in Libsass 3.2.3 / 3.2.4 that makes Modernizr mixin output incorrect selectors. Learn more at https://github.com/danielguillan/modernizr-mixin/issues/24 5 | 6 | ## 3.0.6 7 | * Support for Eyeglass. 8 | 9 | ## 3.0.5 10 | * Support for LibSass 3.2 11 | 12 | ## 3.0.4 13 | * Updated SassDoc comments to the new syntax prevents docs from being compiled into the output css. 14 | 15 | ## 3.0.3 16 | * Code quality 17 | 18 | ## 3.0.2 19 | * invalid US-ASCII character fix 20 | 21 | ## 3.0.1 22 | * Namespace the private _modernizr mixin 23 | 24 | ## 3.0.0 25 | 26 | * Fixed error when mixin is called twice with the same parameters outside and inside a media query. 27 | * Dropped support for Sass 3.3 28 | 29 | ## 2.0.0 30 | 31 | * Consistent params between Modernizr mixin and `yep` and `nope` aliases 32 | 33 | ## 1.0.0 34 | 35 | * Initial release 36 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gemspec 4 | 5 | group :test do 6 | gem 'rake' 7 | gem "diffy", "~> 3.0.1" 8 | gem "colorize", "~> 0.6.0" 9 | end 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Daniel Guillan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **NO LONGER MAINTAINED** 2 | 3 | ---- 4 | 5 | # Modernizr mixin [![Build Status](https://travis-ci.org/danielguillan/modernizr-mixin.svg?branch=master)](https://travis-ci.org/danielguillan/modernizr-mixin) [![Bower version](https://badge.fury.io/bo/modernizr-mixin.svg)](http://badge.fury.io/bo/modernizr-mixin) [![Gem Version](https://badge.fury.io/rb/modernizr-mixin.svg)](http://badge.fury.io/rb/modernizr-mixin) 6 | 7 | A simple way for DRYier, faster and cleaner Modernizr tests in Sass. 8 | 9 | ## Install 10 | 11 | Requires Ruby Sass 3.4 or LibSass 3.2 12 | 13 | **LIBSASS WARNING: There is a known bug in Libsass 3.2.3 through 3.2.5 that makes Modernizr mixin output incorrect selectors. The only workaround until the bug is patched in the next Libsass release is to stick to Libsass 3.2.2. More info: https://github.com/danielguillan/modernizr-mixin/issues/24** 14 | 15 | There are 4 ways of installing the Modernizr mixin: 16 | 17 | ### Download 18 | 19 | Download [_modernizr.scss](/stylesheets/_modernizr.scss) and place it in your Sass directory. 20 | 21 | ### Bower 22 | 23 | Run the following command: 24 | 25 | bower install --save-dev modernizr-mixin 26 | 27 | ### Compass extension 28 | 29 | 1. `gem install modernizr-mixin` 30 | 2. Add `require 'modernizr-mixin'` to your `config.rb` 31 | 32 | ### npm / Eyeglass module 33 | 34 | npm install --save-dev modernizr-mixin 35 | 36 | ## Usage 37 | 38 | Import it into your main stylesheet: 39 | 40 | @import 'modernizr'; 41 | 42 | Or if you are using `Eyeglass`: 43 | 44 | @import 'modernizr-mixin/_modernizr'; 45 | 46 | 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. 47 | 48 | ### yep 49 | 50 | Prints classes for supported features. 51 | 52 | @include yep($features...) { ... } 53 | 54 | ### nope 55 | 56 | Prints classes for unsupported features and unavailable Javascript. 57 | 58 | @include nope($features...) { ... } 59 | 60 | ### Example 61 | 62 | Sass input: 63 | 64 | ```scss 65 | .my-selector { 66 | @include yep(translate3d, opacity) { 67 | transform: translate3d(0, 100px, 0); 68 | opacity: 0; 69 | } 70 | @include nope(translate3d, opacity) { 71 | top: 100px; 72 | display: none; 73 | } 74 | } 75 | ``` 76 | 77 | CSS output: 78 | 79 | ```css 80 | .translate3d.opacity .my-selector { 81 | transform: translate3d(0, 100px, 0); 82 | opacity: 0; 83 | } 84 | .no-js .my-selector, 85 | .no-translate3d .my-selector, 86 | .no-opacity .my-selector { 87 | top: 100px; 88 | display: none; 89 | } 90 | ``` 91 | 92 | ## Credits 93 | 94 | Thanks [Kitty Giraudel](https://github.com/kittygiraudel) for the code review and tweaks. 95 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # Navigator | Copyright 2013 Team Sass | MIT License | https://github.com/Team-Sass/navigator 2 | 3 | task :default => [:test] 4 | 5 | task :test do 6 | require 'fileutils' 7 | 8 | Dir.chdir('tests') do 9 | output_dir = 'output' 10 | FileUtils.mkdir_p output_dir 11 | ruby '.unit_tests.rb' 12 | FileUtils.rm_rf output_dir 13 | end 14 | end 15 | 16 | desc 'Compile baseline CSS' 17 | task :compile do 18 | require 'compass' 19 | require 'compass/exec' 20 | 21 | Dir.chdir('tests') do 22 | Compass.add_configuration 'config.rb' 23 | Compass.configuration.project_path = Dir.pwd 24 | # Compile into baseline directory instead of test output directory 25 | Compass.configuration.css_dir = 'controls' 26 | Compass.compiler.clean! 27 | Compass.compiler.run 28 | end 29 | end 30 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modernizr-mixin", 3 | "version": "3.0.7", 4 | "main": "modernizr.scss", 5 | "author": "Daniel Guillan", 6 | "ignore": ["*","!stylesheets/_modernizr.scss"] 7 | } 8 | -------------------------------------------------------------------------------- /eyeglass-exports.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = function(eyeglass, sass) { 4 | return { 5 | sassDir: path.join(__dirname, 'stylesheets') 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /lib/modernizr-mixin.rb: -------------------------------------------------------------------------------- 1 | require 'compass' 2 | extension_path = File.expand_path(File.join(File.dirname(__FILE__), "..")) 3 | Compass::Frameworks.register('modernizr-mixin', :path => extension_path) 4 | 5 | module ModernizrMixin 6 | VERSION = "3.0.7" 7 | DATE = "2015-06-12" 8 | end 9 | -------------------------------------------------------------------------------- /modernizr-mixin.gemspec: -------------------------------------------------------------------------------- 1 | require './lib/modernizr-mixin' 2 | 3 | Gem::Specification.new do |s| 4 | # Release Specific Information 5 | s.version = ModernizrMixin::VERSION 6 | s.date = ModernizrMixin::DATE 7 | 8 | # Gem Details 9 | s.name = "modernizr-mixin" 10 | s.rubyforge_project = "modernizr-mixin" 11 | s.description = %q{A simple way for DRYier, faster and cleaner Modernizr tests in Sass.} 12 | s.summary = %q{Simple and comprehensive mixin for Modernizr tests in Sass} 13 | s.authors = ["Daniel Guillan"] 14 | s.email = ["daniel.guillan@gmail.com"] 15 | s.homepage = "https://github.com/danielguillan/modernizr-mixin" 16 | 17 | # LICENSE file 18 | s.licenses = ['MIT'] 19 | 20 | # README file 21 | s.files = ["README.md"] 22 | 23 | # CHANGELOG 24 | #s.files += ["CHANGELOG.md"] 25 | 26 | # Library Files 27 | s.files += Dir.glob("lib/**/*.*") 28 | 29 | # Sass Files 30 | s.files += Dir.glob("stylesheets/**/*.*") 31 | 32 | # Gem Bookkeeping 33 | s.required_rubygems_version = ">= 1.3.6" 34 | s.rubygems_version = %q{1.3.6} 35 | 36 | # Gems Dependencies 37 | s.add_dependency("sass", ["~> 3.4"]) 38 | s.add_dependency("compass", ["~> 1.0.0"]) 39 | end 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modernizr-mixin", 3 | "version": "3.0.7", 4 | "description": "A simple way for DRYier, faster and cleaner Modernizr tests in Sass.", 5 | "license": "MIT", 6 | "main": "eyeglass-exports.js", 7 | "eyeglass": { 8 | "exports": "eyeglass-exports.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/danielguillan/modernizr-mixin" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/danielguillan/modernizr-mixin/issues" 16 | }, 17 | "author": "Daniel Guillan", 18 | "files": [ 19 | "stylesheets/_modernizr.scss", 20 | "eyeglass-exports.js" 21 | ], 22 | "keywords": [ 23 | "modernizr", 24 | "mixin", 25 | "compass", 26 | "eyeglass-module", 27 | "sass", 28 | "scss" 29 | ], 30 | "scripts": { 31 | "test": "mocha tests" 32 | }, 33 | "dependencies": { 34 | "eyeglass": "^0.6.3", 35 | "node-sass": "^3.1.2" 36 | }, 37 | "devDependencies": { 38 | "mocha": "^2.2.5" 39 | }, 40 | "private": false 41 | } 42 | -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Modernizr mixin", 3 | "description": "A simple way for DRYier, faster and cleaner Modernizr tests in Sass.", 4 | "tags": ["modernizr", "mixin", "helper", "browser", "features", "compass", "javascript"] 5 | } 6 | -------------------------------------------------------------------------------- /stylesheets/_modernizr.scss: -------------------------------------------------------------------------------- 1 | // ----------------------------------------------------------------------------- 2 | // Modernizr mixin 3 | // ----------------------------------------------------------------------------- 4 | 5 | // ----------------------------------------------------------------------------- 6 | // Modernizr 7 | // ----------------------------------------------------------------------------- 8 | /// Prints classes for supported or unsupported features 9 | /// @access private 10 | /// @param {Bool} $supports - Whether to check for supported features or not 11 | /// @param {ArgList} $features - List of features 12 | 13 | @mixin _modernizr($supports, $features...) { 14 | 15 | // Use the 'no-' prefix if checking for unsuported features (e.g. `.no-translate3d`) 16 | $prefix: if($supports, '', 'no-'); 17 | 18 | // Features selector 19 | // a) create a string if checking for supported features. We'll concatenate class names later on (e.g. `.translate3d.opacity selector`) 20 | // b) create a list if checking for unsuported features. We'll append the class names later on (e.g. `.no-js selector, .no-translate3d selector`) 21 | $selector: if($supports, '', unquote('.no-js')); 22 | 23 | // Make sure the mixin has been called within a selector 24 | @if not & { 25 | @error 'Modernizr mixin should be called within a selector.'; 26 | } 27 | 28 | // Generate placeholder and selectors 29 | @each $feature in $features { 30 | 31 | // Making sure $feature is a string 32 | @if type-of($feature) != 'string' { 33 | 34 | @error '`#{$feature}` is not a string for `modernizr`.'; 35 | 36 | } @else { 37 | 38 | // Define the new selector string (e.g. `.translate3d` or `.no-translate3d`) 39 | $new-selector: #{'.' + $prefix + $feature}; 40 | 41 | // Append the new selector 42 | // a) to the string if yep (e.g. `.translate3d.opacity`) 43 | // b) to the list if nope (e.g. `.no-translate3d, .no-opacity`) 44 | $selector: if($supports, $selector + $new-selector, append($selector, $new-selector, 'comma')); 45 | 46 | } 47 | } 48 | 49 | // Generate selector and print content 50 | // @todo remove workaround once Libsass supports selector functions. 51 | 52 | // RubySass 3.4+ 53 | @if function-exists('selector-nest') { 54 | 55 | // Generate selector by nesting features classes and the parent selector 56 | $selector: selector-nest($selector, &); 57 | 58 | @at-root #{$selector} { 59 | @content; 60 | } 61 | 62 | } @else { 63 | 64 | // Libsass 3.2 workaround using Modernizr Mixin v1.0' placeholder technique 65 | // with a randomly generated placeholder name. 66 | $placeholder: '%' + rand + random(100000000); 67 | 68 | // Use placeholder technique generating a new placeholder each time. 69 | #{$placeholder} & { 70 | @content; 71 | } 72 | 73 | @at-root #{$selector} { 74 | @extend #{$placeholder}; 75 | } 76 | } 77 | 78 | } 79 | 80 | 81 | // ----------------------------------------------------------------------------- 82 | // Yep mixin 83 | // ----------------------------------------------------------------------------- 84 | /// Prints classes for supported features 85 | /// @access public 86 | /// @param {ArgList} $features - List of features 87 | /// @example scss 88 | /// .my-selector { 89 | /// @include yep(opacity, csstransforms) { 90 | /// // ... 91 | /// } 92 | /// } 93 | 94 | @mixin yep($features...) { 95 | @include _modernizr(true, $features...) { 96 | @content; 97 | } 98 | } 99 | 100 | 101 | // ----------------------------------------------------------------------------- 102 | // Nope mixin 103 | // ----------------------------------------------------------------------------- 104 | /// Prints classes for unsupported features and lack of JS 105 | /// @access public 106 | /// @param {ArgList} $features - List of features 107 | /// @example scss 108 | /// .my-selector { 109 | /// @include nope(opacity, csstransforms) { 110 | /// // ... 111 | /// } 112 | /// } 113 | 114 | @mixin nope($features...) { 115 | @include _modernizr(false, $features...) { 116 | @content; 117 | } 118 | } 119 | 120 | 121 | // ----------------------------------------------------------------------------- 122 | // Libsass error check 123 | // ----------------------------------------------------------------------------- 124 | /// There is a known bug in Libsass 3.2.3 / 3.2.4 that makes Modernizr mixin 125 | /// output incorrect selectors. This test throws an error for versions of Libsass 126 | /// that contain said bug. 127 | /// @todo Remove once the Libsass bug is patched 128 | 129 | %_modernizr-libsass-bug-test { 130 | $a: '%foo#{&}'; 131 | 132 | @at-root #{$a} { 133 | $b: #{&}; 134 | @if $b == '%_modernizr-libsass-bug-test %foo%_modernizr-libsass-bug-test' { 135 | @error '[Modernizr mixin]: There is a known bug in Libsass 3.2.3 / 3.2.4 that makes Modernizr mixin output incorrect selectors. If you want to keep using the Modernizr Mixin you need to stick to Libsass 3.2.2 until the bug is patched, hopefully in 3.2.5. Learn more at https://github.com/danielguillan/modernizr-mixin/issues/24'; 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /tests/.unit_tests.rb: -------------------------------------------------------------------------------- 1 | # Navigator | Copyright 2013 Team Sass | MIT License | https://github.com/Team-Sass/navigator 2 | 3 | require 'compass' 4 | require 'compass/exec' 5 | require 'test/unit' 6 | require 'diffy' 7 | require 'colorize' 8 | require 'pathname' 9 | 10 | class TestCompassOutput < Test::Unit::TestCase 11 | 12 | Compass.add_configuration 'config.rb' 13 | Compass.configuration.project_path = Dir.pwd 14 | 15 | # Remove all current Diff files 16 | Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) } 17 | 18 | Compass.compiler.sass_files.each do |sass_file| 19 | test_name = File.basename(sass_file, '.*') 20 | 21 | define_method "test_#{test_name}_compile " do 22 | # Compiled CSS file path 23 | test_file_pwd = Compass.compiler.corresponding_css_file(sass_file) 24 | 25 | # Relative path of compiled CSS file from Tests directory 26 | relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s 27 | 28 | # Control files path 29 | control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd 30 | 31 | # The base path of the sub folders, making the folders if needed 32 | base_pwd = relative_pwd.sub(File.basename(relative_pwd), '') 33 | FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}" 34 | 35 | # Compiles Sass file 36 | Compass.compiler.compile sass_file, test_file_pwd # Raises exception upon error 37 | 38 | begin 39 | # Assert that our test output matches our control output 40 | passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red 41 | ensure 42 | # If there is a failure, generate a diff of the files and put it with the compiled file 43 | if !passed 44 | test_file = File.open(test_file_pwd).read; 45 | control_file = File.open(control_file_pwd).read; 46 | diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff" 47 | diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true) 48 | 49 | File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) } 50 | 51 | puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black) 52 | end 53 | end 54 | end 55 | end 56 | end 57 | 58 | -------------------------------------------------------------------------------- /tests/config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # File system locations 4 | sass_dir = 'tests' 5 | css_dir = 'output' 6 | 7 | # If developing an extension, add your extension's stylesheets folder as an import path. 8 | # add_import_path '../stylesheets' 9 | 10 | # Set to true for easier debugging 11 | line_comments = false 12 | # preferred_syntax = :sass 13 | 14 | # CSS output style - :nested, :expanded, :compact, or :compressed 15 | output_style = :expanded 16 | 17 | # Determine whether Compass asset helper functions generate relative 18 | # or absolute paths 19 | relative_assets = true 20 | 21 | # Disabling source maps 22 | sourcemap = false 23 | 24 | # Learn more: 25 | # http://compass-style.org/docs/tutorials/configuration-reference/ 26 | -------------------------------------------------------------------------------- /tests/controls/01-modernizr-single-supports.css: -------------------------------------------------------------------------------- 1 | .opacity .modernizr-single-supports { 2 | test: ok; 3 | } 4 | 5 | .opacity .modernizr-single-supports .modernizr-single-supports2 { 6 | test: ok; 7 | } 8 | 9 | .opacity .modernizr-single-supports, .opacity .modernizr-single-supports2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/02-modernizr-single-supports-false.css: -------------------------------------------------------------------------------- 1 | .no-js .modernizr-single-supports-false, .no-opacity .modernizr-single-supports-false { 2 | test: ok; 3 | } 4 | 5 | .no-js .modernizr-single-supports-false .modernizr-single-supports-false2, .no-opacity .modernizr-single-supports-false .modernizr-single-supports-false2 { 6 | test: ok; 7 | } 8 | 9 | .no-js .modernizr-single-supports-false, .no-js .modernizr-single-supports-false2, .no-opacity .modernizr-single-supports-false, .no-opacity .modernizr-single-supports-false2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/03-modernizr-multi-supports.css: -------------------------------------------------------------------------------- 1 | .opacity.csstransforms .modernizr-multi-supports { 2 | test: ok; 3 | } 4 | 5 | .opacity.csstransforms .modernizr-multi-supports .modernizr-multi-supports2 { 6 | test: ok; 7 | } 8 | 9 | .opacity.csstransforms .modernizr-multi-supports, .opacity.csstransforms .modernizr-multi-supports2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/04-modernizr-multi-supports-false.css: -------------------------------------------------------------------------------- 1 | .no-js .modernizr-multi-supports-false, .no-opacity .modernizr-multi-supports-false, .no-csstransforms .modernizr-multi-supports-false { 2 | test: ok; 3 | } 4 | 5 | .no-js .modernizr-multi-supports-false .modernizr-multi-supports-false2, .no-opacity .modernizr-multi-supports-false .modernizr-multi-supports-false2, .no-csstransforms .modernizr-multi-supports-false .modernizr-multi-supports-false2 { 6 | test: ok; 7 | } 8 | 9 | .no-js .modernizr-multi-supports-false, .no-js .modernizr-multi-supports-false2, .no-opacity .modernizr-multi-supports-false, .no-opacity .modernizr-multi-supports-false2, .no-csstransforms .modernizr-multi-supports-false, .no-csstransforms .modernizr-multi-supports-false2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/05-yep-single.css: -------------------------------------------------------------------------------- 1 | .opacity .yep-single { 2 | test: ok; 3 | } 4 | 5 | .opacity .yep-single .yep-single2 { 6 | test: ok; 7 | } 8 | 9 | .opacity .yep-single, .opacity .yep-single2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/06-yep-multi.css: -------------------------------------------------------------------------------- 1 | .opacity.csstransforms .yep-multi { 2 | test: ok; 3 | } 4 | 5 | .opacity.csstransforms .yep-multi .yep-multi2 { 6 | test: ok; 7 | } 8 | 9 | .opacity.csstransforms .yep-multi, .opacity.csstransforms .yep-multi2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/07-nope-single.css: -------------------------------------------------------------------------------- 1 | .no-js .nope-single, .no-opacity .nope-single { 2 | test: ok; 3 | } 4 | 5 | .no-js .nope-single .nope-single2, .no-opacity .nope-single .nope-single2 { 6 | test: ok; 7 | } 8 | 9 | .no-js .nope-single, .no-js .nope-single2, .no-opacity .nope-single, .no-opacity .nope-single2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/08-nope-multi.css: -------------------------------------------------------------------------------- 1 | .no-js .nope-multi, .no-opacity .nope-multi, .no-csstransforms .nope-multi { 2 | test: ok; 3 | } 4 | 5 | .no-js .nope-multi .nope-multi2, .no-opacity .nope-multi .nope-multi2, .no-csstransforms .nope-multi .nope-multi2 { 6 | test: ok; 7 | } 8 | 9 | .no-js .nope-multi, .no-js .nope-multi2, .no-opacity .nope-multi, .no-opacity .nope-multi2, .no-csstransforms .nope-multi, .no-csstransforms .nope-multi2 { 10 | test: ok; 11 | } 12 | -------------------------------------------------------------------------------- /tests/controls/09-modernizr-media-queries.css: -------------------------------------------------------------------------------- 1 | .opacity .modernizr-single-supports { 2 | test: ok; 3 | } 4 | 5 | @media screen and (min-width: 600px) { 6 | .opacity .modernizr-single-supports { 7 | test: ok; 8 | } 9 | } 10 | @media screen and (min-width: 800px) { 11 | .opacity .modernizr-single-supports { 12 | test: ok; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /tests/eyeglass/control.css: -------------------------------------------------------------------------------- 1 | .my-selector .translate3d.opacity .my-selector { 2 | transform: translate3d(0, 100px, 0); 3 | opacity: 0; 4 | } 5 | 6 | .my-selector .no-js .my-selector, .my-selector .no-translate3d .my-selector, .my-selector .no-opacity .my-selector { 7 | top: 100px; 8 | display: none; 9 | } 10 | -------------------------------------------------------------------------------- /tests/eyeglass/test.scss: -------------------------------------------------------------------------------- 1 | @import "modernizr-mixin/_modernizr"; 2 | 3 | .my-selector { 4 | @include yep(translate3d, opacity) { 5 | transform: translate3d(0, 100px, 0); 6 | opacity: 0; 7 | } 8 | @include nope(translate3d, opacity) { 9 | top: 100px; 10 | display: none; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tests/test_eyeglass.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var Eyeglass = require("eyeglass"); 4 | var sass = require("node-sass"); 5 | var path = require("path"); 6 | var assert = require("assert"); 7 | var fs = require("fs"); // reads static files 8 | 9 | var Tester = function() { 10 | this.compile = function(options, cb) { 11 | // Eyeglass creates a wrapper around basic options, 12 | // use ['options'] hack to make it work: 13 | sass.render(new Eyeglass(options)['options'], cb); 14 | }; 15 | 16 | this.assertCompiles = function(options, expectedOutput, done) { 17 | this.compile(options, function(err, result) { 18 | assert(!err, err && err.message); // done without errors. 19 | assert.equal(expectedOutput, result.css.toString()); 20 | done(); 21 | }); 22 | }; 23 | }; 24 | 25 | describe("Eyeglass module testing", function() { 26 | 27 | var rawScss; 28 | var controlCss; 29 | before(function() { 30 | var dir = path.join(__dirname, "eyeglass"); 31 | rawScss = fs.readFileSync(path.join(dir, "test.scss"), 'utf8'); 32 | controlCss = fs.readFileSync(path.join(dir, "control.css"), 'utf8'); 33 | }); 34 | 35 | it("should compile a sass file", function(done) { 36 | var tester = new Tester(); 37 | // `outputStyle` could be: nested, expanded, compact, compressed 38 | // controlCss has "expanded" style. 39 | var options = { data: rawScss, outputStyle: "expanded" }; 40 | tester.assertCompiles(options, controlCss, done); 41 | }); 42 | }); 43 | -------------------------------------------------------------------------------- /tests/tests/01-modernizr-single-supports.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .modernizr-single-supports { 5 | @include _modernizr(true, opacity) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Nested 11 | .modernizr-single-supports { 12 | .modernizr-single-supports2 { 13 | @include _modernizr(true, opacity) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Multiple 20 | .modernizr-single-supports, 21 | .modernizr-single-supports2 { 22 | @include _modernizr(true, opacity) { 23 | test: ok; 24 | } 25 | } 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /tests/tests/02-modernizr-single-supports-false.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .modernizr-single-supports-false { 5 | @include _modernizr(false, opacity) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Nested 11 | .modernizr-single-supports-false { 12 | .modernizr-single-supports-false2 { 13 | @include _modernizr(false, opacity) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Multiple 20 | .modernizr-single-supports-false, 21 | .modernizr-single-supports-false2 { 22 | @include _modernizr(false, opacity) { 23 | test: ok; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /tests/tests/03-modernizr-multi-supports.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .modernizr-multi-supports { 5 | $features: (opacity, csstransforms); 6 | @include _modernizr(true, $features...) { 7 | test: ok; 8 | } 9 | } 10 | 11 | // Nested 12 | .modernizr-multi-supports { 13 | .modernizr-multi-supports2 { 14 | $features: (opacity, csstransforms); 15 | @include _modernizr(true, $features...) { 16 | test: ok; 17 | } 18 | } 19 | } 20 | 21 | // Simple 22 | .modernizr-multi-supports, 23 | .modernizr-multi-supports2 { 24 | $features: (opacity, csstransforms); 25 | @include _modernizr(true, $features...) { 26 | test: ok; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /tests/tests/04-modernizr-multi-supports-false.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .modernizr-multi-supports-false { 5 | $features: (opacity, csstransforms); 6 | @include _modernizr(false, $features...) { 7 | test: ok; 8 | } 9 | } 10 | 11 | // Nested 12 | .modernizr-multi-supports-false { 13 | .modernizr-multi-supports-false2 { 14 | $features: (opacity, csstransforms); 15 | @include _modernizr(false, $features...) { 16 | test: ok; 17 | } 18 | } 19 | } 20 | 21 | // Multiple 22 | .modernizr-multi-supports-false, 23 | .modernizr-multi-supports-false2 { 24 | $features: (opacity, csstransforms); 25 | @include _modernizr(false, $features...) { 26 | test: ok; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /tests/tests/05-yep-single.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .yep-single { 5 | @include yep(opacity) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Nested 11 | .yep-single { 12 | .yep-single2 { 13 | @include yep(opacity) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Multiple 20 | .yep-single, 21 | .yep-single2 { 22 | @include yep(opacity) { 23 | test: ok; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /tests/tests/06-yep-multi.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .yep-multi { 5 | @include yep(opacity, csstransforms) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Nested 11 | .yep-multi { 12 | .yep-multi2 { 13 | @include yep(opacity, csstransforms) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Multiple 20 | .yep-multi, 21 | .yep-multi2 { 22 | @include yep(opacity, csstransforms) { 23 | test: ok; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /tests/tests/07-nope-single.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .nope-single { 5 | @include nope(opacity) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Nested 11 | .nope-single { 12 | .nope-single2 { 13 | @include nope(opacity) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Multiple 20 | .nope-single, 21 | .nope-single2 { 22 | @include nope(opacity) { 23 | test: ok; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /tests/tests/08-nope-multi.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // Simple 4 | .nope-multi { 5 | @include nope(opacity, csstransforms) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Nested 11 | .nope-multi { 12 | .nope-multi2 { 13 | @include nope(opacity, csstransforms) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Multiple 20 | .nope-multi, 21 | .nope-multi2 { 22 | @include nope(opacity, csstransforms) { 23 | test: ok; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /tests/tests/09-modernizr-media-queries.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/_modernizr'; 2 | 3 | // No media query 4 | .modernizr-single-supports { 5 | @include _modernizr(true, opacity) { 6 | test: ok; 7 | } 8 | } 9 | 10 | // Inside 11 | @media screen and (min-width: 600px) { 12 | .modernizr-single-supports { 13 | @include _modernizr(true, opacity) { 14 | test: ok; 15 | } 16 | } 17 | } 18 | 19 | // Outside 20 | .modernizr-single-supports { 21 | @include _modernizr(true, opacity) { 22 | @media screen and (min-width: 800px) { 23 | test: ok; 24 | } 25 | } 26 | } 27 | --------------------------------------------------------------------------------