From 90d9c8f9e74ab4f3ac939df9f0c663e31f9454ba Mon Sep 17 00:00:00 2001
From: Mehdi M <hi@mehdi.cc>
Date: Sun, 15 Nov 2020 20:27:36 +0100
Subject: [PATCH] Add debug mode

---
 README.md              | 12 +++++++++++-
 src/mixins/_base.scss  |  7 ++++++-
 src/mixins/_debug.scss |  5 +++++
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/mixins/_debug.scss

diff --git a/README.md b/README.md
index 6ca1853..f599e8e 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@ Double Dash is a SCSS library helping to declare [custom media queries](docs/cus
     - [Introduction](#introduction)
     - [Available mixins](#available-mixins)
 - [Partial import](#partial-import)
+- [Debug](#debug)
 
 ## Installation
 
@@ -177,7 +178,7 @@ Available files: `color`, `js`, `light`, `motion`, `pointer`, `ratio`, `refresh`
 
 ### Import mixins for ranged media queries
 
-First, import the generic `--media` mixins: the other mixins use it:
+First, import the generic `--media` mixins (the other mixins use it):
 
 ```scss
 @import '~double-dash.scss/src/mixins/base';
@@ -190,3 +191,12 @@ Then, pulls the mixins for viewport sizes custom media queries:
 ```
 
 Available files: `ratio`, `resolution`, `sizes`.
+
+## Debug
+
+You can output each custom media query generated with Double Dash in your CLI by setting the `$dash-dash-debug` variable before importing Double Dash.
+
+```scss
+$dash-dash-debug: true;
+@import '~double-dash.scss';
+```
diff --git a/src/mixins/_base.scss b/src/mixins/_base.scss
index 3f1cf46..f388858 100644
--- a/src/mixins/_base.scss
+++ b/src/mixins/_base.scss
@@ -1,3 +1,5 @@
+@import 'debug';
+
 /*
  * MEDIA MIXIN
  *
@@ -27,7 +29,10 @@
   }
 
   @custom-media --#{$name} #{$features};
-  // @debug --#{$name} unquote('#{$features}'); // Uncomment for console debug.
+
+  @if $dash-dash-should-debug {
+    @debug unquote('@custom-media ') --#{$name} unquote('#{$features}');
+  }
 }
 
 /* --media() ALIAS */
diff --git a/src/mixins/_debug.scss b/src/mixins/_debug.scss
new file mode 100644
index 0000000..6def7eb
--- /dev/null
+++ b/src/mixins/_debug.scss
@@ -0,0 +1,5 @@
+$dash-dash-should-debug: false;
+
+@if variable-exists('dash-dash-debug') == true and $dash-dash-debug == true {
+  $dash-dash-should-debug: true;
+}