@curiousmedia/breakpoint 1.4.0 → 2.0.1

package/src/_breakpoint.import.scss

@@ -0,0 +1,175 @@
+$breakpoints: () !default;
+
+@function breakpointPresets($queries) {
+  $output: ();
+
+  @each $query in $queries {
+    $output: append($output, breakpointPreset($query))
+  }
+
+  @return $output;
+}
+
+@function breakpointPreset($query) {
+  $preset: map-get($breakpoints, $query);
+
+  @if ($preset == null) {
+    @return $query;
+  } @else {
+    @return $preset;
+  }
+}
+
+@function breakpointParses($queries) {
+  $output: ();
+
+  @each $query in $queries {
+    $output: append($output, breakpointParse($query))
+  }
+
+  @return $output;
+}
+
+@function breakpointParse($query) {
+    $ruleIndex: str-index($query, ' ');
+
+    @if ($ruleIndex == null) {
+        @return(
+            rule: $query,
+            condition: null
+        );
+    } @else {
+        @return (
+            rule: str-slice($query, 1, $ruleIndex - 1),
+            condition: str-slice($query, $ruleIndex + 1)
+        );
+    }
+}
+
+// Source: https://kittygiraudel.com/2013/08/08/advanced-sass-list-functions/
+// @author Kitty Giraudel
+@function breakpointRemoveNth($list, $index) {
+  $result: null;
+
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  } @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  } @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  } @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);
+
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
+
+  @return $result;
+}
+
+@function breakpointMatchingRules($queries) {
+    $rule: (map-get(nth($queries, 1), 'rule'));
+
+    @each $query in $queries {
+        @if($rule != map-get($query, 'rule')) {
+            @return false;
+        }
+    }
+
+    @return true;
+}
+
+@function breakpointJoinQueries($queries) {
+    $condition: "";
+    $rule: null;
+
+    @for $i from 1 through length($queries) {
+        $query: nth($queries, $i);
+
+        @if($i == 1) {
+            $rule: map-get($query, 'rule');
+        }
+
+        @if(map-get($query, 'condition') != null) {
+            @if($i > 1) {
+                $condition: $condition + ", ";
+            }
+
+            $condition: $condition + map-get($query, "condition");
+        }
+    }
+
+    @return (rule: $rule, condition: $condition);
+}
+
+@mixin breakpointBuild($query) {
+    $rule: map-get($query, 'rule');
+    $condition: map-get($query, 'condition');
+
+    @if($rule == '@media') {
+        @media #{$condition} {
+            @content;
+        }
+    } @else if ($rule == '@supports') {
+        @supports #{$condition} {
+            @content;
+        }
+    } @else if ($rule == '@page') {
+        @if($condition == null) {
+            @page {
+                @content;
+            }
+        } @else {
+            @page #{$condition} {
+                @content;
+            }
+        }
+    } @else {
+        @error "Unknown rule.";
+    }
+}
+
+@mixin breakpointAny($queries...) {
+  $queries: breakpointParses(breakpointPresets($queries));
+
+  @if(breakpointMatchingRules($queries)) {
+    @include breakpointBuild(breakpointJoinQueries($queries)) {
+        @content;
+      }
+  } @else {
+    @each $query in $queries {
+      @include breakpointBuild($query) {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin breakpointAll($queries...) {
+  @if (length($queries) >= 1) {
+    $query: nth($queries, 1);
+    $queries: breakpointRemoveNth($queries, 1);
+
+    $query: breakpointParse(breakpointPreset($query));
+
+    @include breakpointAll($queries...) {
+      @include breakpointBuild($query) {
+         @content;
+      }
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin breakpointProp($property, $values) {
+	@each $bp, $value in $values {
+    @include breakpointAny($bp) {
+      #{$property}: $value;
+    }
+  }
+}

package/src/_breakpoint.scss

@@ -1,81 +1,175 @@
-// Breakpoint default
-$breakpoint: () !default;
-
-// Breakpoint any
-// @param {List} ids - List of breakpoints
-// @content - Styles will be applied to breakpoint
-@mixin breakpointAny($ids...) {
-	@include _breakpoint($ids, ', ', false) {
-		@content;
-	}
+$breakpoints: () !default;
+
+@function presets($queries) {
+  $output: ();
+
+  @each $query in $queries {
+    $output: append($output, preset($query))
+  }
+
+  @return $output;
+}
+
+@function preset($query) {
+  $preset: map-get($breakpoints, $query);
+
+  @if ($preset == null) {
+    @return $query;
+  } @else {
+    @return $preset;
+  }
+}
+
+@function parses($queries) {
+  $output: ();
+
+  @each $query in $queries {
+    $output: append($output, parse($query))
+  }
+
+  @return $output;
+}
+
+@function parse($query) {
+    $ruleIndex: str-index($query, ' ');
+
+    @if ($ruleIndex == null) {
+        @return(
+            rule: $query,
+            condition: null
+        );
+    } @else {
+        @return (
+            rule: str-slice($query, 1, $ruleIndex - 1),
+            condition: str-slice($query, $ruleIndex + 1)
+        );
+    }
+}
+
+// Source: https://kittygiraudel.com/2013/08/08/advanced-sass-list-functions/
+// @author Kitty Giraudel
+@function removeNth($list, $index) {
+  $result: null;
+
+  @if type-of($index) != number {
+    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+  } @else if $index == 0 {
+    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+  } @else if abs($index) > length($list) {
+    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+  } @else {
+    $result: ();
+    $index: if($index < 0, length($list) + $index + 1, $index);
+
+    @for $i from 1 through length($list) {
+      @if $i != $index {
+        $result: append($result, nth($list, $i));
+      }
+    }
+  }
+
+  @return $result;
 }
 
-// Breakpoint all
-// @param {List} ids - List of breakpoints
-// @content - Styles will be applied to breakpoint
-@mixin breakpointAll($ids...) {
-	@include _breakpoint($ids, ' and ', true) {
-		@content;
-	}
+@function matchingRules($queries) {
+    $rule: (map-get(nth($queries, 1), 'rule'));
+
+    @each $query in $queries {
+        @if($rule != map-get($query, 'rule')) {
+            @return false;
+        }
+    }
+
+    @return true;
 }
 
-// Breakpoint prop
-// @param {String} property - Targeted CSS property
-// @param {List|Map} values - List of values or map of breakpoint IDs with values.
-@mixin breakpointProp($property, $values) {
-	$i: 1;
-
-	@if(type-of($values) == 'list') {
-		@each $value in $values {
-			$ids: map-keys($breakpoints);
-			$bp: nth($ids, $i);
-			// content: "#{$bp}";
-			@include breakpointAny($bp) {
-				#{$property}: nth($values, $i);
-			}
-
-			$i: $i + 1;
-		}
-	} @else if(type-of($values) == 'map') {
-		@each $bp, $value in $values {
-			@include breakpointAny($bp) {
-				#{$property}: $value;
-			}
-		}
-	}
+@function joinQueries($queries) {
+    $condition: "";
+    $rule: null;
+
+    @for $i from 1 through length($queries) {
+        $query: nth($queries, $i);
+
+        @if($i == 1) {
+            $rule: map-get($query, 'rule');
+        }
+
+        @if(map-get($query, 'condition') != null) {
+            @if($i > 1) {
+                $condition: $condition + ", ";
+            }
+
+            $condition: $condition + map-get($query, "condition");
+        }
+    }
+
+    @return (rule: $rule, condition: $condition);
 }
 
-// _Breakpoint
-// @param {List} ids - List of breakpoints
-// @param {String} glue - Glue to join together multiple breakpoints
-// @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
-// @content - Styles will be applied to breakpoint
-@mixin _breakpoint($ids, $glue, $stripAppendedMediaTypes) {
-	$output: "";
-	$count: 0;
+@mixin build($query) {
+    $rule: map-get($query, 'rule');
+    $condition: map-get($query, 'condition');
 
-	@each $id in $ids {
-		@if $count > 0 {
-			$output: $output + $glue;
-		}
+    @if($rule == '@media') {
+        @media #{$condition} {
+            @content;
+        }
+    } @else if ($rule == '@supports') {
+        @supports #{$condition} {
+            @content;
+        }
+    } @else if ($rule == '@page') {
+        @if($condition == null) {
+            @page {
+                @content;
+            }
+        } @else {
+            @page #{$condition} {
+                @content;
+            }
+        }
+    } @else {
+        @error "Unknown rule.";
+    }
+}
 
-		$query: map-get($breakpoints, $id);
+@mixin any($queries...) {
+  $queries: parses(presets($queries));
 
-		@if $query == null {
-			$query: $id
-		}
+  @if(matchingRules($queries)) {
+    @include build(joinQueries($queries)) {
+        @content;
+      }
+  } @else {
+    @each $query in $queries {
+      @include build($query) {
+        @content;
+      }
+    }
+  }
+}
 
-		@if $count > 0 and $stripAppendedMediaTypes {
-			$index: str-index($query, '(');
-			$query: str-slice($query, $index);
-		}
+@mixin all($queries...) {
+  @if (length($queries) >= 1) {
+    $query: nth($queries, 1);
+    $queries: removeNth($queries, 1);
 
+    $query: parse(preset($query));
 
-		$output: $output + $query;
-		$count: $count + 1;
-	}
+    @include all($queries...) {
+      @include build($query) {
+         @content;
+      }
+    }
+  } @else {
+    @content;
+  }
+}
 
-	@media #{$output} {
-		@content;
-	}
+@mixin prop($property, $values) {
+	@each $bp, $value in $values {
+    @include any($bp) {
+      #{$property}: $value;
+    }
+  }
 }

package/src/breakpoint.js

@@ -1,122 +1,85 @@
-module.exports = class Breakpoint {
-	/**
-	 * @constructor
-	 * @param {Array.<{id: String, query: String}>} breakpoints
-	 */
-	constructor(breakpoints) {
-		this.breakpoints = breakpoints;
-	}
-
-	/**
-	 * Any
-	 * @param {...String} ids
-	 * @return {Boolean|Null}
-	 */
-	any(...ids) {
-		let result;
-
-		if(Array.isArray(ids)) {
-			result = this._queryMultiple(ids);
-			return (result.indexOf(true) > -1);
-		} else if(typeof ids === 'string') {
-			return !!this._findQuery(ids);
-		} else {
-			Breakpoint._warn('Unexpected "ids" format. Expecting a breakpoint id or array of ids.');
-			return null;
-		}
-	}
-
-	/**
-	 * All
-	 * @param {...String} ids
-	 * @return {Boolean|Null}
-	 */
-	all(...ids) {
-		let result;
-
-		if(Array.isArray(ids)) {
-			result = this._queryMultiple(ids, true);
-
-			return (result.length && result.indexOf(false) === -1);
-		} else if(typeof ids === 'string') {
-			return !!this._findQuery(ids);
-		} else {
-			Breakpoint._warn('Unexpected "ids" format. Expecting a breakpoint id or array of ids.');
-			return null;
-		}
-	}
-
-	/**
-	 * Match multiple
-	 * @param {Array.<String>|String} ids
-	 * @param {Boolean} [singleQuery=false] singleQuery
-	 * @return {Array}
-	 */
-	_queryMultiple(ids, singleQuery=false) {
-		let results = [];
-		let queryString = "";
-
-		//Loop through array
-		for(let i=0, len = ids.length; i<len; i++) {
-			let query = this._findQuery(ids[i]);
-
-			if(singleQuery) {
-				if(i>0) {
-					query = query.replace(/^[^(]+/, '');
-				}
-
-				if(query) {
-					results.push(query);
-				}
-			} else {
-				let result = Breakpoint.query(query);
-
-				if(typeof result === 'boolean') {
-					results.push(result);
-				}
-			}
-		}
-
-		if(singleQuery) {
-			results = [Breakpoint.query(results.join(' and '))];
-		}
-
-		return results;
-	}
-
-	/**
-	 * Match
-	 * @param {Array.<String>|String} id
-	 * @return {String}
-	 */
-	_findQuery(id) {
-		let breakpoint;
-
-		if(typeof this.breakpoints[id] === 'string') {
-			return this.breakpoints[id];
-		} else {
-			return id;
-		}
-	}
-
-	/**
-	 * Warn
-	 * @param {String} message
-	 */
-	static _warn(message) {
-		if(window.console === Object(window.console) && typeof window.console.warn === 'function') {
-			window.console.warn(message);
-		}
-	}
-
-	/**
-	 * Query
-	 * @param query
-	 * @return {Boolean}
-	 */
-	static query(query) {
-		if(typeof query === 'string') {
-			return window.matchMedia(query).matches;
-		}
-	}
+export default class Breakpoint {
+  constructor(breakpoints) {
+    this.breakpoints = breakpoints;
+  }
+  
+  presets(queries) {
+    return queries.map((query) => {
+      return this.preset(query);
+    });
+  }
+  
+  preset(query) {
+    if(typeof this.breakpoints[query] === 'string') {
+      return this.breakpoints[query];
+    } else {
+      return query;
+    }
+  }
+  
+  parses(queries) {
+    return queries.map((query) => {
+      return this.parse(query);
+    });
+  }
+  
+  parse(query) {
+    let ruleIndex = query.search(' ');
+    
+    if(ruleIndex < 0) {
+      return {
+        rule: query,
+        condition: null
+      }
+    } else {
+      return {
+        rule: query.substring(0, ruleIndex),
+        condition: query.substring(ruleIndex + 1)
+      };
+    }
+  }
+
+  tests(queries) {
+    return queries.map((query) => {
+      return this.test(query);
+    })
+  }
+
+  test(query) {
+    switch(query.rule) {
+      case "@media":
+        if(window.matchMedia) {
+          return window.matchMedia(query.condition).matches
+        } else {
+          return false;
+        }
+        break;
+      case "@page":
+        // Javascript is never run on printed documents; @page always returns true
+        return true;
+        break;
+      case "@supports":
+        if(window.CSS && window.CSS.supports) {
+          return window.CSS.supports(query.condition);
+        } else {
+          return false;
+        }
+        break;
+      default:
+        throw new Error('Unknown rule');
+        break;
+    }
+  }
+  
+  any(...queries) {
+    queries = this.parses(this.presets(queries));
+    
+    return (this.tests(queries).indexOf(true) >= 0);
+  }
+  
+  all(...queries) {
+    queries = this.parses(this.presets(queries));
+    
+    return !(this.tests(queries).indexOf(false) >= 0);
+  }
 }