daisyui 1.25.3 → 2.0.0-next.2

package/index.js

@@ -1,16 +1,16 @@
-const daisyuiInfo       = require('./package.json')
-const colors            = require('./colors/index')
-const utilities         = require('./dist/utilities')
-const base              = require('./dist/base')
-const unstyled          = require('./dist/unstyled')
-const unstyledRtl       = require('./dist/unstyled.rtl')
-const styled            = require('./dist/styled')
-const styledRtl         = require('./dist/styled.rtl')
+const daisyuiInfo = require('./package.json')
+const colors = require('./colors/index')
+const utilities = require('./dist/utilities')
+const base = require('./dist/base')
+const unstyled = require('./dist/unstyled')
+const unstyledRtl = require('./dist/unstyled.rtl')
+const styled = require('./dist/styled')
+const styledRtl = require('./dist/styled.rtl')
 const utilitiesUnstyled = require('./dist/utilities-unstyled')
-const utilitiesStyled   = require('./dist/utilities-styled')
-const themes            = require('./colors/themes')
-const colorNames        = require('./colors/colorNames')
-const hex2hsl           = require('./colors/hex2hsl')
+const utilitiesStyled = require('./dist/utilities-styled')
+const themes = require('./colors/themes')
+const colorNames = require('./colors/colorNames')
+const Color = require('color');
 
 const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   let diasyuiIncludedItems = []
