sass-mq 4.0.2 → 6.0.0

package/CHANGELOG.md

@@ -0,0 +1,45 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+<!-- ## Unreleased -->
+
+## v6.0.0 - 2022-01-10
+
+This is a major version bump that contains breaking changes. It adds support for the [new Sass module system](https://sass-lang.com/blog/the-module-system-is-launched), drops support for Eyeglass, and drops support for deprecated versions of Sass. No new features were added.
+
+See the updated [README](https://github.com/sass-mq/sass-mq/blob/main/README.md) for instructions on how to use this new version of Sass MQ.
+
+🙌 A huge thanks to [Rodrigo](https://github.com/area73) for his contribution on this major release.
+
+### Added
+
+- Support for dart-sass >= 1.35.1
+- Test suite using [Jest](https://jestjs.io/) and [True](https://www.oddbird.net/true/), a unit-testing framework designed specifically for the Sass language
+
+### Removed
+
+- Dropped tests for Sass engines other than dart-sass
+- Dropped support for [Eyeglass](https://github.com/linkedin/eyeglass)
+- Dropped deprecated var `$mq-base-font-size` (https://github.com/sass-mq/sass-mq/pull/123)
+- Dropped compatibility with browsers that don’t support media queries:
+  - Removed `$mq-responsive`
+  - Removed `$mq-static-breakpoint`
+
+### Changed
+
+- Divisions are now performed with `sass:math.div(...)` instead of `/`
+- `get-breakpoint-width`: added `@return null` when no breakpoint could be found (a function must always return something, or Sass will throw an error).
+- Updated all `map-*` global functions in favor of the built-in module `map.*` (for example: `map-keys()` ➡️ `map.keys()`).
+- `px2em`: removed param `$base-font-size` (deprecated in v5.0.1), and use 16px instead.
+- Removed usage of `unit()` in favor of [`math.compatible()`](https://sass-lang.com/documentation/modules/math#compatible), as the `unit()` function is intended for debugging, and its output format is not guaranteed to be consistent across Sass versions or implementations.
+- Updated all other global Sass functions to use their module equivalents (for example: `map-merge` ➡️ `map.merge`, `append` ➡️ `list.append`)
+
+### Fixed
+
+## Changes prior to v6.0.0
+
+Changes prior to v6.0.0 were logged in https://github.com/sass-mq/sass-mq/releases

package/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2013-2016 Guardian Media Group and contributors
+Copyright (c) 2013-2018 Guardian Media Group and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,35 +1,34 @@
-# Media Queries with superpowers [![Build Status](https://api.travis-ci.org/sass-mq/sass-mq.svg?branch=master)](https://travis-ci.org/sass-mq/sass-mq)
+<div align="center">
+	<img width="500" height="500" src="https://avatars3.githubusercontent.com/u/9341289?v=3&s=500" alt="Awesome">
+</div>
 
-![ ](https://avatars3.githubusercontent.com/u/9341289?v=3&s=300)
+# Media Queries with superpowers [![Build Status](https://api.travis-ci.org/sass-mq/sass-mq.svg?branch=main)](https://travis-ci.org/sass-mq/sass-mq)
 
-----
-
-`mq()` is a [Sass](http://sass-lang.com/ "Sass - Syntactically Awesome
-Stylesheets") mixin that helps you compose media queries in an elegant
-way.
+`mq()` is a [Sass](http://sass-lang.com/ 'Sass - Syntactically Awesome
+Stylesheets') mixin that helps you compose media queries in an elegant way.
 
 - compiles keywords and `px`/`em` values to `em`-based queries ([a good thing](http://css-tricks.com/zooming-squishes))
-- provides fallbacks for older browsers (see [Mobile-first Responsive Web Design and IE8](http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8) on the Guardian's developer blog).
+- For version 6 and up we removed fallbacks for older browsers (see [Mobile-first Responsive Web Design and IE8](http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8) on the Guardian's developer blog).
 
 Here is a very basic example:
 
 ```scss
-$mq-breakpoints: (
-    mobile:  320px,
-    tablet:  740px,
+@use 'mq' as * with (
+  $breakpoints: (
+    mobile: 320px,
+    tablet: 740px,
     desktop: 980px,
-    wide:    1300px
+    wide: 1300px,
+  )
 );
 
-@import 'mq';
-
 .foo {
-    @include mq($from: mobile, $until: tablet) {
-        background: red;
-    }
-    @include mq($from: tablet) {
-        background: green;
-    }
+  @include mq($from: mobile, $until: tablet) {
+    background: red;
+  }
+  @include mq($from: tablet) {
+    background: green;
+  }
 }
 ```
 
@@ -50,177 +49,202 @@ Compiles to:
 
 _Sass MQ was crafted in-house at the Guardian. Today, many more companies and developers are using it in their projects: [see who uses Sass MQ](#who-uses-sass-mq)._
 
-----
-
-
 ## How to use it
 
-Immediately play with it on [SassMeister](http://sassmeister.com/): `@import 'mq';`.
+Immediately play with it on [SassMeister](http://sassmeister.com/): `@use 'mq';`.
 
 OR:
 
-1. Install with [Bower](http://bower.io/ "Bower: A package manager for the web"): `bower install sass-mq --save`
+1. Install:
 
-    OR Install with [npm](https://www.npmjs.com/): `npm install sass-mq --save` _it supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_
+   - with [Bower](http://bower.io/ 'Bower: A package manager for the web'): `bower install sass-mq --save`
+   - with [npm](https://www.npmjs.com/): `npm install sass-mq --save`
+   - with [yarn](https://www.yarnpkg.com/): `yarn add sass-mq`
 
-    OR [Download _mq.scss](https://raw.github.com/sass-mq/sass-mq/master/_mq.scss) to your Sass project.
+   OR [Download \_mq.scss](https://raw.github.com/sass-mq/sass-mq/main/_mq.scss) into your Sass project.
 
 2. Import the partial in your Sass files and override default settings
-   with your own preferences before the file is imported:
-    ```scss
-    // To enable support for browsers that do not support @media queries,
-    // (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
-    // Create a separate stylesheet served exclusively to these browsers,
-    // meaning @media queries will be rasterized, relying on the cascade itself
-    $mq-responsive: true;
-
-    // Name your breakpoints in a way that creates a ubiquitous language
-    // across team members. It will improve communication between
-    // stakeholders, designers, developers, and testers.
-    $mq-breakpoints: (
-        mobile:  320px,
-        tablet:  740px,
-        desktop: 980px,
-        wide:    1300px,
-
-        // Tweakpoints
-        desktopAd: 810px,
-        mobileLandscape: 480px
-    );
-
-    // Define the breakpoint from the $mq-breakpoints list that should
-    // be used as the target width when outputting a static stylesheet
-    // (i.e. when $mq-responsive is set to 'false').
-    $mq-static-breakpoint: desktop;
-
-    // If you want to display the currently active breakpoint in the top
-    // right corner of your site during development, add the breakpoints
-    // to this list, ordered by width, e.g. (mobile, tablet, desktop).
-    $mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
-
-    @import 'path/to/mq';
-    // With eyeglass:
-    // @import 'sass-mq';
-    ```
-3. Play around with `mq()` (see below)
+   with your own preferences:
 
-### Responsive mode ON (default)
+```scss
+// Name your breakpoints in a way that creates a ubiquitous language
+// across team members. It will improve communication between
+// stakeholders, designers, developers, and testers.
+$breakpoints: (
+  mobile: 320px,
+  tablet: 740px,
+  desktop: 980px,
+  wide: 1300px,
+  // Tweakpoints
+  desktopAd: 810px,
+  mobileLandscape: 480px,
+);
 
-`mq()` takes up to three optional parameters:
+// If you want to display the currently active breakpoint in the top
+// right corner of your site during development, add the breakpoints
+// to this list, ordered by width. For examples: (mobile, tablet, desktop).
+$show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
 
-- `$from`: _inclusive_ `min-width` boundary
-- `$until`: _exclusive_ `max-width` boundary
-- `$and`: additional custom directives
+@use 'path/to/mq' with (
+  $breakpoints: $breakpoints,
+  $show-breakpoints: $show-breakpoints
+);
+```
 
-Note that `$until` as a keyword is a hard limit i.e. it's breakpoint - 1.
+### Notes about `@use` Vs `@import`
+
+When using the `@use` directive, you have to change your mindset when working with vars,
+functions or mixins and how they are now seen by Sass.
+
+Previously, with the `@import` statement any var, function, or mixin were exposed in the global scope.
+That means that you could define a var like `$mq-media-type: all` in your main sass file and use
+it anywhere as long as the main file had been loaded previously.
+
+This was possible because vars, functions, and mixins were set in the global scope.
+
+One drawback of this behaviour was that we needed to ensure not to pollute the global scope
+with common names or names that may be already taken by any other library.
+
+To solve this matter, we mostly used a prefix in vars, functions, or mixins in order to avoid
+collapsing names.
+
+Now with the new `@use` directive, no var, function, or mixin is placed in global scope, and they are
+all scoped within the file.
+
+That means that we explicitly need to include the partial file in each file that may use its vars,
+functions or mixins (similar to ES6 import modules).
+
+So, previously we could have a typical setup like this:
 
 ```scss
-.responsive {
-    // Apply styling to mobile and upwards
-    @include mq($from: mobile) {
-        color: red;
-    }
-    // Apply styling up to devices smaller than tablets (exclude tablets)
-    @include mq($until: tablet) {
-        color: blue;
-    }
-    // Same thing, in landscape orientation
-    @include mq($until: tablet, $and: '(orientation: landscape)') {
-        color: hotpink;
-    }
-    // Apply styling to tablets up to desktop (exclude desktop)
-    @include mq(tablet, desktop) {
-        color: green;
-    }
+// main.scss
+@import 'mq';
+@import 'typography';
+@import 'layout';
+@include mq($from:tablet) {
+  ...
+}
+
+...
+
+// typography.scss
+@include mq($from:tablet) {
+  ...
+}
+
+```
+
+Now, you will need to explicitly import the `_mq.scss` file in each file that needs to use any var, function
+or mixin from it:
+
+```scss
+// main.scss
+@use 'mq';
+@use 'typography';
+@use 'layout';
+@include mq.mq($from:tablet) {
+  ...
+}
+...
+
+// typography.scss
+@use 'mq';
+@include mq.mq($from:tablet) {
+  ...
 }
 ```
 
-### Responsive mode OFF
+Other important things about `@use`:
+
+- The file is only imported once, no matter how many times you @use it in a project.
 
-To enable support for browsers that do not support `@media` queries,
-(IE <= 8, Firefox <= 3, Opera <= 9) set `$mq-responsive: false`.
+- Variables, mixins, and functions (what Sass calls “members”) that start with an underscore (\_)
+  or hyphen (-) are considered private, and not imported.
 
-Tip: create a separate stylesheet served exclusively to these browsers,
-for example with conditional comments.
+- Members from the used file are only made available locally, but not passed along to future
+  imports.
 
-When `@media` queries are rasterized, browsers rely on the cascade
-itself. Learn more about this technique on [Jake’s blog](http://jakearchibald.github.io/sass-ie/ "IE-friendly mobile-first CSS with Sass 3.2").
+- Similarly, `@extends` will only apply up the chain; extending selectors in imported files,
+  but not extending files that import this one.
 
-To avoid rasterizing styles intended for displays larger than what those
-older browsers typically run on, set `$mq-static-breakpoint` to match
-a breakpoint from the `$mq-breakpoints` list. The default is
-`desktop`.
+- All imported members are namespaced by default.
 
-The static output will only include `@media` queries that start at or
-span this breakpoint and which have no custom `$and` directives:
+Please see [introducing-sass-modules](https://css-tricks.com/introducing-sass-modules/) for more
+info about sass modules.
+
+3. Play around with `mq()` (see below)
+
+### Responsive mode
+
+`mq()` takes up to three optional parameters:
+
+- `$from`: _inclusive_ `min-width` boundary
+- `$until`: _exclusive_ `max-width` boundary
+- `$and`: additional custom directives
+
+Note that `$until` as a keyword is a hard limit i.e. it's breakpoint - 1.
 
 ```scss
-$mq-responsive:        false;
-$mq-static-breakpoint: desktop;
-
-.static {
-    // Queries that span or start at desktop are compiled:
-    @include mq($from: mobile) {
-        color: lawngreen;
-    }
-    @include mq(tablet, wide) {
-        color: seagreen;
-    }
-    @include mq($from: desktop) {
-        color: forestgreen;
-    }
-
-    // But these queries won’t be compiled:
-    @include mq($until: tablet) {
-        color: indianred;
-    }
-    @include mq($until: tablet, $and: '(orientation: landscape)') {
-        color: crimson;
-    }
-    @include mq(mobile, desktop) {
-        color: firebrick;
-    }
+@use 'mq';
+
+.responsive {
+  // Apply styling to mobile and upwards
+  @include mq.mq($from: mobile) {
+    color: red;
+  }
+  // Apply styling up to devices smaller than tablets (exclude tablets)
+  @include mq.mq($until: tablet) {
+    color: blue;
+  }
+  // Same thing, in landscape orientation
+  @include mq.mq($until: tablet, $and: '(orientation: landscape)') {
+    color: hotpink;
+  }
+  // Apply styling to tablets up to desktop (exclude desktop)
+  @include mq.mq(tablet, desktop) {
+    color: green;
+  }
 }
 ```
 
-### Verbose and shortand notations
+### Verbose and shorthand notations
 
-Sometimes you’ll want to be extra verbose (e.g. if you’re developing a
+Sometimes you’ll want to be extra verbose (for example, if you’re developing a
 library based on top of sass-mq), however for readability in a codebase,
 the shorthand notation is recommended.
 
-All of these examples output the exact same thing, and are here for
-reference so you can use the notation that best matches your needs:
+All of these examples output the exact same thing and are here for
+reference, so you can use the notation that best matches your needs:
 
 ```scss
+@use 'mq';
 // Verbose
-@include mq(
-    $from: false,
-    $until: desktop,
-    $and: false,
-    $media-type: $mq-media-type // defaults to 'all'
+@include mq.mq(
+  $from: false,
+  $until: desktop,
+  $and: false,
+  $media-type: $media-type // defaults to 'all'
 ) {
-    .foo {}
+  .foo {
+  }
 }
 
 // Omitting argument names
-@include mq(
-    false,
-    desktop,
-    false,
-    $mq-media-type
-) {
-    .foo {}
+@include mq.mq(false, desktop, false, $media-type) {
+  .foo {
+  }
 }
 
 // Omitting tailing arguments
 @include mq(false, desktop) {
-    .foo {}
+  .foo {
+  }
 }
 
 // Recommended
 @include mq($until: desktop) {
-    .foo {}
+  .foo {
+  }
 }
 ```
 
@@ -229,39 +253,50 @@ reference so you can use the notation that best matches your needs:
 ### Adding custom breakpoints
 
 ```scss
-@include mq-add-breakpoint(tvscreen, 1920px);
+@include add-breakpoint(tvscreen, 1920px);
 
 .hide-on-tv {
-    @include mq(tvscreen) {
-        display: none;
-    }
+  @include mq(tvscreen) {
+    display: none;
+  }
 }
 ```
 
 ### Seeing the currently active breakpoint
 
 While developing, it can be nice to always know which breakpoint is
-active. To achieve this, set the `$mq-show-breakpoints` variable to
+active. To achieve this, set the `$show-breakpoints` variable to
 be a list of the breakpoints you want to debug, ordered by width.
 The name of the active breakpoint and its pixel and em values will
 then be shown in the top right corner of the viewport.
 
-![$mq-show-breakpoints](https://raw.githubusercontent.com/sass-mq/sass-mq/master/show-breakpoints.gif)
+```scss
+// Adapt the list to include breakpoint names from your project
+$show-breakpoints: (phone, phablet, tablet);
+
+@use 'path/to/mq' with (
+  $show-breakpoints: $show-breakpoints
+);
+```
+
+![$show-breakpoints](https://raw.githubusercontent.com/sass-mq/sass-mq/main/show-breakpoints.gif)
 
 ### Changing media type
 
 If you want to specify a media type, for example to output styles
-for screens only, set `$mq-media-type`:
+for screens only, set `$media-type`:
 
 #### SCSS
 
 ```scss
-$mq-media-type: screen;
+@use 'mq' with (
+  $media-type: screen
+);
 
 .screen-only-element {
-    @include mq(mobile) {
-        width: 300px;
-    }
+  @include mq.mq(mobile) {
+    width: 300px;
+  }
 }
 ```
 
@@ -269,12 +304,23 @@ $mq-media-type: screen;
 
 ```css
 @media screen and (max-width: 19.99em) {
-    .screen-only-element {
-        width: 300px;
-    }
+  .screen-only-element {
+    width: 300px;
+  }
 }
 ```
 
+### Implementing sass-mq in your project
+
+Please see the `examples` folder which contains a variety of examples on how to implement "sass-mq"
+
+### Backward compatibility with `@import`
+
+Just in case you need to have backward compatibility and want to use`@import` instead of `@use`,
+you can do so by importing `_mq.import.scss` instead of `_mq.scss`.
+
+Please see `legacy.scss` on `examples` folder.
+
 ## Running tests
 
 ```sh
@@ -332,9 +378,12 @@ These companies and projects use Sass MQ:
 - [Hotelbeds Group](http://group.hotelbeds.com/)
 - [Beneš & Michl](http://www.benes-michl.cz)
 - [Manchester International Festival](http://mif.co.uk/)
+- [Shopify Polaris](https://polaris.shopify.com)
+- [Taylor / Thomas](https://www.taylorthomas.co.uk/)
+- [GOV.UK Design System](https://design-system.service.gov.uk/)
 - You? [Open an issue](https://github.com/sass-mq/sass-mq/issues/new?title=My%20company%20uses%20Sass%20MQ&body=Hi,%20we%27re%20using%20Sass%20MQ%20at%20[name%20of%20your%20company]%20and%20we%27d%20like%20to%20be%20mentionned%20in%20the%20README%20of%20the%20project.%20Cheers!)
 
-----
+---
 
 Looking for a more advanced sass-mq, with support for height and other niceties?  
 Give [@mcaskill's fork of sass-mq](https://github.com/mcaskill/sass-mq) a try.

package/_mq.import.scss

@@ -0,0 +1,2 @@
+@forward 'mq' as mq-*;
+@forward 'mq' hide show-breakpoints, add-breakpoint, get-breakpoint-width, px2em, $media-type, $show-breakpoints, $breakpoints;

package/_mq.scss

@@ -1,27 +1,6 @@
-@charset "UTF-8"; // Fixes an issue where Ruby locale is not set properly
-                  // See https://github.com/sass-mq/sass-mq/pull/10
-
-/// Base font size on the `<body>` element
-/// @type Number (unit)
-$mq-base-font-size: 16px !default;
-
-/// Responsive mode
-///
-/// Set to `false` to enable support for browsers that do not support @media queries,
-/// (IE <= 8, Firefox <= 3, Opera <= 9)
-///
-/// You could create a stylesheet served exclusively to older browsers,
-/// where @media queries are rasterized
-///
-/// @example scss
-///  // old-ie.scss
-///  $mq-responsive: false;
-///  @import 'main'; // @media queries in this file will be rasterized up to $mq-static-breakpoint
-///                   // larger breakpoints will be ignored
-///
-/// @type Boolean
-/// @link https://github.com/sass-mq/sass-mq#responsive-mode-off Disabled responsive mode documentation
-$mq-responsive: true !default;
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
 
 /// Breakpoint list
 ///
@@ -31,111 +10,100 @@ $mq-responsive: true !default;
 ///
 /// @type Map
 /// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint Full documentation and examples
-$mq-breakpoints: (
-    mobile:  320px,
-    tablet:  740px,
-    desktop: 980px,
-    wide:    1300px
+$breakpoints: (
+  mobile: 320px,
+  tablet: 740px,
+  desktop: 980px,
+  wide: 1300px,
 ) !default;
 
-/// Static breakpoint (for fixed-width layouts)
-///
-/// Define the breakpoint from $mq-breakpoints that should
-/// be used as the target width for the fixed-width layout
-/// (i.e. when $mq-responsive is set to 'false') in a old-ie.scss
-///
-/// @example scss
-///  // tablet-only.scss
-///  //
-///  // Ignore all styles above tablet breakpoint,
-///  // and fix the styles (e.g. layout) at tablet width
-///  $mq-responsive: false;
-///  $mq-static-breakpoint: tablet;
-///  @import 'main'; // @media queries in this file will be rasterized up to tablet
-///                   // larger breakpoints will be ignored
-///
-/// @type String
-/// @link https://github.com/sass-mq/sass-mq#adding-custom-breakpoints Full documentation and examples
-$mq-static-breakpoint: desktop !default;
-
 /// Show breakpoints in the top right corner
 ///
 /// If you want to display the currently active breakpoint in the top
 /// right corner of your site during development, add the breakpoints
-/// to this list, ordered by width, e.g. (mobile, tablet, desktop).
+/// to this list, ordered by width. For example: (mobile, tablet, desktop).
+///
+/// @example scss
+///   @use 'path/to/mq' with ($show-breakpoints: ('mobile', 'tablet', 'desktop'));
+///
 ///
 /// @type map
-$mq-show-breakpoints: () !default;
+$show-breakpoints: () !default;
 
-/// Customize the media type (e.g. `@media screen` or `@media print`)
+/// Customize the media type (for example: `@media screen` or `@media print`)
 /// By default sass-mq uses an "all" media type (`@media all and …`)
 ///
+/// If you want to overried the media type, you can use this option.
+/// @example scss
+///   @use 'path/to/mq' with ($media-type: 'screen');
+///
 /// @type String
-/// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and examples
-$mq-media-type: all !default;
+/// @link https://github.com/sass-mq/sass-mq#changing-media-type Full documentation and example
+$media-type: all !default;
 
 /// Convert pixels to ems
 ///
 /// @param {Number} $px - value to convert
-/// @param {Number} $base-font-size ($mq-base-font-size) - `<body>` font size
 ///
 /// @example scss
-///  $font-size-in-ems: mq-px2em(16px);
-///  p { font-size: mq-px2em(16px); }
+///  $font-size-in-ems: px2em(16px);
+///  p { font-size: px2em(16px); }
 ///
-/// @requires $mq-base-font-size
 /// @returns {Number}
-@function mq-px2em($px, $base-font-size: $mq-base-font-size) {
-    @if unitless($px) {
-        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
-        @return mq-px2em($px * 1px, $base-font-size);
-    } @else if unit($px) == em {
-        @return $px;
-    }
-    @return ($px / $base-font-size) * 1em;
+
+@function px2em($px) {
+  @if math.is-unitless($px) {
+    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels.";
+    @return px2em($px * 1px);
+  }
+  // if $px is compatible with em units, then return value unchanged
+  @if math.compatible($px, 1em) {
+    @return $px;
+  }
+  @return math.div($px, 16px) * 1em;
 }
 
 /// Get a breakpoint's width
 ///
-/// @param {String} $name - Name of the breakpoint. One of $mq-breakpoints
+/// @param {String} $name - Name of the breakpoint. One of $breakpoints
 ///
 /// @example scss
-///  $tablet-width: mq-get-breakpoint-width(tablet);
-///  @media (min-width: mq-get-breakpoint-width(desktop)) {}
+///  $tablet-width: get-breakpoint-width(tablet);
+///  @media (min-width: get-breakpoint-width(tablet)) {}
 ///
-/// @requires {Variable} $mq-breakpoints
+/// @requires {Variable} $breakpoints
 ///
 /// @returns {Number} Value in pixels
-@function mq-get-breakpoint-width($name, $breakpoints: $mq-breakpoints) {
-    @if map-has-key($breakpoints, $name) {
-        @return map-get($breakpoints, $name);
-    } @else {
-        @warn "Breakpoint #{$name} wasn't found in $breakpoints.";
-    }
+@function get-breakpoint-width($name, $breakpoints: $breakpoints) {
+  @if map.has-key($breakpoints, $name) {
+    @return map.get($breakpoints, $name);
+  } @else {
+    @warn "Breakpoint #{$name} wasn't found in $breakpoints.";
+    @return null;
+  }
 }
 
 /// Media Query mixin
 ///
-/// @param {String | Boolean} $from (false) - One of $mq-breakpoints
-/// @param {String | Boolean} $until (false) - One of $mq-breakpoints
-/// @param {String | Boolean} $and (false) - Additional media query parameters
-/// @param {String} $media-type ($mq-media-type) - Media type: screen, print…
+/// @param {String | Boolean} $from [false] - One of $breakpoints
+/// @param {String | Boolean} $until [false] - One of $breakpoints
+/// @param {String | Boolean} $and [false] - Additional media query parameters
+/// @param {String} $media-type [$media-type] - Media type: screen, print…
 ///
 /// @ignore Undocumented API, for advanced use only:
-/// @ignore @param {Map} $breakpoints ($mq-breakpoints)
-/// @ignore @param {String} $static-breakpoint ($mq-static-breakpoint)
+/// @ignore @param {Map} $breakpoints [$breakpoints]
 ///
 /// @content styling rules, wrapped into a @media query when $responsive is true
 ///
-/// @requires {Variable} $mq-media-type
-/// @requires {Variable} $mq-breakpoints
-/// @requires {Variable} $mq-static-breakpoint
-/// @requires {function} mq-px2em
-/// @requires {function} mq-get-breakpoint-width
+/// @requires {Variable} $media-type
+/// @requires {Variable} $breakpoints
+/// @requires {function} px2em
+/// @requires {function} get-breakpoint-width
 ///
 /// @link https://github.com/sass-mq/sass-mq#responsive-mode-on-default Full documentation and examples
 ///
 /// @example scss
+///  @use 'path/to/mq' as *;
 ///  .element {
 ///    @include mq($from: mobile) {
 ///      color: red;
@@ -157,75 +125,58 @@ $mq-media-type: all !default;
 ///    }
 ///    // Advanced use:
 ///    $my-breakpoints: (L: 900px, XL: 1200px);
-///    @include mq(L, $breakpoints: $my-breakpoints, $static-breakpoint: L) {
+///    @include mq(L, $breakpoints: $my-breakpoints) {
 ///      color: hotpink;
 ///    }
 ///  }
 @mixin mq(
-    $from: false,
-    $until: false,
-    $and: false,
-    $media-type: $mq-media-type,
-    $breakpoints: $mq-breakpoints,
-    $responsive: $mq-responsive,
-    $static-breakpoint: $mq-static-breakpoint
+  $from: false,
+  $until: false,
+  $and: false,
+  $media-type: $media-type,
+  $breakpoints: $breakpoints
 ) {
-    $min-width: 0;
-    $max-width: 0;
-    $media-query: '';
-
-    // From: this breakpoint (inclusive)
-    @if $from {
-        @if type-of($from) == number {
-            $min-width: mq-px2em($from);
-        } @else {
-            $min-width: mq-px2em(mq-get-breakpoint-width($from, $breakpoints));
-        }
-    }
+  $min-width: 0;
+  $max-width: 0;
+  $media-query: '';
 
-    // Until: that breakpoint (exclusive)
-    @if $until {
-        @if type-of($until) == number {
-            $max-width: mq-px2em($until);
-        } @else {
-            $max-width: mq-px2em(mq-get-breakpoint-width($until, $breakpoints)) - .01em;
-        }
+  // From: this breakpoint (inclusive)
+  @if $from {
+    @if type-of($from) == number {
+      $min-width: px2em($from);
+    } @else {
+      $min-width: px2em(get-breakpoint-width($from, $breakpoints));
     }
+  }
 
-    // Responsive support is disabled, rasterize the output outside @media blocks
-    // The browser will rely on the cascade itself.
-    @if $responsive == false {
-        $static-breakpoint-width: mq-get-breakpoint-width($static-breakpoint, $breakpoints);
-        $target-width: mq-px2em($static-breakpoint-width);
-
-        // Output only rules that start at or span our target width
-        @if (
-            $and == false
-            and $min-width <= $target-width
-            and (
-                $until == false or $max-width >= $target-width
-            )
-        ) {
-            @content;
-        }
+  // Until: that breakpoint (exclusive)
+  @if $until {
+    @if type-of($until) == number {
+      $max-width: px2em($until);
+    } @else {
+      $max-width: px2em(get-breakpoint-width($until, $breakpoints)) - 0.01em;
     }
+  }
 
-    // Responsive support is enabled, output rules inside @media queries
-    @else {
-        @if $min-width != 0 { $media-query: '#{$media-query} and (min-width: #{$min-width})'; }
-        @if $max-width != 0 { $media-query: '#{$media-query} and (max-width: #{$max-width})'; }
-        @if $and            { $media-query: '#{$media-query} and #{$and}'; }
+  @if $min-width != 0 {
+    $media-query: '#{$media-query} and (min-width: #{$min-width})';
+  }
+  @if $max-width != 0 {
+    $media-query: '#{$media-query} and (max-width: #{$max-width})';
+  }
+  @if $and {
+    $media-query: '#{$media-query} and #{$and}';
+  }
 
-        // Remove unnecessary media query prefix 'all and '
-        @if ($media-type == 'all' and $media-query != '') {
-            $media-type: '';
-            $media-query: str-slice(unquote($media-query), 6);
-        }
+  // Remove unnecessary media query prefix 'all and '
+  @if ($media-type == 'all' and $media-query != '') {
+    $media-type: '';
+    $media-query: str-slice(unquote($media-query), 6);
+  }
 
-        @media #{$media-type + $media-query} {
-            @content;
-        }
-    }
+  @media #{$media-type + $media-query} {
+    @content;
+  }
 }
 
 /// Quick sort
@@ -234,28 +185,28 @@ $mq-media-type: all !default;
 /// @access private
 /// @param {List} $list - List to sort
 /// @returns {List} Sorted List
-@function _mq-quick-sort($list) {
-    $less:  ();
-    $equal: ();
-    $large: ();
+@function _quick-sort($list) {
+  $less: ();
+  $equal: ();
+  $large: ();
 
-    @if length($list) > 1 {
-        $seed: nth($list, ceil(length($list) / 2));
+  @if length($list) > 1 {
+    $seed: list.nth($list, math.ceil(math.div(length($list), 2)));
 
-        @each $item in $list {
-            @if ($item == $seed) {
-                $equal: append($equal, $item);
-            } @else if ($item < $seed) {
-                $less: append($less, $item);
-            } @else if ($item > $seed) {
-                $large: append($large, $item);
-            }
-        }
-
-        @return join(join(_mq-quick-sort($less), $equal), _mq-quick-sort($large));
+    @each $item in $list {
+      @if ($item == $seed) {
+        $equal: list.append($equal, $item);
+      } @else if ($item < $seed) {
+        $less: list.append($less, $item);
+      } @else if ($item > $seed) {
+        $large: list.append($large, $item);
+      }
     }
 
-    @return $list;
+    @return join(join(_quick-sort($less), $equal), _quick-sort($large));
+  }
+
+  @return $list;
 }
 
 /// Sort a map by values (works with numbers only)
@@ -263,24 +214,29 @@ $mq-media-type: all !default;
 /// @access private
 /// @param {Map} $map - Map to sort
 /// @returns {Map} Map sorted by value
-@function _mq-map-sort-by-value($map) {
-    $map-sorted: ();
-    $map-keys: map-keys($map);
-    $map-values: map-values($map);
-    $map-values-sorted: _mq-quick-sort($map-values);
+@function _map-sort-by-value($map) {
+  $map-sorted: ();
+  $map-keys: map.keys($map);
+  $map-values: map.values($map);
+  $map-values-sorted: _quick-sort($map-values);
 
-    // Reorder key/value pairs based on key values
-    @each $value in $map-values-sorted {
-        $index: index($map-values, $value);
-        $key: nth($map-keys, $index);
-        $map-sorted: map-merge($map-sorted, ($key: $value));
+  // Reorder key/value pairs based on key values
+  @each $value in $map-values-sorted {
+    $index: index($map-values, $value);
+    $key: list.nth($map-keys, $index);
+    $map-sorted: map.merge(
+      $map-sorted,
+      (
+        $key: $value,
+      )
+    );
 
-        // Unset the value in $map-values to prevent the loop
-        // from finding the same index twice
-        $map-values: set-nth($map-values, $index, 0);
-    }
+    // Unset the value in $map-values to prevent the loop
+    // from finding the same index twice
+    $map-values: list.set-nth($map-values, $index, 0);
+  }
 
-    @return $map-sorted;
+  @return $map-sorted;
 }
 
 /// Add a breakpoint
@@ -288,56 +244,61 @@ $mq-media-type: all !default;
 /// @param {String} $name - Name of the breakpoint
 /// @param {Number} $width - Width of the breakpoint
 ///
-/// @requires {Variable} $mq-breakpoints
+/// @requires {Variable} $breakpoints
 ///
 /// @example scss
-///  @include mq-add-breakpoint(tvscreen, 1920px);
+///  @include add-breakpoint(tvscreen, 1920px);
 ///  @include mq(tvscreen) {}
-@mixin mq-add-breakpoint($name, $width) {
-    $new-breakpoint: ($name: $width);
-    $mq-breakpoints: map-merge($mq-breakpoints, $new-breakpoint) !global;
-    $mq-breakpoints: _mq-map-sort-by-value($mq-breakpoints) !global;
+@mixin add-breakpoint($name, $width) {
+  $new-breakpoint: (
+    $name: $width,
+  );
+  $breakpoints: map.merge($breakpoints, $new-breakpoint) !global;
+  $breakpoints: _map-sort-by-value($breakpoints) !global;
 }
 
 /// Show the active breakpoint in the top right corner of the viewport
 /// @link https://github.com/sass-mq/sass-mq#seeing-the-currently-active-breakpoint
 ///
-/// @param {List} $show-breakpoints ($mq-show-breakpoints) - List of breakpoints to show in the top right corner
-/// @param {Map} $breakpoints ($mq-breakpoints) - Breakpoint names and sizes
+/// @param {List} $show-breakpoints [$show-breakpoints] - List of breakpoints to show in the top right corner
+/// @param {Map} $breakpoints [$breakpoints] - Breakpoint names and sizes
 ///
-/// @requires {Variable} $mq-breakpoints
-/// @requires {Variable} $mq-show-breakpoints
+/// @requires {Variable} $breakpoints
+/// @requires {Variable} $show-breakpoints
 ///
 /// @example scss
 ///  // Show breakpoints using global settings
-///  @include mq-show-breakpoints;
+///  @include show-breakpoints;
 ///
 ///  // Show breakpoints using custom settings
-///  @include mq-show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));
-@mixin mq-show-breakpoints($show-breakpoints: $mq-show-breakpoints, $breakpoints: $mq-breakpoints) {
-    body:before {
-        background-color: #FCF8E3;
-        border-bottom: 1px solid #FBEED5;
-        border-left: 1px solid #FBEED5;
-        color: #C09853;
-        font: small-caption;
-        padding: 3px 6px;
-        pointer-events: none;
-        position: fixed;
-        right: 0;
-        top: 0;
-        z-index: 100;
+///  @include show-breakpoints((L, XL), (S: 300px, L: 800px, XL: 1200px));
+@mixin show-breakpoints(
+  $show-breakpoints: $show-breakpoints,
+  $breakpoints: $breakpoints
+) {
+  body:before {
+    background-color: #fcf8e3;
+    border-bottom: 1px solid #fbeed5;
+    border-left: 1px solid #fbeed5;
+    color: #c09853;
+    font: small-caption;
+    padding: 3px 6px;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 100;
 
-        // Loop through the breakpoints that should be shown
-        @each $show-breakpoint in $show-breakpoints {
-            $width: mq-get-breakpoint-width($show-breakpoint, $breakpoints);
-            @include mq($show-breakpoint, $breakpoints: $breakpoints) {
-                content: "#{$show-breakpoint} ≥ #{$width} (#{mq-px2em($width)})";
-            }
-        }
+    // Loop through the breakpoints that should be shown
+    @each $show-breakpoint in $show-breakpoints {
+      $width: get-breakpoint-width($show-breakpoint, $breakpoints);
+      @include mq($show-breakpoint, $breakpoints: $breakpoints) {
+        content: '#{$show-breakpoint} ≥ #{$width} (#{px2em($width)})';
+      }
     }
+  }
 }
 
-@if length($mq-show-breakpoints) > 0 {
-    @include mq-show-breakpoints;
+@if list.length($show-breakpoints) > 0 {
+  @include show-breakpoints;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sass-mq",
   "description": "mq() is a Sass mixin that helps manipulating media queries in an elegant way.",
-  "version": "4.0.2",
+  "version": "6.0.0",
   "keywords": [
     "responsive",
     "sass",
@@ -9,28 +9,29 @@
     "mediaquery",
     "query",
     "queries",
-    "media",
-    "eyeglass-module"
+    "media"
   ],
   "ignore": [
     "test",
     "sassdoc",
     "**/.*",
-    "sache.json",
     "bower.json",
     "sassdoc.sh",
     "scripts"
   ],
   "files": [
     "_mq.scss",
+    "_mq.import.scss",
+    "CHANGELOG.md",
     "LICENSE.md",
     "README.md",
     "sass/index.scss"
   ],
   "main": "_mq.scss",
   "scripts": {
-    "test": "./scripts/test.sh",
-    "sassdoc": "./scripts/sassdoc.sh"
+    "test": "jest",
+    "sassdoc": "./scripts/sassdoc.sh",
+    "build:examples": "sass ./examples:./examples --no-source-map"
   },
   "contributors": [
     {
@@ -48,15 +49,11 @@
   },
   "license": "MIT",
   "homepage": "https://sass-mq.github.io/sass-mq/",
-  "eyeglass": {
-    "needs": ">= 0.8.2",
-    "sassDir": "./_mq.scss",
-    "exports": false
-  },
   "devDependencies": {
-    "dart-sass": "^1.0.0-beta.4",
-    "eyeglass": "^1.3.0",
-    "node-sass": "^4.7.2",
-    "sassdoc": "^2.5.0"
+    "glob": "^7.1.7",
+    "jest": "^27.0.4",
+    "sass": "^1.35.1",
+    "sass-true": "^6.0.1",
+    "sassdoc": "^2.7.3"
   }
 }