feat: invalid color value in config now shows an error

saadeghi · Nov 17, 2023 · 41ee386 · 41ee386
1 parent 09723e3
commit 41ee386
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "4.3.2-alpha.0",
+  "version": "4.3.1",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",

diff --git a/src/experiments/playground/package-lock.json b/src/experiments/playground/package-lock.json
diff --git a/src/experiments/playground/package.json b/src/experiments/playground/package.json
@@ -13,7 +13,7 @@
     "@tailwindcss/typography": "0.5.10",
     "astro": "3.2.2",
     "autoprefixer": "^10.4.16",
-    "daisyui": "3.8.3",
+    "daisyui": "^4.3.1",
     "tailwindcss": "3.3.3",
     "tailwindcss-flip": "1.0.0"
   }

diff --git a/src/experiments/playground/tailwind.config.js b/src/experiments/playground/tailwind.config.js
@@ -1,16 +1,29 @@
 const plugin = require("tailwindcss/plugin")
-
+const themes = require("daisyui/src/theming/themes")
 module.exports = {
   content: ["./src/**/*.{astro,html,svelte,vue,js,ts,jsx,tsx}"],
   daisyui: {
     themes: [
       {
-        acid: {
-          ...require("../../theming/themes")["acid"],
-          primary: "red",
+        light: {
+          ...themes["light"],
+          primary: "x",
+        },
+        dark: {
+          ...themes["dark"],
+          primary: "#ffffff",
         },
       },
     ],
+
+    // themes: [
+    //   {
+    //     acid: {
+    //       ...require("../../theming/themes")["acid"],
+    //       primary: "red",
+    //     },
+    //   },
+    // ],
     // styled: 0,
     // base: 0,
     // utils: 0,
@@ -24,7 +37,7 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("../../"),
-    // require('daisyui'),
+    // require("daisyui"),
     // require("tailwindcss-flip"),
   ],
 }
diff --git a/src/theming/functions.js b/src/theming/functions.js
@@ -1,16 +1,39 @@
+const pc = require("picocolors")
 const colorNames = require("./colorNames")
 const themeDefaults = require("./themeDefaults")
 
 const { oklch, interpolate, wcagContrast } = require("culori/require")
 
-const cutNumber = (number) => (number ? +number.toFixed(6) : 0)
-
+const colorIsInvalid = (input) => {
+  console.error(
+    `├─ ${pc.red("⚠︎")} ${pc.bgRed(" Error ")} Invalid color ${pc.red(input)} in ${pc.green(
+      "tailwind.config.js"
+    )}`
+  )
+}
+const cutNumber = (number) => {
+  try {
+    if (number) {
+      return +number.toFixed(6)
+    } else {
+      return 0
+    }
+  } catch (e) {
+    // colorIsInvalid(number)
+    return false
+  }
+}
 module.exports = {
   isDark: (color) => {
-    if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
-      return true
+    try {
+      if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
+        return true
+      }
+      return false
+    } catch (e) {
+      // colorIsInvalid(color)
+      return false
     }
-    return false
   },
 
   colorObjToString: function (input) {
@@ -19,13 +42,26 @@ module.exports = {
   },
 
   generateForegroundColorFrom: function (input, percentage = 0.8) {
-    const result = interpolate([input, this.isDark(input) ? "white" : "black"], "oklch")(percentage)
-    return this.colorObjToString(result)
+    try {
+      const result = interpolate(
+        [input, this.isDark(input) ? "white" : "black"],
+        "oklch"
+      )(percentage)
+      return this.colorObjToString(result)
+    } catch (e) {
+      // colorIsInvalid(input)
+      return false
+    }
   },
 
   generateDarkenColorFrom: function (input, percentage = 0.07) {
-    const result = interpolate([input, "black"], "oklch")(percentage)
-    return this.colorObjToString(result)
+    try {
+      const result = interpolate([input, "black"], "oklch")(percentage)
+      return this.colorObjToString(result)
+    } catch (e) {
+      // colorIsInvalid(input)
+      return false
+    }
   },
 
   convertColorFormat: function (input) {
@@ -37,8 +73,13 @@ module.exports = {
 
     Object.entries(input).forEach(([rule, value]) => {
       if (Object.hasOwn(colorNames, rule)) {
-        const colorObj = oklch(value)
-        resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
+        try {
+          const colorObj = oklch(value)
+          resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
+        } catch (e) {
+          colorIsInvalid(value)
+          return false
+        }
       } else {
         resultObj[rule] = value
       }