@@ -56,9 +56,10 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
     let resultObj = {}
     if (typeof input === 'object' && input !== null) {
       Object.entries(input).forEach(([rule, value]) => {
-        if(colorNames.hasOwnProperty(rule)){
-          resultObj[colorNames[rule]] = hex2hsl(value)
-        }else{
+        if (colorNames.hasOwnProperty(rule)) {
+          const hslArray = Color(value).hsl().round().array()
+          resultObj[colorNames[rule]] = hslArray[0] + " " + hslArray[1] + "%" + " " + hslArray[2] + "%"
+        } else {
           resultObj[rule] = value
           // console.log(input)
         }
@@ -83,48 +84,54 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   }
 
   // add custom themes
-  if(Array.isArray(config('daisyui.themes'))){
+  if (Array.isArray(config('daisyui.themes'))) {
     config('daisyui.themes').forEach((item, index) => {
-      if(typeof item === 'object' && item !== null){
+      if (typeof item === 'object' && item !== null) {
         Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
-          includedThemesObj['[data-theme='+customThemeName+']'] = convertThemeColorsToHsl(customThemevalue)
+          includedThemesObj['[data-theme=' + customThemeName + ']'] = convertThemeColorsToHsl(customThemevalue)
         })
       }
     })
   }
 
   let themeOrder = []
-  if (Array.isArray( config('daisyui.themes') )) {
+  if (Array.isArray(config('daisyui.themes'))) {
     config('daisyui.themes').forEach((theme, index) => {
-      if (typeof theme === 'object' && theme !== null){
+      if (typeof theme === 'object' && theme !== null) {
         Object.entries(theme).forEach(([customThemeName, customThemevalue]) => {
           themeOrder.push(customThemeName)
         })
-      }else if(includedThemesObj.hasOwnProperty('[data-theme='+theme+']')){
+      } else if (includedThemesObj.hasOwnProperty('[data-theme=' + theme + ']')) {
         themeOrder.push(theme)
       }
     })
-  }else if (config('daisyui.themes') != false) {
-    themeOrder= ['light','dark','cupcake','bumblebee','emerald','corporate','synthwave','retro','cyberpunk','valentine','halloween','garden','forest','aqua','lofi','pastel','fantasy','wireframe','black','luxury','dracula','cmyk',]
-  }else if (config('daisyui.themes') == false) {
+  } else if (config('daisyui.themes') != false) {
+    themeOrder = ['light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk',]
+  } else if (config('daisyui.themes') == false) {
     themeOrder.push('light')
   }
 
   // inject themes in order
   themeOrder.forEach((themeName, index) => {
     if (index === 0) { // first theme as root
-      addBase({[':root']: includedThemesObj['[data-theme='+themeName+']']})
-    }else if (index === 1) {
+      addBase({ [':root']: includedThemesObj['[data-theme=' + themeName + ']'] })
+    } else if (index === 1) {
       // auto dark
-      if (themeOrder[0] != 'dark' && themeOrder.includes('dark')){
-        addBase({['@media (prefers-color-scheme: dark)']: {[':root']: includedThemesObj['[data-theme=dark]']}})
+      if (config('daisyui.darkTheme')) {
+        if (themeOrder[0] != config('daisyui.darkTheme') && themeOrder.includes(config('daisyui.darkTheme'))) {
+          addBase({ ['@media (prefers-color-scheme: dark)']: { [':root']: includedThemesObj[`[data-theme=${config('daisyui.darkTheme')}]`] } })
+        }
+      } else {
+        if (themeOrder[0] != 'dark' && themeOrder.includes('dark')) {
+          addBase({ ['@media (prefers-color-scheme: dark)']: { [':root']: includedThemesObj['[data-theme=dark]'] } })
+        }
       }
       // theme 0 with name
-      addBase({['[data-theme='+themeOrder[0]+']']: includedThemesObj['[data-theme='+themeOrder[0]+']']})
+      addBase({ ['[data-theme=' + themeOrder[0] + ']']: includedThemesObj['[data-theme=' + themeOrder[0] + ']'] })
       // theme 1 with name
-      addBase({['[data-theme='+themeOrder[1]+']']: includedThemesObj['[data-theme='+themeOrder[1]+']']})
-    }else{
-      addBase({['[data-theme='+themeName+']']: includedThemesObj['[data-theme='+themeName+']']})
+      addBase({ ['[data-theme=' + themeOrder[1] + ']']: includedThemesObj['[data-theme=' + themeOrder[1] + ']'] })
+    } else {
+      addBase({ ['[data-theme=' + themeName + ']']: includedThemesObj['[data-theme=' + themeName + ']'] })
     }
   })
   diasyuiIncludedItems.push('themes[' + themeOrder.length + ']')
@@ -139,40 +146,14 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   }
   if (logs) {
     console.log('\x1b[32m%s\x1b[0m', '✔︎ Including:', '\x1b[0m', '' + diasyuiIncludedItems.join(', '));
-    if (isTailwindInstalled === false) {
-      console.log(`\n\x1b[33;1m! warning\x1b[0m - unable to require \x1b[36mtailwindcss/plugin\x1b[0m
-daisyUI color are now only available for daisyUI components.
-If you want to use daisyUI color as utility classes (like 'bg-primary')
-you need to add this to your \x1b[34mtailwind.config.js\x1b[0m file:
-───────────────────────────────────────
-\x1b[34mmodule.exports = {
-  \x1b[32mtheme: {
-    extend: {
-      colors: require('daisyui/colors'),
-    },
-  },\x1b[0m
-\x1b[34m}\x1b[0m
-───────────────────────────────────────  
-      `)
-    }
     console.log()
     console.groupEnd()
   }
 }
 
-// check if tailwindcss package exists
-let isTailwindInstalled = false;
-try {
-  require.resolve('tailwindcss/plugin')
-  isTailwindInstalled = true
-} catch (er) {
-  isTailwindInstalled = false
-}
-if (isTailwindInstalled !== false) {
-  module.exports = require("tailwindcss/plugin")(
-    mainFunction, { theme: { extend: { colors } } }
-  );
-} else {
-  module.exports = mainFunction;
-}
+
+module.exports = require("tailwindcss/plugin")(
+  mainFunction, { theme: { extend: { colors } } }
+);
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "1.25.3",
+  "version": "2.0.0-next.2",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -35,6 +35,9 @@
     "index.js",
     "colors"
   ],
+  "browserslist": [
+    "> 7%"
+  ],
   "publishConfig": {
     "access": "public",
     "branches": [
@@ -49,8 +52,7 @@
     "postcss-import": "13.0.0",
     "postcss-nested": "5.0.1",
     "prejss-cli": "0.3.3",
-    "rtlcss": "3.0.0",
-    "tailwindcss": "2.0.1"
+    "rtlcss": "3.0.0"
   },
   "scripts": {
     "index": "cp -R ./src/index.js ./index.js",
@@ -80,5 +82,9 @@
     "dev": "cd src/docs && npm run dev",
     "add": "touch src/components/unstyled/$npm_config_name.css && touch src/components/styled/$npm_config_name.css",
     "postadd": "open src/components/unstyled/$npm_config_name.css && open src/components/styled/$npm_config_name.css"
+  },
+  "dependencies": {
+    "color": "^4.2",
+    "tailwindcss": "^3.0"
   }
 }