feat(components): allow to change prefix with plugin options

shuriken-ui · Apr 17, 2023 · 87b8724 · 87b8724
1 parent cc193c8
commit 87b8724
Showing 1 changed file with 49 additions and 42 deletions.
diff --git a/src/plugins/components.ts b/src/plugins/components.ts
@@ -1,16 +1,27 @@
 import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+
+export interface PluginOption {
+  prefix?: string
+}
+
+const defaultPluginOptions = {
+  prefix: 'nui',
+}
 
 export default plugin.withOptions(
-  function (options = {}) {
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
     return function ({ addComponents }) {
       addComponents({
-        '.nui-placeload': {
+        [`.${prefix}-placeload`]: {
           position: 'relative',
           background:
             'linear-gradient( to right, rgb(0 0 0 / 7%) 8% ,rgb(0 0 0 / 15%) 18%, rgb(0 0 0 / 7%) 33%)',
           backgroundSize: '1200px 104px',
         },
-        '.dark .nui-placeload': {
+        [`.dark .${prefix}-placeload`]: {
           position: 'relative',
           background:
             'linear-gradient(to right, rgb(255 255 255 / 15%) 8%, rgb(255 255 255 / 24%) 18%, rgb(255 255 255 / 15%) 33%)',
@@ -19,7 +30,7 @@ export default plugin.withOptions(
       })
 
       addComponents({
-        '.nui-focus': {
+        [`.${prefix}-focus`]: {
           '@apply outline-1 outline-dashed outline-offset-2': {},
           '@apply outline-transparent': {},
           '&:focus-within': {
@@ -33,138 +44,134 @@ export default plugin.withOptions(
       })
 
       addComponents({
-        '.nui-mask': {
+        [`.${prefix}-mask`]: {
           'mask-size': 'contain',
           'mask-repeat': 'no-repeat',
           'mask-position': 'center',
         },
-        '.nui-mask-hex': {
+        [`.${prefix}-mask-hex`]: {
           'mask-image':
             "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE4MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZ6Ii8+PC9zdmc+')",
         },
-        '.nui-mask-hexed': {
+        [`.${prefix}-mask-hexed`]: {
           'mask-image':
             "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgyIiBoZWlnaHQ9IjIwMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBsLTYxLjg2LTM1Ljk0NUM2LjE1MSAxNTcuNDQuMyAxNDUuNzM3LjMgMTM2LjU0VjY1LjQ4NnoiLz48L3N2Zz4=')",
         },
-        '.nui-mask-deca': {
+        [`.${prefix}-mask-deca`]: {
           'mask-image':
             "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTYgMGw1OC43NzkgMTkuMDk4IDM2LjMyNyA1MHY2MS44MDRsLTM2LjMyNyA1MEw5NiAyMDBsLTU4Ljc3OS0xOS4wOTgtMzYuMzI3LTUwVjY5LjA5OGwzNi4zMjctNTB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=')",
         },
-        '.nui-mask-blob': {
+        [`.${prefix}-mask-blob`]: {
           'mask-image':
             "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAweiIvPjwvc3ZnPg==')",
         },
-        '.nui-mask-diamond': {
+        [`.${prefix}-mask-diamond`]: {
           'mask-image':
             "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDBsMTAwIDEwMC0xMDAgMTAwTDAgMTAweiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+')",
         },
       })
 
       addComponents({
-        '.nui-text-white': {
+        [`.${prefix}-text-white`]: {
           '@apply text-white dark:text-black': {},
         },
-        '.nui-text-50': {
+        [`.${prefix}-text-50`]: {
           '@apply text-muted-50 dark:text-muted-900': {},
         },
-        '.nui-text-100': {
+        [`.${prefix}-text-100`]: {
           '@apply text-muted-100 dark:text-muted-900': {},
         },
-        '.nui-text-200': {
+        [`.${prefix}-text-200`]: {
           '@apply text-muted-200 dark:text-muted-800': {},
         },
-        '.nui-text-300': {
+        [`.${prefix}-text-300`]: {
           '@apply text-muted-300 dark:text-muted-700': {},
         },
-        '.nui-text-400': {
+        [`.${prefix}-text-400`]: {
           '@apply text-muted-400 dark:text-muted-600': {},
         },
-        '.nui-text-500': {
+        [`.${prefix}-text-500`]: {
           '@apply text-muted-500 dark:text-muted-500': {},
         },
-        '.nui-text-600': {
+        [`.${prefix}-text-600`]: {
           '@apply text-muted-600 dark:text-muted-400': {},
         },
-        '.nui-text-700': {
+        [`.${prefix}-text-700`]: {
           '@apply text-muted-700 dark:text-muted-300': {},
         },
-        '.nui-text-800': {
+        [`.${prefix}-text-800`]: {
           '@apply text-muted-800 dark:text-muted-200': {},
         },
-        '.nui-text-900': {
+        [`.${prefix}-text-900`]: {
           '@apply text-muted-900 dark:text-muted-100': {},
         },
-        '.nui-text-black': {
+        [`.${prefix}-text-black`]: {
           '@apply text-black dark:text-white': {},
         },
       })
 
       addComponents({
-        '.nui-bg-white': {
+        [`.${prefix}-bg-white`]: {
           '@apply bg-white dark:bg-muted-900': {},
         },
-        '.nui-bg-50': {
+        [`.${prefix}-bg-50`]: {
           '@apply bg-muted-50 dark:bg-muted-900': {},
         },
-        '.nui-bg-100': {
+        [`.${prefix}-bg-100`]: {
           '@apply bg-muted-100 dark:bg-muted-900': {},
         },
-        '.nui-bg-200': {
+        [`.${prefix}-bg-200`]: {
           '@apply bg-muted-200 dark:bg-muted-800': {},
         },
-        '.nui-bg-300': {
+        [`.${prefix}-bg-300`]: {
           '@apply bg-muted-300 dark:bg-muted-700': {},
         },
-        '.nui-bg-400': {
+        [`.${prefix}-bg-400`]: {
           '@apply bg-muted-400 dark:bg-muted-600': {},
         },
-        '.nui-bg-500': {
+        [`.${prefix}-bg-500`]: {
           '@apply bg-muted-500 dark:bg-muted-500': {},
         },
-        '.nui-bg-600': {
+        [`.${prefix}-bg-600`]: {
           '@apply bg-muted-600 dark:bg-muted-400': {},
         },
-        '.nui-bg-700': {
+        [`.${prefix}-bg-700`]: {
           '@apply bg-muted-700 dark:bg-muted-300': {},
         },
-        '.nui-bg-800': {
+        [`.${prefix}-bg-800`]: {
           '@apply bg-muted-800 dark:bg-muted-200': {},
         },
-        '.nui-bg-900': {
+        [`.${prefix}-bg-900`]: {
           '@apply bg-muted-900 dark:bg-muted-100': {},
         },
-        '.nui-bg-black': {
+        [`.${prefix}-bg-black`]: {
           '@apply bg-muted-900 dark:bg-white': {},
         },
       })
 
       addComponents({
-        '.nui-label': {
+        [`.${prefix}-label`]: {
           '@apply inline-block font-alt leading-none text-muted-400 dark:text-muted-400/80':
             {},
         },
       })
 
       addComponents({
-        '.nui-dropdown-divider': {
+        [`.${prefix}-dropdown-divider`]: {
           '@apply my-2 block h-px w-full border-t border-muted-200 dark:border-muted-600':
             {},
         },
       })
 
       addComponents({
-        '.nui-mark': {
+        [`.${prefix}-mark`]: {
           '@apply bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-200':
             {},
         },
       })
     }
   },
   function (options) {
-    return {
-      theme: {
-        nui: {},
-      },
-    }
+    return {}
   }
 )