Add ability to modify indicator prefix

vormkracht10 · Nov 18, 2020 · ee7fe31 · ee7fe31
1 parent a0b27a9
commit ee7fe31
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -103,3 +103,21 @@ module.exports = {
   ],
 }
 ```
+
+#### Screen Prefix
+
+To modify the prefix for the screens, add the `indicatorPrefix` configuration.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    debugScreens: {
+      indicatorPrefix: 'screen: ',
+    },
+  },
+  plugins: [
+    require('tailwindcss-debug-screens'),
+  ],
+}
+```
diff --git a/index.js b/index.js
@@ -8,6 +8,8 @@ module.exports = function ({ addComponents, theme }) {
   const positionY = position[0] || defaultPosition[0];
   const positionX = position[1] || defaultPosition[1];
 
+  const indicatorPrefix = theme('debugScreens.indicatorPrefix', 'screens: ');
+
   const components = {
     '.debug-screens::before': Object.assign({
       position: 'fixed',
@@ -21,7 +23,7 @@ module.exports = function ({ addComponents, theme }) {
       backgroundColor: '#000',
       color: '#fff',
       boxShadow: '0 0 0 1px #fff',
-      content: `'screen: _'`,
+      content: `'${indicatorPrefix}_'`,
     }, userStyles),
   };
 
@@ -30,7 +32,7 @@ module.exports = function ({ addComponents, theme }) {
     .forEach(([screen]) => {
       components[`@screen ${screen}`] = {
         '.debug-screens::before': {
-          content: `'screen: ${screen}'`,
+          content: `'${indicatorPrefix}${screen}'`,
         },
       };
     });