daisyui 3.9.2 → 4.0.0-alpha.1

package/dist/full.css

@@ -1206,7 +1206,8 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 abbr:where([title]) {
-  text-decoration: underline dotted;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 /*
 Remove the default font size and weight for headings.
@@ -1539,7 +1540,9 @@ html {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 200ms;
@@ -1699,14 +1702,17 @@ html {
     display: inline-flex;
     flex-shrink: 0;
     cursor: pointer;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     border-color: transparent;
     border-color: hsl(var(--b2) / var(--tw-border-opacity));
     text-align: center;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 200ms;
@@ -2036,7 +2042,9 @@ html {
     grid-column-start: 1;
     grid-row-start: 1}
 .drawer-side > *:not(.drawer-overlay) {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 300ms;
@@ -2080,7 +2088,9 @@ html {
     --tw-scale-x: .95;
     --tw-scale-y: .95;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 200ms}
@@ -2290,7 +2300,8 @@ html {
     height: 100%;
     flex-shrink: 0;
     cursor: pointer;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
@@ -2300,7 +2311,9 @@ html {
     font-size: 0.875rem;
     line-height: 1.25rem;
     line-height: 1em;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 200ms;
@@ -2345,7 +2358,8 @@ html {
     flex-direction: column}
 .label {
     display: flex;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     align-items: center;
     justify-content: space-between;
     padding-left: 0.25rem;
@@ -2548,10 +2562,12 @@ html {
     align-items: center;
     gap: 0.5rem;
     grid-auto-columns: minmax(auto, max-content) auto max-content;
-    user-select: none}
+    -webkit-user-select: none;
+            user-select: none}
 .menu li.disabled {
     cursor: not-allowed;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     color: hsl(var(--bc) / 0.3)}
 .menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
     display: none}
@@ -2638,7 +2654,9 @@ html {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--b1) / var(--tw-bg-opacity));
     padding: 1.5rem;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 200ms;
@@ -2776,7 +2794,8 @@ html {
 .select {
     display: inline-flex;
     cursor: pointer;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     appearance: none;
     height: 3rem;
     padding-left: 1rem;
@@ -2885,7 +2904,8 @@ html {
 .swap {
     position: relative;
     display: inline-grid;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     place-content: center;
     cursor: pointer}
 .swap > * {
@@ -2916,7 +2936,8 @@ html {
     position: relative;
     display: inline-flex;
     cursor: pointer;
-    user-select: none;
+    -webkit-user-select: none;
+            user-select: none;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
@@ -4181,7 +4202,9 @@ details.collapse summary::-webkit-details-marker {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     text-align: left;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
     transition-duration: 200ms;
@@ -22686,7 +22709,9 @@ details.collapse summary::-webkit-details-marker {
 .ring-offset-warning\/95 {
     --tw-ring-offset-color: hsl(var(--wa) / 0.95)}
 .transition {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms}
 .transition-all {
@@ -22740,7 +22765,8 @@ details.collapse summary::-webkit-details-marker {
 .glass,
   .glass.btn-active {
     border: none;
-    backdrop-filter: blur(var(--glass-blur, 40px));
+    -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
+            backdrop-filter: blur(var(--glass-blur, 40px));
     background-color: transparent;
     background-image: linear-gradient(
         135deg,
@@ -22758,7 +22784,8 @@ details.collapse summary::-webkit-details-marker {
 @media (hover: hover) {
     .glass.btn-active {
         border: none;
-        backdrop-filter: blur(var(--glass-blur, 40px));
+        -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
+                backdrop-filter: blur(var(--glass-blur, 40px));
         background-color: transparent;
         background-image: linear-gradient(
           135deg,
@@ -23819,7 +23846,9 @@ details.collapse summary::-webkit-details-marker {
 .tooltip:before,
 .tooltip:after {
     opacity: 0;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
     transition-delay: 100ms;
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "3.9.2",
+  "version": "4.0.0-alpha.1",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -77,15 +77,14 @@
     "prejss-cli": "0.3.3",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "rtlcss": "4.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.6",
+    "rtlcss": "4.1.1",
     "standard-version": "^9.5.0"
   },
   "dependencies": {
     "colord": "^2.9",
     "css-selector-tokenizer": "^0.8",
-    "postcss": "^8",
-    "postcss-js": "^4",
-    "tailwindcss": "^3.1"
+    "picocolors": "^1",
+    "postcss-js": "^4"
   }
 }

package/src/index.js

@@ -1,6 +1,9 @@
-const tailwindColors = require("tailwindcss/colors")
+// const tailwindColors = require("tailwindcss/colors")
+// const tailwindPlugin = require("tailwindcss/plugin")
+const tailwindPlugin = require("./lib/createPlugin")
 
 const postcssJs = require("postcss-js")
+const pc = require("picocolors")
 const postcssPrefix = require("./lib/addPrefix")
 
 const daisyuiInfo = require("../package.json")
@@ -23,7 +26,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   }
   if (logs) {
     console.log()
-    console.log("╭── 🌼\x1b[35m daisyUI " + daisyuiInfo.version, "\x1b[0m" + daisyuiInfo.homepage)
+    console.log(`╭─ 🌼 ${pc.magenta("daisyUI")} ${pc.dim(daisyuiInfo.version)} ${pc.dim(daisyuiInfo.homepage)}`)
   }
 
   // inject @base style
@@ -84,90 +87,49 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   if (logs) {
     console.log("│")
     if (config("daisyui.styled") == false) {
-      console.log(
-        "├──",
-        "daisyui.styled",
-        "\x1b[0m" + "config is",
-        "\x1b[2m" + "false" + "\x1b[0m",
-        "– your components will have no design decisions" + "\n│"
-      )
+      console.log(`├─ ${pc.yellow("ℹ︎")} ${pc.blue("daisyui.styled")} ${pc.reset("config is")} ${pc.blue("false")} ${pc.dim("– components will have no design decisions")}\n│`)
     }
     if (config("daisyui.utils") == false) {
-      console.log(
-        "├──",
-        "daisyui.utils",
-        "\x1b[0m" + "config is",
-        "\x1b[2m" + "false" + "\x1b[0m",
-        "– daisyUI modifier utility classes are disabled" + "\n│"
-      )
+      console.log(`├─ ${pc.yellow("ℹ︎")} ${pc.blue("daisyui.utils")} ${pc.reset("config is")} ${pc.blue("false")} ${pc.dim("– daisyUI utility classes are disabled")}\n│`)
     }
     if (config("daisyui.prefix") && config("daisyui.prefix") !== "") {
-      console.log(
-        "├──",
-        "\x1b[2m" + "prefix" + "\x1b[0m",
-        "is enabled, daisyUI classnames must use",
-        "\x1b[2m" + `${config("daisyui.prefix")}`,
-        "\x1b[0m" + "prefix. like:",
-        "\x1b[2m" + `${config("daisyui.prefix")}btn`,
-        "\x1b[0m" + "\n│   https://daisyui.com/docs/config" + "\n│"
-      )
+      console.log(`├─ ${pc.green('✔︎')} ${pc.blue("prefix")} is enabled – ${pc.dim("daisyUI classnames must use")} ${pc.blue(config("daisyui.prefix"))} ${pc.dim("prefix. like:")} ${pc.blue(`${config("daisyui.prefix")}btn`)}\n│    ${pc.dim("https://daisyui.com/docs/config")}\n│`)
     }
     if (config("daisyui.rtl") == true) {
-      console.log(
-        "├──",
-        "Using RTL, make sure you're using",
-        "\x1b[2m" + "<html dir=rtl>" + "\x1b[0m",
-        "and you have",
-        "\x1b[2mtailwindcss-flip\x1b[0m",
-        "plugin",
-        "\n│   https://daisyui.com/docs/config" + "\n│"
-      )
+      console.log(`├─ ${pc.green('✔︎')} ${pc.blue("RTL")} is enabled – ${pc.dim("make sure you're using")} ${pc.blue("<html dir=rtl>")} ${pc.dim("and you have")} ${pc.blue("tailwindcss-flip")} ${pc.dim("plugin")}\n│    ${pc.dim("https://daisyui.com/docs/config")}\n│`)
     }
     if (themeInjectorHsl.themeOrder.length > 0) {
-      console.log(
-        "├──",
-        "\x1b[2m" +
-          `${themeInjectorHsl.themeOrder.length}` +
-          "\x1b[0m" +
-          ` ${themeInjectorHsl.themeOrder.length > 1 ? "themes are" : "theme is"}` +
-          ` enabled. How to add more themes:` +
-          "\n│   https://daisyui.com/docs/themes" +
-          "\n│"
-      )
+      console.log(`├─ ${pc.green('✔︎')} ${themeInjectorHsl.themeOrder.length} ${themeInjectorHsl.themeOrder.length > 1 ? "themes" : "theme"} added\n│    ${pc.dim('How to add more: https://daisyui.com/docs/themes')}\n│`)
     }
     if (themeInjectorHsl.themeOrder.length === 0) {
-      console.log(
-        "├──",
-        `All themes are disabled in config. How to add themes:` +
-          "\n│   https://daisyui.com/docs/themes" +
-          "\n│"
-      )
+      console.log(`├─ ${pc.yellow('ℹ︎')} All themes are disabled in config\n│    ${pc.dim('How to add themes: https://daisyui.com/docs/themes')}\n│`)
     }
     let messages = [
-      `\x1b[32m💚 Support daisyUI project\x1b[0m: ${daisyuiInfo.funding.url}`,
-      `\x1b[32m⭐️ Star daisyUI project on GitHub\x1b[0m: https://github.com/saadeghi/daisyui`,
+      `${pc.reset('Support daisyUI project:')} ${pc.dim(daisyuiInfo.funding.url)}`,
+      `${pc.reset('Star daisyUI project on GitHub:')} ${pc.dim('https://github.com/saadeghi/daisyui')}`,
     ]
-    console.log("╰── " + messages[Math.floor(Math.random() * messages.length)])
+    console.log(`╰─ ${pc.green('❤︎')} ${messages[Math.floor(Math.random() * messages.length)]}`)
     console.log()
   }
 }
 
-module.exports = require("tailwindcss/plugin")(mainFunction, {
+module.exports = tailwindPlugin(mainFunction, {
   theme: {
     extend: {
       colors: {
         ...colors,
         // adding all Tailwind `neutral` shades here so they don't get overridden by daisyUI `neutral` color
-        "neutral-50": tailwindColors.neutral[50],
-        "neutral-100": tailwindColors.neutral[100],
-        "neutral-200": tailwindColors.neutral[200],
-        "neutral-300": tailwindColors.neutral[300],
-        "neutral-400": tailwindColors.neutral[400],
-        "neutral-500": tailwindColors.neutral[500],
-        "neutral-600": tailwindColors.neutral[600],
-        "neutral-700": tailwindColors.neutral[700],
-        "neutral-800": tailwindColors.neutral[800],
-        "neutral-900": tailwindColors.neutral[900],
+        "neutral-50": "#fafafa",
+        "neutral-100": "#f5f5f5",
+        "neutral-200": "#e5e5e5",
+        "neutral-300": "#d4d4d4",
+        "neutral-400": "#a3a3a3",
+        "neutral-500": "#737373",
+        "neutral-600": "#525252",
+        "neutral-700": "#404040",
+        "neutral-800": "#262626",
+        "neutral-900": "#171717",
+        "neutral-950": "#0a0a0a",
       },
     },
   },

package/src/lib/createPlugin.js

@@ -0,0 +1,21 @@
+function createPlugin(plugin, config) {
+  return {
+    handler: plugin,
+    config,
+  }
+}
+createPlugin.withOptions = function (pluginFunction, configFunction = () => ({})) {
+  const optionsFunction = function (options) {
+    return {
+      __options: options,
+      handler: pluginFunction(options),
+      config: configFunction(options),
+    }
+  }
+  optionsFunction.__isOptionsFunction = true
+  optionsFunction.__pluginFunction = pluginFunction
+  optionsFunction.__configFunction = configFunction
+  return optionsFunction
+}
+
+module.exports = createPlugin