Merge pull request jorenvanhee#2 from venyii/ignore-screens

jorenvanhee · web-flow · commit 0cee3303c77d · 2020-08-03T21:47:14.000+02:00
Add ability to ignore specific screens
diff --git a/README.md b/README.md
@@ -42,9 +42,27 @@ Make sure the class is only present during development. Here's an example of how
 <body class="{{ devMode ? 'debug-screens' : '' }}">
 ```
 
-### Custimization
+### Customization
 
-You can customize the position and styles in the `theme.debugScreens` section of your `tailwind.config.js` file.
+You can customize this plugin in the `theme.debugScreens` section of your `tailwind.config.js` file.
+
+#### Ignore screens
+
+To ignore a specific screen (for instance if you use [dark mode](https://tailwindcss.com/docs/breakpoints/#dark-mode)), add the screen name to the `ignore` configuration array.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    debugScreens: {
+      ignore: ['dark'],
+    },
+  },
+  plugins: [
+    require('tailwindcss-debug-screens'),
+  ],
+}
+```
 
 #### Position
 
diff --git a/index.js b/index.js
@@ -1,6 +1,7 @@
 module.exports = function ({ addComponents, theme }) {
   const screens = theme('screens');
   const userStyles = theme('debugScreens.style', {});
+  const ignoredScreens = theme('debugScreens.ignore', [])
 
   const defaultPosition = ['bottom', 'left'];
   const position = theme('debugScreens.position', defaultPosition);
@@ -24,13 +25,15 @@ module.exports = function ({ addComponents, theme }) {
     }, userStyles),
   };
 
-  Object.entries(screens).forEach(([screen]) => {
-    components[`@screen ${screen}`] = {
-      '.debug-screens::before': {
-        content: `'screen: ${screen}'`,
-      },
-    };
-  });
+  Object.entries(screens)
+    .filter(([screen]) => !ignoredScreens.includes(screen))
+    .forEach(([screen]) => {
+      components[`@screen ${screen}`] = {
+        '.debug-screens::before': {
+          content: `'screen: ${screen}'`,
+        },
+      };
+    });
 
   addComponents(components);
 }
