daisyui 5.7.4 → 5.7.6

package/functions/addPrefix.js

@@ -1,5 +1,23 @@
 const defaultExcludedPrefixes = ["color-", "size-", "radius-", "border", "depth", "noise"]
-const excludedSelectors = ["prose"]
+const excludedSelectors = [
+  "prose",
+  "is-hidden",
+  "is-bound",
+  "is-disabled",
+  "is-today",
+  "is-selected",
+  "has-event",
+  "is-inrange",
+  "is-startrange",
+  "is-endrange",
+  "is-outside-current-month",
+  "is-selection-disabled",
+  "pick-whole-week",
+]
+const shouldExcludeSelector = (selector) => {
+  const selectorName = selector.match(/^[\w-]+/)?.[0] || selector
+  return excludedSelectors.includes(selectorName) || /^(rdp|pika|vc)-/.test(selectorName)
+}
 
 const shouldExcludeVariable = (variableName, excludedPrefixes) => {
   if (variableName.startsWith("tw")) {
@@ -17,47 +35,37 @@ const prefixVariable = (variableName, prefix, excludedPrefixes) => {
 
 const getPrefixedSelector = (selector, prefix) => {
   if (!selector.startsWith(".")) return selector
-  if (excludedSelectors.includes(selector.slice(1))) return selector
+  if (shouldExcludeSelector(selector.slice(1))) return selector
   return `.${prefix}${selector.slice(1)}`
 }
 
 const getPrefixedKey = (key, prefix, excludedPrefixes) => {
-  const prefixAmpDot = prefix ? `&.${prefix}` : ""
-
   if (!prefix) return key
 
-  if (key.startsWith(".") && excludedSelectors.includes(key.slice(1))) return key
+  if (key.startsWith(".") && shouldExcludeSelector(key.slice(1))) return key
 
   if (key.startsWith("--")) {
     const variableName = key.slice(2)
     return `--${prefixVariable(variableName, prefix, excludedPrefixes)}`
   }
 
+  if (key.startsWith("@property --")) {
+    return processStringValue(key, prefix, excludedPrefixes)
+  }
+
   if (key.startsWith("@") || key.startsWith("[")) {
     return key
   }
 
   if (key.startsWith("&")) {
-    // If it's a complex selector with :not(), :has(), etc.
-    if (key.match(/:[a-z-]+\(/)) {
-      return key.replace(/\.([\w-]+)/g, (m, cls) =>
-        excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
-      )
-    }
-    // For simple &. cases
-    if (key.startsWith("&.")) {
-      if (excludedSelectors.includes(key.slice(2))) return key
-      return `${prefixAmpDot}${key.slice(2)}`
-    }
-    // For other & cases (like &:hover or &:not(...))
     return key.replace(/\.([\w-]+)/g, (m, cls) =>
-      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+      shouldExcludeSelector(cls) ? `.${cls}` : `.${prefix}${cls}`,
     )
   }
 
   if (key.startsWith(":")) {
     return key.replace(/\.([\w-]+)/g, (m, cls) =>
-      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+      shouldExcludeSelector(cls) ? `.${cls}` : `.${prefix}${cls}`,
     )
   }
 
@@ -68,12 +76,9 @@ const getPrefixedKey = (key, prefix, excludedPrefixes) => {
     !key.includes("+") &&
     !key.includes("~")
   ) {
-    return key
-      .split(".")
-      .filter(Boolean)
-      .map((part) => (excludedSelectors.includes(part) ? part : prefix + part))
-      .join(".")
-      .replace(/^/, ".")
+    return key.replace(/\.([\w-]+)/g, (m, cls) =>
+      shouldExcludeSelector(cls) ? `.${cls}` : `.${prefix}${cls}`,
+    )
   }
 
   if (key.includes(">") || key.includes("+") || key.includes("~")) {
@@ -84,7 +89,7 @@ const getPrefixedKey = (key, prefix, excludedPrefixes) => {
         .map((part) => {
           // Replace class names with prefixed versions for each part
           return part.replace(/\.([\w-]+)/g, (m, cls) =>
-            excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+            shouldExcludeSelector(cls) ? `.${cls}` : `.${prefix}${cls}`,
           )
         })
         .join(", ")
@@ -92,7 +97,7 @@ const getPrefixedKey = (key, prefix, excludedPrefixes) => {
 
     // For simple combinators (not comma-separated)
     let processedKey = key.replace(/\.([\w-]+)/g, (m, cls) =>
-      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+      shouldExcludeSelector(cls) ? `.${cls}` : `.${prefix}${cls}`,
     )
 
     // Add a space before combinators at the beginning
@@ -112,9 +117,7 @@ const getPrefixedKey = (key, prefix, excludedPrefixes) => {
       .split(/\s+/)
       .map((part) => {
         if (part.startsWith(".")) {
-          return excludedSelectors.includes(part.slice(1))
-            ? part
-            : getPrefixedSelector(part, prefix)
+          return shouldExcludeSelector(part.slice(1)) ? part : getPrefixedSelector(part, prefix)
         }
         return part
       })
@@ -124,15 +127,15 @@ const getPrefixedKey = (key, prefix, excludedPrefixes) => {
   if (key.includes(":")) {
     const [selector, ...pseudo] = key.split(":")
     if (selector.startsWith(".")) {
-      return `${excludedSelectors.includes(selector.slice(1)) ? selector : getPrefixedSelector(selector, prefix)}:${pseudo.join(":")}`
+      return `${shouldExcludeSelector(selector.slice(1)) ? selector : getPrefixedSelector(selector, prefix)}:${pseudo.join(":")}`
     }
     return key.replace(/\.([\w-]+)/g, (m, cls) =>
-      excludedSelectors.includes(cls) ? `.${cls}` : `.${prefix}${cls}`,
+      shouldExcludeSelector(cls) ? `.${cls}` : `.${prefix}${cls}`,
     )
   }
 
   if (key.startsWith(".")) {
-    return excludedSelectors.includes(key.slice(1)) ? key : getPrefixedSelector(key, prefix)
+    return shouldExcludeSelector(key.slice(1)) ? key : getPrefixedSelector(key, prefix)
   }
 
   return key
@@ -142,7 +145,7 @@ const processArrayValue = (value, prefix, excludedPrefixes) => {
   return value.map((item) => {
     if (typeof item === "string") {
       if (item.startsWith(".")) {
-        return excludedSelectors.includes(item.slice(1))
+        return shouldExcludeSelector(item.slice(1))
           ? item
           : prefix
             ? `.${prefix}${item.slice(1)}`
@@ -154,14 +157,14 @@ const processArrayValue = (value, prefix, excludedPrefixes) => {
   })
 }
 
-const reVariableName = /var\s*\(\s*--([a-zA-Z0-9_-]+)/g
+const reVariableName = /--([a-zA-Z0-9_-]+)/g
 const processStringValue = (value, prefix, excludedPrefixes) => {
   if (prefix === 0) return value
   return value.replace(reVariableName, (match, variableName) => {
     if (shouldExcludeVariable(variableName, excludedPrefixes)) {
       return match
     }
-    return `var(--${prefix}${variableName}`
+    return `--${prefix}${variableName}`
   })
 }
 

package/functions/nestCssLayers.js

@@ -0,0 +1,43 @@
+const appendRule = (styles, selector, rule) => {
+  const currentRule = styles[selector]
+
+  if (currentRule === undefined) {
+    styles[selector] = rule
+    return
+  }
+
+  styles[selector] = Array.isArray(currentRule) ? [...currentRule, rule] : [currentRule, rule]
+}
+
+const wrapWithAtRules = (rule, atRules) =>
+  atRules.reduceRight((wrappedRule, atRule) => ({ [atRule]: wrappedRule }), rule)
+
+const moveLayerRules = (styles, layerValue, atRules) => {
+  const layerBlocks = Array.isArray(layerValue) ? layerValue : [layerValue]
+
+  for (const layerBlock of layerBlocks) {
+    for (const [key, value] of Object.entries(layerBlock)) {
+      if (key.startsWith("@")) {
+        moveLayerRules(styles, value, [...atRules, key])
+        continue
+      }
+
+      appendRule(styles, key, wrapWithAtRules(value, atRules))
+    }
+  }
+}
+
+export const nestCssLayers = (styles) => {
+  const nestedStyles = {}
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (key.startsWith("@layer ")) {
+      moveLayerRules(nestedStyles, value, [key])
+      continue
+    }
+
+    appendRule(nestedStyles, key, value)
+  }
+
+  return nestedStyles
+}

package/functions/themeOrder.d.ts

@@ -0,0 +1,2 @@
+declare const themeOrder: readonly string[]
+export default themeOrder

package/functions/variables.d.ts

@@ -0,0 +1,32 @@
+declare module 'daisyui/functions/variables' {
+  const variables: {
+    colors: {
+      "base-100": string;
+      "base-200": string;
+      "base-300": string;
+      "base-content": string;
+      primary: string;
+      "primary-content": string;
+      secondary: string;
+      "secondary-content": string;
+      accent: string;
+      "accent-content": string;
+      neutral: string;
+      "neutral-content": string;
+      info: string;
+      "info-content": string;
+      success: string;
+      "success-content": string;
+      warning: string;
+      "warning-content": string;
+      error: string;
+      "error-content": string;
+    };
+    borderRadius: {
+      selector: string;
+      field: string;
+      box: string;
+    };
+  };
+  export default variables;
+}

package/index.js

@@ -1,6 +1,7 @@
-const version = "5.7.4"
+const version = "5.7.6"
 import { pluginOptionsHandler } from "./functions/pluginOptionsHandler.js"
 import { plugin } from "./functions/plugin.js"
+import { nestCssLayers } from "./functions/nestCssLayers.js"
 import variables from "./functions/variables.js"
 import themesObject from "./theme/object.js"
 import { base, components, utilities } from "./imports.js"
@@ -34,12 +35,18 @@ export default plugin.withOptions(
 
       Object.entries(components).forEach(([name, item]) => {
         if (!shouldIncludeItem(name)) return
-        item({ addComponents, prefix })
+        item({
+          addComponents: (styles) => addComponents(nestCssLayers(styles)),
+          prefix,
+        })
       })
 
       Object.entries(utilities).forEach(([name, item]) => {
         if (!shouldIncludeItem(name)) return
-        item({ addUtilities, prefix })
+        item({
+          addUtilities: (styles) => addUtilities(nestCssLayers(styles)),
+          prefix,
+        })
       })
 
       // drawer variants. Can not be nested in layers so defined here

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "daisyui",
-  "version": "5.7.4",
+  "version": "5.7.6",
   "description": "daisyUI 5 - The Tailwind CSS Component Library",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -50,6 +50,21 @@
   "browser": "./daisyui.css",
   "exports": {
     ".": "./index.js",
+    "./theme": {
+      "default": "./theme/index.js"
+    },
+    "./theme/object": {
+      "types": "./theme/object.d.ts",
+      "default": "./theme/object.js"
+    },
+    "./functions/themeOrder": {
+      "types": "./functions/themeOrder.d.ts",
+      "default": "./functions/themeOrder.js"
+    },
+    "./functions/variables": {
+      "types": "./functions/variables.d.ts",
+      "default": "./functions/variables.js"
+    },
     "./*": "./*"
   },
   "files": [
@@ -58,10 +73,13 @@
     "components",
     "!components/*/class.json",
     "functions/addPrefix.js",
+    "functions/nestCssLayers.js",
     "functions/plugin.js",
     "functions/pluginOptionsHandler.js",
     "functions/themeOrder.js",
+    "functions/themeOrder.d.ts",
     "functions/variables.js",
+    "functions/variables.d.ts",
     "theme",
     "utilities",
     "imports.js",

package/theme/index.js

@@ -1,18 +1,25 @@
 import { plugin } from "../functions/plugin.js"
 import allThemes from "./object.js"
 
+const escapeCssString = (value) =>
+  String(value).replace(
+    /[^a-zA-Z0-9_-]/gu,
+    (character) => `\\${character.codePointAt(0).toString(16)} `,
+  )
+
 export default plugin.withOptions((options = {}) => {
   return ({ addBase }) => {
     const {
       name = "custom-theme",
       default: isDefault = false,
       prefersdark = false,
-      "color-scheme": colorScheme = "normal",
+      "color-scheme": colorScheme,
       root = ":root",
       ...customThemeTokens
     } = options
 
-    let selector = `${root}:has(input.theme-controller[value=${name}]:checked),[data-theme="${name}"]`
+    const escapedName = escapeCssString(name)
+    let selector = `${root}:has(input.theme-controller[value="${escapedName}"]:checked),[data-theme="${escapedName}"]`
     if (isDefault) {
       selector = `:where(${root}),${selector}`
     }
@@ -24,13 +31,13 @@ export default plugin.withOptions((options = {}) => {
       themeTokens = {
         ...builtinTheme,
         ...customThemeTokens,
-        "color-scheme": colorScheme || builtinTheme.colorScheme,
+        "color-scheme": colorScheme ?? builtinTheme["color-scheme"],
       }
     }
 
     const baseStyles = {
       [selector]: {
-        "color-scheme": themeTokens["color-scheme"] || colorScheme,
+        "color-scheme": themeTokens["color-scheme"] ?? colorScheme ?? "normal",
         ...themeTokens,
       },
     }

package/theme/object.d.ts

@@ -33,39 +33,39 @@ interface Theme {
 
 interface Themes {
   black: Theme
-  silk: Theme
-  halloween: Theme
-  forest: Theme
-  retro: Theme
   light: Theme
   lemonade: Theme
-  caramellatte: Theme
-  nord: Theme
   fantasy: Theme
   autumn: Theme
   corporate: Theme
   cupcake: Theme
   night: Theme
-  abyss: Theme
   synthwave: Theme
+  abyss: Theme
   dim: Theme
   bumblebee: Theme
-  luxury: Theme
-  cyberpunk: Theme
+  caramellatte: Theme
+  silk: Theme
+  forest: Theme
+  halloween: Theme
+  retro: Theme
+  nord: Theme
   dark: Theme
+  sunset: Theme
   aqua: Theme
-  wireframe: Theme
   acid: Theme
-  winter: Theme
-  cmyk: Theme
-  sunset: Theme
+  wireframe: Theme
   emerald: Theme
+  cmyk: Theme
   dracula: Theme
-  lofi: Theme
-  garden: Theme
-  business: Theme
   pastel: Theme
+  cyberpunk: Theme
+  business: Theme
+  garden: Theme
+  lofi: Theme
   coffee: Theme
+  luxury: Theme
+  winter: Theme
   valentine: Theme
   [key: string]: Theme
 }