feat(config): allow adding prefix to class names (#537)

* feat(src/index): postcss-js inject prefix for components & their associated utilities if specified

* docs: add instruction for `prefix` at /docs/config

* docs(prefix): add globlal prefix store for user to customize display of class names

* refactor(docs.components): use prefix store & action for html display

* fix: load prefix from daisyui user's config

package.json

@@ -82,6 +82,8 @@
   },
   "dependencies": {
     "color": "^4.2",
+    "postcss-class-prefix": "0.3.0",
+    "postcss-js": "3.0.3",
     "tailwindcss": "^3.0"
   },
   "peerDependencies": {

src/docs/package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "color": "^4.2.1",
     "daisyui": "^2.2.0",
+    "lodash.debounce": "^4.0.8",
     "nanoid": "^3.3.1",
     "randomcolor": "^0.6.2",
     "svelte-inview": "^3.0.0"

src/docs/src/components/ClassTable.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { prefix } from '$lib/stores';
   export let data
 </script>
 
@@ -15,7 +16,7 @@
       {#each data as item, index}
         <tr>
           <th class="font-normal">
-            <span class="font-mono lowercase">{item.class}</span>
+            <span class="font-mono lowercase">{`${$prefix}${item.class}`}</span>
           </th>
           <td>
             {#if item.type == "component"}

src/docs/src/components/Navbar.svelte

@@ -3,6 +3,7 @@
   import { readEnv } from "$lib/util"
   import ThemeChange from "@components/ThemeChange.svelte"
   import Search from "@components/Search.svelte"
+  import PrefixEdit from "@components/PrefixEdit.svelte";
 
   let version = readEnv("VITE_DAISYUI_VERSION", "latest")
 
@@ -45,6 +46,9 @@
           Components
         </a>
       </div>
+      <div class="hidden lg:block mr-2">
+        <PrefixEdit />
+      </div>
       <ThemeChange />
       <div title="Github ↗︎" class="flex-none items-center">
         <a aria-label="Github" target="_blank" href="https://github.com/saadeghi/daisyui" rel="noopener" class="btn btn-ghost drawer-button btn-square normal-case">

src/docs/src/components/PrefixEdit.svelte

@@ -0,0 +1,15 @@
+<script>
+  import debounce from "lodash.debounce"
+  import { prefix } from "$lib/stores"
+
+  const onPrefixInput = debounce((e) => {
+    if (e.target.value !== $prefix) {
+      prefix.set(e.target.value)
+    }
+  }, 500)
+</script>
+
+<label for="config-prefix" class="relative w-full tooltip tooltip-bottom" data-tip="Custom prefix">
+  <svg class="stroke-current fill-current h-3 absolute left-2 top-1/2 -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M318.4 16l-161 480h77.5l25.4-81.4h119.5L405 496h77.5L318.4 16zm-40.3 341.9l41.2-130.4h1.5l40.9 130.4h-83.6zM640 405l-10-31.4L462.1 358l19.4 56.5L640 405zm-462.1-47L10 373.7 0 405l158.5 9.4 19.4-56.4z"/></svg>
+  <input class="input input-ghost pl-8 h-10 w-full" type="text" placeholder="Custom Prefix" id="config-prefix" on:input={onPrefixInput} value={$prefix}/>
+</label>

src/docs/src/components/Prism.svelte

@@ -7,22 +7,24 @@
 
 <script>
   import "prism-svelte"
-  import { tick } from "svelte"
+  import { afterUpdate } from "svelte"
 
   export let language = "javascript"
   export let source = ""
   export let transform = (x) => x
   let element, formattedCode
 
-  $: $$props && (source || element) && highlightCode()
-
   function highlightCode() {
     const grammar = prism.languages[language]
     let body = source || element.textContent
     body = globalConfig.transform(body)
     body = transform(body)
     formattedCode = language === "none" ? body : prism.highlight(body, grammar, language)
   }
+
+  afterUpdate(() => {
+    highlightCode();
+	});
 </script>
 
 <code bind:this={element} style="display:none">

src/docs/src/components/Sidebar.svelte

@@ -3,6 +3,7 @@
   import { pages } from "@src/lib/data.js"
   import { readEnv } from "$lib/util"
   import Search from "@components/Search.svelte"
+  import PrefixEdit from "@components/PrefixEdit.svelte";
 
   export let closeDrawer
 
@@ -26,10 +27,13 @@
   </a>
 </div>
 
-<div class={`bg-base-200 sticky top-0 z-10 flex w-full bg-opacity-90 py-3 px-2 backdrop-blur lg:hidden ${switchNavbarStyle ? "shadow-sm" : ""}`}>
-  <div class="flex w-full lg:hidden">
+<div class={`bg-base-200 sticky top-0 z-10 grid grid-row-2 gap-y-2 w-full bg-opacity-90 py-3 px-2 backdrop-blur lg:hidden ${switchNavbarStyle ? "shadow-sm" : ""}`}>
+  <div class="flex w-full">
     <Search />
   </div>
+  <div class="px-3">
+    <PrefixEdit />
+  </div>
 </div>
 
 <div class="h-4" />

src/docs/src/lib/actions.js

@@ -0,0 +1,21 @@
+export function replace(node, parameters = {}) {
+  const originalContent = node.textContent ?? ''
+  const defaultParameters = {
+    search: '$$',
+    to: '',
+  }
+
+  function update(p) {
+    const { search, to } = {
+      ...defaultParameters,
+      ...p,
+    }
+    node.textContent = originalContent.replaceAll(search, to)
+  }
+
+  update(parameters)
+
+  return {
+    update,
+  }
+}

src/docs/src/lib/store.js → src/docs/src/lib/stores.js

@@ -1,3 +1,5 @@
 import { writable } from "svelte/store"
 
 // export let store = writable();
+
+export const prefix = writable("");