sass-mq 6.0.0-beta.1 → 6.0.0

package/CHANGELOG.md

@@ -5,18 +5,25 @@ 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
+<!-- ## Unreleased -->
 
-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) and dropping support for deprecated versions of Sass. No new features were added.
+## 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
+- 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`

package/README.md

@@ -15,10 +15,10 @@ Here is a very basic example:
 ```scss
 @use 'mq' as * with (
   $breakpoints: (
-    mobile:  320px,
-    tablet:  740px,
+    mobile: 320px,
+    tablet: 740px,
     desktop: 980px,
-    wide:    1300px
+    wide: 1300px,
   )
 );
 
@@ -58,8 +58,8 @@ OR:
 1. Install:
 
    - 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` _supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_
-   - with [yarn](https://www.yarnpkg.com/): `yarn add sass-mq` _supports [eyeglass](https://github.com/sass-eyeglass/eyeglass)_
+   - 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/main/_mq.scss) into your Sass project.
 
@@ -83,11 +83,11 @@ $breakpoints: (
 // 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).
-$breakpoints-shown: (mobile, mobileLandscape, tablet, desktop, wide);
+$show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
 
 @use 'path/to/mq' with (
   $breakpoints: $breakpoints,
-  $show-breakpoints: $breakpoints-shown,
+  $show-breakpoints: $show-breakpoints
 );
 ```
 
@@ -273,6 +273,10 @@ then be shown in the top right corner of the viewport.
 ```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)
@@ -285,7 +289,9 @@ for screens only, set `$media-type`:
 #### SCSS
 
 ```scss
-@use 'mq' with ($media-type: screen);
+@use 'mq' with (
+  $media-type: screen
+);
 
 .screen-only-element {
   @include mq.mq(mobile) {

package/_mq.scss

@@ -24,8 +24,8 @@ $breakpoints: (
 /// to this list, ordered by width. For example: (mobile, tablet, desktop).
 ///
 /// @example scss
-///   $show-breakpoints: (mobile, tablet, desktop);
-///   @import 'path/to/mq';
+///   @use 'path/to/mq' with ($show-breakpoints: ('mobile', 'tablet', 'desktop'));
+///
 ///
 /// @type map
 $show-breakpoints: () !default;
@@ -33,6 +33,10 @@ $show-breakpoints: () !default;
 /// 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 example
 $media-type: all !default;
@@ -52,7 +56,7 @@ $media-type: all !default;
     @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 $px is compatible with em units, then return value unchanged
   @if math.compatible($px, 1em) {
     @return $px;
   }
@@ -65,7 +69,7 @@ $media-type: all !default;
 ///
 /// @example scss
 ///  $tablet-width: get-breakpoint-width(tablet);
-///  @media (min-width: get-breakpoint-width(desktop)) {}
+///  @media (min-width: get-breakpoint-width(tablet)) {}
 ///
 /// @requires {Variable} $breakpoints
 ///
@@ -99,6 +103,7 @@ $media-type: all !default;
 /// @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;

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": "6.0.0-beta.1",
+  "version": "6.0.0",
   "keywords": [
     "responsive",
     "sass",
@@ -9,8 +9,7 @@
     "mediaquery",
     "query",
     "queries",
-    "media",
-    "eyeglass-module"
+    "media"
   ],
   "ignore": [
     "test",
@@ -50,13 +49,7 @@
   },
   "license": "MIT",
   "homepage": "https://sass-mq.github.io/sass-mq/",
-  "eyeglass": {
-    "needs": ">= 0.8.2",
-    "sassDir": "./_mq.scss",
-    "exports": false
-  },
   "devDependencies": {
-    "eyeglass": "^3.0.3",
     "glob": "^7.1.7",
     "jest": "^27.0.4",
     "sass": "^1.35.1",