sass-mq 7.0.0-beta.1 → 7.0.1

package/CHANGELOG.md

@@ -5,15 +5,24 @@ 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 -->
+## v7.0.1 - 2026-06-19
 
-## v7.0.0 - 2024-10-24
+### Fixed
+
+- Vite 8 compatibility: added a `package.json` `exports` field with a `sass` condition so `@use 'sass-mq'` resolves again. Vite 8 dropped the `main`-field fallback that earlier versions relied on ([#179](https://github.com/sass-mq/sass-mq/issues/179)).
+  - Behavior change: adding `exports` encapsulates the package. The documented `@use 'sass-mq'` import is unaffected, but undocumented deep imports such as `@use 'sass-mq/_mq.scss'` are no longer resolvable — use `@use 'sass-mq'` instead.
+
+### Added
+
+- `examples/vite8`: a runnable Vite 8 project that proves `@use 'sass-mq'` resolves and compiles. It runs in CI as a regression test.
+
+## v7.0.0 - 2025-06-16
 
 This is a major version bump that contains no breaking changes but may require a newer version of Sass. It ensures compatibility with the latest version of dart-sass and removes support for `@import`, as [`@import` is officially deprecated as of sass-dart 1.80.0](https://sass-lang.com/blog/import-is-deprecated/).
 
 ### Added
 
-- Support for dart-sass >= 1.80.0 (without deprecation warnings)
+- Added support for dart-sass >= 1.80.0 (without deprecation warnings)
 
 ### Changed
 
@@ -24,6 +33,7 @@ This is a major version bump that contains no breaking changes but may require a
 
 - Upgraded Jest and Sass True dependencies to unlock testing with the latest versions of `sass-dart`
 - Fixed a test where a space was missing between `and` and `(` in the generated CSS (caused by the latest version of Sass)
+- Migrated from Travis CI to GitHub Actions for testing
 
 ## v6.0.0 - 2022-01-10
 

package/README.md

@@ -2,13 +2,13 @@
 	<img width="500" height="500" src="https://avatars3.githubusercontent.com/u/9341289?v=3&s=500" alt="Awesome">
 </div>
 
-# 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)
+# Media Queries with superpowers
 
 `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))
-- 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).
+- Compiles keywords and `px`/`em` values to `em`-based queries ([a good thing](http://css-tricks.com/zooming-squishes))
+- 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:
 
@@ -91,6 +91,27 @@ $show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
 );
 ```
 
+### Using with Vite, webpack and other bundlers
+
+When you install Sass MQ from npm, import it by its package name and Sass will
+resolve it from `node_modules`:
+
+```scss
+@use 'sass-mq' as mq;
+
+.foo {
+  @include mq.mq($from: tablet) {
+    color: red;
+  }
+}
+```
+
+Sass MQ declares a `sass` [package export](https://sass-lang.com/blog/announcing-pkg-importers/),
+so it resolves out of the box with Vite (including Vite 8, which dropped the
+`main`-field fallback — see [#179](https://github.com/sass-mq/sass-mq/issues/179)),
+webpack's `sass-loader`, and the dart-sass `pkg:` importer. See the example in
+[`examples/vite8`](examples/vite8).
+
 ### Notes about `@use` Vs `@import`
 
 When using the `@use` directive, you have to change your mindset when working with vars,

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": "7.0.0-beta.1",
+  "version": "7.0.1",
   "keywords": [
     "responsive",
     "sass",
@@ -27,10 +27,17 @@
     "sass/index.scss"
   ],
   "main": "_mq.scss",
+  "sass": "_mq.scss",
+  "exports": {
+    ".": {
+      "sass": "./_mq.scss",
+      "default": "./_mq.scss"
+    }
+  },
   "scripts": {
     "test": "jest",
     "sassdoc": "./scripts/sassdoc.sh",
-    "build:examples": "sass ./examples:./examples --no-source-map"
+    "build:examples": "sass ./examples/basic:./examples/basic ./examples/advanced:./examples/advanced ./examples/custom:./examples/custom --no-source-map"
   },
   "contributors": [
     {
@@ -44,7 +51,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/sass-mq/sass-mq.git"
+    "url": "git+https://github.com/sass-mq/sass-mq.git"
   },
   "license": "MIT",
   "homepage": "https://sass-mq.github.io/sass-mq/",