daisyui 4.3.0-alpha.7 → 4.3.0-alpha.8

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "daisyui",
-  "version": "4.3.0-alpha.7",
+  "version": "4.3.0-alpha.8",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
   "homepage": "https://daisyui.com",
-  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/saadeghi/daisyui.git"
@@ -33,16 +32,16 @@
     "ui"
   ],
   "main": "src/index.js",
-  "module": "src/index.js",
+  "typings": "src/index.d.ts",
   "types": "src/index.d.ts",
   "files": [
-    "themes.js",
     "src/lib/**/*.js",
-    "dist/*.cjs",
+    "dist/*.js",
     "dist/{themes,styled,unstyled,full}.css",
     "src/index.js",
     "src/theming/*.js",
-    "src/**/*.d.ts"
+    "src/theming/*.d.ts",
+    "src/index.d.ts"
   ],
   "engines": {
     "node": ">=16.9.0"

package/src/index.js

@@ -1,22 +1,22 @@
 // const tailwindColors = require("tailwindcss/colors")
 // const tailwindPlugin = require("tailwindcss/plugin")
-import tailwindPlugin from "./lib/createPlugin"
+const tailwindPlugin = require("./lib/createPlugin")
 
-import { sync } from "postcss-js"
-import { magenta, dim, yellow, blue, reset, green } from "picocolors"
-import postcssPrefix from "./lib/addPrefix"
+const postcssJs = require("postcss-js")
+const pc = require("picocolors")
+const postcssPrefix = require("./lib/addPrefix")
 
-import { version, funding } from "../package.json"
-import utilities from "../dist/utilities.cjs"
-import base from "../dist/base.cjs"
-import unstyled from "../dist/unstyled.cjs"
-import styled from "../dist/styled.cjs"
-import utilitiesUnstyled from "../dist/utilities-unstyled.cjs"
-import utilitiesStyled from "../dist/utilities-styled.cjs"
-import { themes } from "./theming/themes"
-import { injectThemes } from "./theming/functions"
-import { utilityClasses } from "./lib/utility-classes"
-import colorObject from "./theming/index"
+const daisyuiInfo = require("../package.json")
+const utilities = require("../dist/utilities")
+const base = require("../dist/base")
+const unstyled = require("../dist/unstyled")
+const styled = require("../dist/styled")
+const utilitiesUnstyled = require("../dist/utilities-unstyled")
+const utilitiesStyled = require("../dist/utilities-styled")
+const themes = require("./theming/themes")
+const colorFunctions = require("./theming/functions")
+const utilityClasses = require("./lib/utility-classes")
+let colorObject = require("./theming/index")
 
 const mainFunction = ({ addBase, addComponents, config }) => {
   let logs = false
@@ -25,7 +25,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   }
   if (logs) {
     console.log()
-    console.log(`🌼   ${magenta("daisyUI")} ${dim(version)}`)
+    console.log(`🌼   ${pc.magenta("daisyUI")} ${pc.dim(daisyuiInfo.version)}`)
   }
 
   // inject @base style
@@ -44,7 +44,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   let postcssJsProcess
   if (prefix) {
     try {
-      postcssJsProcess = sync(postcssPrefix({ prefix, ignore: [] }))
+      postcssJsProcess = postcssJs.sync(postcssPrefix({ prefix, ignore: [] }))
     } catch (error) {
       logs && console.error(`Error occurred and prevent applying the "prefix" option:`, error)
     }
@@ -56,7 +56,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
 
   addComponents(file)
 
-  const themeInjector = injectThemes(addBase, config, themes)
+  const themeInjector = colorFunctions.injectThemes(addBase, config, themes)
   themeInjector
 
   // inject @utilities style needed by components
@@ -79,42 +79,44 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   if (logs) {
     if (config("daisyui.styled") == false) {
       console.log(
-        `├─ ${yellow("ℹ︎")} ${blue("styled")} ${reset("config is")} ${blue("false")} ${dim(
-          "\tcomponents won't have design decisions"
-        )}`
+        `├─ ${pc.yellow("ℹ︎")} ${pc.blue("styled")} ${pc.reset("config is")} ${pc.blue(
+          "false"
+        )} ${pc.dim("\tcomponents won't have design decisions")}`
       )
     }
     if (config("daisyui.utils") == false) {
       console.log(
-        `├─ ${yellow("ℹ︎")} ${blue("utils")} ${reset("config is")} ${blue("false")} ${dim(
-          "\tdaisyUI utility classes are disabled"
-        )}`
+        `├─ ${pc.yellow("ℹ︎")} ${pc.blue("utils")} ${pc.reset("config is")} ${pc.blue(
+          "false"
+        )} ${pc.dim("\tdaisyUI utility classes are disabled")}`
       )
     }
     if (config("daisyui.prefix") && config("daisyui.prefix") !== "") {
       console.log(
-        `├─ ${green("✔︎")} ${blue("prefix")} is enabled${dim(
+        `├─ ${pc.green("✔︎")} ${pc.blue("prefix")} is enabled${pc.dim(
           "\t\tdaisyUI classnames must use"
-        )} ${blue(config("daisyui.prefix"))} ${dim("prefix")}`
+        )} ${pc.blue(config("daisyui.prefix"))} ${pc.dim("prefix")}`
       )
     }
     if (themeInjector.themeOrder.length > 0) {
       console.log(
-        `├─ ${green("✔︎")} ${themeInjector.themeOrder.length} ${
+        `├─ ${pc.green("✔︎")} ${themeInjector.themeOrder.length} ${
           themeInjector.themeOrder.length > 1 ? "themes" : "theme"
-        } added${dim("\t\thttps://daisyui.com/docs/themes")}`
+        } added${pc.dim("\t\thttps://daisyui.com/docs/themes")}`
       )
     }
     if (themeInjector.themeOrder.length === 0) {
       console.log(
-        `├─ ${yellow("ℹ︎")} All themes are disabled in config${dim(
+        `├─ ${pc.yellow("ℹ︎")} All themes are disabled in config${pc.dim(
           "\t\thttps://daisyui.com/docs/themes"
         )}`
       )
     }
     let messages = [
-      `${green("❤︎")} ${reset("Support daisyUI project:")}\t${dim(funding.url)}`,
-      `${green("★")} ${reset("Star daisyUI on GitHub")}\t${dim(
+      `${pc.green("❤︎")} ${pc.reset("Support daisyUI project:")}\t${pc.dim(
+        daisyuiInfo.funding.url
+      )}`,
+      `${pc.green("★")} ${pc.reset("Star daisyUI on GitHub")}\t${pc.dim(
         "https://github.com/saadeghi/daisyui"
       )}`,
     ]
@@ -123,7 +125,7 @@ const mainFunction = ({ addBase, addComponents, config }) => {
   }
 }
 
-export default tailwindPlugin(mainFunction, {
+module.exports = tailwindPlugin(mainFunction, {
   theme: {
     extend: {
       colors: {

package/src/lib/addPrefix.js

@@ -1,4 +1,4 @@
-import { stringify, parse } from "css-selector-tokenizer"
+const Tokenizer = require("css-selector-tokenizer")
 
 function itMatchesOne(arr, term) {
   return arr.some((i) => term.search(i) >= 0)
@@ -61,7 +61,7 @@ function iterateSelectorNodes(selector, options) {
         return iterateSelectorNodes(node, options)
       }
 
-      if (itMatchesOne(ignore, stringify(node))) return node
+      if (itMatchesOne(ignore, Tokenizer.stringify(node))) return node
 
       return prefixNode(node, prefix)
     }),
@@ -71,7 +71,7 @@ function iterateSelectorNodes(selector, options) {
 /**
  * @type {import('postcss').PluginCreator}
  */
-export default (opts = {}) => {
+module.exports = (opts = {}) => {
   const { prefix, ignore } = {
     prefix: "",
     ignore: [],
@@ -92,13 +92,13 @@ export default (opts = {}) => {
     postcssPlugin: "addprefix",
     Root(root, postcss) {
       root.walkRules((rule) => {
-        const parsed = parse(rule.selector)
+        const parsed = Tokenizer.parse(rule.selector)
         const selector = iterateSelectorNodes(parsed, { prefix, ignore })
 
-        rule.selector = stringify(selector)
+        rule.selector = Tokenizer.stringify(selector)
       })
     },
   }
 }
 
-export const postcss = true
+module.exports.postcss = true

package/src/lib/responsiveRegex.js

@@ -4,7 +4,7 @@
 // regex for all Tailwind CSS color utilities
 // (bg|to|via|from|text|ring|fill|caret|stroke|border|divide|accent|shadow|outline|decoration|placeholder|ring-offset)
 
-export const responsiveRegex = [
+module.exports = [
   {
     pattern: /.*/,
   },

package/src/lib/utility-classes.js

@@ -1,4 +1,4 @@
-export const utilityClasses = {
+module.exports = {
   borderRadius: {
     badge: "var(--rounded-badge, 1.9rem)",
     btn: "var(--rounded-btn, 0.5rem)",

package/src/theming/colorNames.js

@@ -1,4 +1,4 @@
-export const colorNames = {
+module.exports = {
   "primary": "--p",
   "primary-content": "--pc",
 

package/src/theming/functions.js

@@ -1,214 +1,226 @@
-import { colorNames } from "./colorNames"
-import { variables, themesOrder } from "./themeDefaults"
+const colorNames = require("./colorNames")
+const themeDefaults = require("./themeDefaults")
 
-import { toGamut, interpolate, wcagContrast } from "culori"
+const { toGamut, interpolate, wcagContrast } = require("culori")
 
-const cutNumber = (number) => (number ? +number.toFixed(6) : 0)
-const toGamutOKLCH = toGamut("oklch")
+const cutNumber = (number) => (number ? +number.toFixed(6) : 0);
+const toGamutOKLCH = toGamut("oklch");
 
-export function isDark(color) {
-  if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
-    return true
-  }
-  return false
-}
-export function colorObjToString({ l, c, h }) {
-  return `${cutNumber(l)} ${cutNumber(c)} ${cutNumber(h)}`
-}
-export function generateForegroundColorFrom(input, percentage = 0.8) {
-  const result = interpolate([input, isDark(input) ? "white" : "black"], "oklch")(percentage)
-  return colorObjToString(result)
-}
-export function generateDarkenColorFrom(input, percentage = 0.07) {
-  const result = interpolate([input, "black"], "oklch")(percentage)
-  return colorObjToString(result)
-}
-export function convertColorFormat(input) {
-  if (typeof input !== "object" || input === null) {
-    return input
-  }
+module.exports = {
+  isDark: (color) => {
+    if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
+      return true
+    }
+    return false
+  },
 
-  const resultObj = {}
+  colorObjToString: function (input) {
+    const { l, c, h } = input
+    return `${cutNumber(l)} ${cutNumber(c)} ${cutNumber(h)}`
+  },
 
-  Object.entries(input).forEach(([rule, value]) => {
-    if (Object.hasOwn(colorNames, rule)) {
-      const colorObj = toGamutOKLCH(value)
-      resultObj[colorNames[rule]] = colorObjToString(colorObj)
-    } else {
-      resultObj[rule] = value
-    }
+  generateForegroundColorFrom: function (input, percentage = 0.8) {
+    const result = interpolate([input, this.isDark(input) ? "white" : "black"], "oklch")(percentage)
+    return this.colorObjToString(result)
+  },
 
-    // auto generate base colors
-    if (!Object.hasOwn(input, "base-100")) {
-      resultObj["--b1"] = "100 0 0"
-    }
-    if (!Object.hasOwn(input, "base-200")) {
-      resultObj["--b2"] = generateDarkenColorFrom(input["base-100"], 0.07)
+  generateDarkenColorFrom: function (input, percentage = 0.07) {
+    const result = interpolate([input, "black"], "oklch")(percentage)
+    return this.colorObjToString(result)
+  },
+
+  convertColorFormat: function (input) {
+    if (typeof input !== "object" || input === null) {
+      return input
     }
-    if (!Object.hasOwn(input, "base-300")) {
-      if (Object.hasOwn(input, "base-200")) {
-        resultObj["--b3"] = generateDarkenColorFrom(input["base-200"], 0.07)
+
+    const resultObj = {}
+
+    Object.entries(input).forEach(([rule, value]) => {
+      if (Object.hasOwn(colorNames,rule)) {
+        const colorObj = toGamutOKLCH(value)
+        resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
       } else {
-        resultObj["--b3"] = generateDarkenColorFrom(input["base-100"], 0.14)
+        resultObj[rule] = value
       }
-    }
 
-    // auto generate state colors
-    if (!Object.hasOwn(input, "info")) {
-      resultObj["--in"] = "0.7206 0.191 231.6"
-    }
-    if (!Object.hasOwn(input, "success")) {
-      resultObj["--su"] = "0.7441 0.213 164.75"
-    }
-    if (!Object.hasOwn(input, "warning")) {
-      resultObj["--wa"] = "0.8471 0.199 83.87"
-    }
-    if (!Object.hasOwn(input, "error")) {
-      resultObj["--er"] = "0.7176 0.221 22.18"
-    }
+      // auto generate base colors
+      if (!Object.hasOwn(input, "base-100")) {
+        resultObj["--b1"] = "100 0 0"
+      }
+      if (!Object.hasOwn(input, "base-200")) {
+        resultObj["--b2"] = this.generateDarkenColorFrom(input["base-100"], 0.07)
+      }
+      if (!Object.hasOwn(input, "base-300")) {
+        if (Object.hasOwn(input, "base-200")) {
+          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-200"], 0.07)
+        } else {
+          resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14)
+        }
+      }
 
-    // auto generate content colors
-    if (!Object.hasOwn(input, "base-content")) {
-      resultObj["--bc"] = generateForegroundColorFrom(input["base-100"], 0.8)
-    }
-    if (!Object.hasOwn(input, "primary-content")) {
-      resultObj["--pc"] = generateForegroundColorFrom(input["primary"], 0.8)
-    }
-    if (!Object.hasOwn(input, "secondary-content")) {
-      resultObj["--sc"] = generateForegroundColorFrom(input["secondary"], 0.8)
-    }
-    if (!Object.hasOwn(input, "accent-content")) {
-      resultObj["--ac"] = generateForegroundColorFrom(input["accent"], 0.8)
-    }
-    if (!Object.hasOwn(input, "neutral-content")) {
-      resultObj["--nc"] = generateForegroundColorFrom(input["neutral"], 0.8)
-    }
-    if (!Object.hasOwn(input, "info-content")) {
-      if (Object.hasOwn(input, "info")) {
-        resultObj["--inc"] = generateForegroundColorFrom(input["info"], 0.8)
-      } else {
-        resultObj["--inc"] = "0 0 0"
+      // auto generate state colors
+
+      if (!Object.hasOwn(input, "info")) {
+        resultObj["--in"] = "0.7206 0.191 231.6"
       }
-    }
-    if (!Object.hasOwn(input, "success-content")) {
-      if (Object.hasOwn(input, "success")) {
-        resultObj["--suc"] = generateForegroundColorFrom(input["success"], 0.8)
-      } else {
-        resultObj["--suc"] = "0 0 0"
+      if (!Object.hasOwn(input, "success")) {
+        resultObj["--su"] = "0.7441 0.213 164.75"
       }
-    }
-    if (!Object.hasOwn(input, "warning-content")) {
-      if (Object.hasOwn(input, "warning")) {
-        resultObj["--wac"] = generateForegroundColorFrom(input["warning"], 0.8)
-      } else {
-        resultObj["--wac"] = "0 0 0"
+      if (!Object.hasOwn(input, "warning")) {
+        resultObj["--wa"] = "0.8471 0.199 83.87"
       }
-    }
-    if (!Object.hasOwn(input, "error-content")) {
-      if (Object.hasOwn(input, "error")) {
-        resultObj["--erc"] = generateForegroundColorFrom(input["error"], 0.8)
-      } else {
-        resultObj["--erc"] = "0 0 0"
+      if (!Object.hasOwn(input, "error")) {
+        resultObj["--er"] = "0.7176 0.221 22.18"
       }
-    }
 
-    // add css variables if not exist
-    Object.entries(variables).forEach(([variable, value]) => {
-      if (!Object.hasOwn(input, variable)) {
-        resultObj[variable] = value
+      // auto generate content colors
+      if (!Object.hasOwn(input, "base-content")) {
+        resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"], 0.8)
+      }
+      if (!Object.hasOwn(input, "primary-content")) {
+        resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"], 0.8)
+      }
+      if (!Object.hasOwn(input, "secondary-content")) {
+        resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"], 0.8)
+      }
+      if (!Object.hasOwn(input, "accent-content")) {
+        resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"], 0.8)
+      }
+      if (!Object.hasOwn(input, "neutral-content")) {
+        resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"], 0.8)
+      }
+      if (!Object.hasOwn(input, "info-content")) {
+        if (Object.hasOwn(input, "info")) {
+          resultObj["--inc"] = this.generateForegroundColorFrom(input["info"], 0.8)
+        } else {
+          resultObj["--inc"] = "0 0 0"
+        }
+      }
+      if (!Object.hasOwn(input, "success-content")) {
+        if (Object.hasOwn(input, "success")) {
+          resultObj["--suc"] = this.generateForegroundColorFrom(input["success"], 0.8)
+        } else {
+          resultObj["--suc"] = "0 0 0"
+        }
+      }
+      if (!Object.hasOwn(input, "warning-content")) {
+        if (Object.hasOwn(input, "warning")) {
+          resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"], 0.8)
+        } else {
+          resultObj["--wac"] = "0 0 0"
+        }
+      }
+      if (!Object.hasOwn(input, "error-content")) {
+        if (Object.hasOwn(input, "error")) {
+          resultObj["--erc"] = this.generateForegroundColorFrom(input["error"], 0.8)
+        } else {
+          resultObj["--erc"] = "0 0 0"
+        }
       }
-    })
 
-    // add other custom styles
-    if (!Object.hasOwn(colorNames, rule)) {
-      resultObj[rule] = value
-    }
-  })
+      // add css variables if not exist
+      Object.entries(themeDefaults.variables).forEach((item) => {
+        const [variable, value] = item
+        if (!Object.hasOwn(input, variable)) {
+          resultObj[variable] = value
+        }
+      })
 
-  return resultObj
-}
-export function injectThemes(addBase, config, themes) {
-  const includedThemesObj = {}
-  // add default themes
-  const themeRoot = config("daisyui.themeRoot") ?? ":root"
-  Object.entries(themes).forEach(([theme, value]) => {
-    includedThemesObj[theme] = convertColorFormat(value)
-  })
-
-  // add custom themes
-  if (Array.isArray(config("daisyui.themes"))) {
-    config("daisyui.themes").forEach((item) => {
-      if (typeof item === "object" && item !== null) {
-        Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
-          includedThemesObj[customThemeName] = convertColorFormat(customThemevalue)
-        })
+      // add other custom styles
+      if (!Object.hasOwn(colorNames,rule)) {
+        resultObj[rule] = value
       }
     })
-  }
-
-  let themeOrder = []
-  if (Array.isArray(config("daisyui.themes"))) {
-    config("daisyui.themes").forEach((theme) => {
-      if (typeof theme === "object" && theme !== null) {
-        Object.keys(theme).forEach((customThemeName) => {
-          themeOrder.push(customThemeName)
-        })
-      } else if (Object.hasOwn(includedThemesObj, theme)) {
-        themeOrder.push(theme)
-      }
+
+    return resultObj
+  },
+
+  injectThemes: function (addBase, config, themes) {
+    const includedThemesObj = {}
+    // add default themes
+    const themeRoot = config("daisyui.themeRoot") ?? ":root"
+    Object.entries(themes).forEach(([theme, value]) => {
+      includedThemesObj[theme] = this.convertColorFormat(value)
     })
-  } else if (config("daisyui.themes") === true) {
-    themeOrder = themesOrder
-  } else {
-    themeOrder = ["light", "dark"]
-  }
-
-  // inject themes in order
-  const themesToInject = {}
-  themeOrder.forEach((themeName, index) => {
-    if (index === 0) {
-      // first theme as root
-      themesToInject[themeRoot] = includedThemesObj[themeName]
-    } else if (index === 1) {
-      // auto dark
-      if (config("daisyui.darkTheme")) {
-        if (
-          themeOrder[0] !== config("daisyui.darkTheme") &&
-          themeOrder.includes(config("daisyui.darkTheme"))
-        ) {
-          themesToInject["@media (prefers-color-scheme: dark)"] = {
-            [themeRoot]: includedThemesObj[`${config("daisyui.darkTheme")}`],
-          }
+
+    // add custom themes
+    if (Array.isArray(config("daisyui.themes"))) {
+      config("daisyui.themes").forEach((item) => {
+        if (typeof item === "object" && item !== null) {
+          Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
+            includedThemesObj[customThemeName] = this.convertColorFormat(customThemevalue)
+          })
         }
-      } else if (config("daisyui.darkTheme") === false) {
-      } else {
-        if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
-          themesToInject["@media (prefers-color-scheme: dark)"] = {
-            [themeRoot]: includedThemesObj["dark"],
+      })
+    }
+
+    let themeOrder = []
+    if (Array.isArray(config("daisyui.themes"))) {
+      config("daisyui.themes").forEach((theme) => {
+        if (typeof theme === "object" && theme !== null) {
+          Object.keys(theme).forEach((customThemeName) => {
+            themeOrder.push(customThemeName)
+          })
+        } else if (Object.hasOwn(includedThemesObj, theme)) {
+          themeOrder.push(theme)
+        }
+      })
+    } else if (config("daisyui.themes") === true) {
+      themeOrder = themeDefaults.themeOrder
+    } else {
+      themeOrder = ["light", "dark"]
+    }
+
+    // inject themes in order
+    const themesToInject = {}
+    themeOrder.forEach((themeName, index) => {
+      if (index === 0) {
+        // first theme as root
+        themesToInject[themeRoot] = includedThemesObj[themeName]
+      } else if (index === 1) {
+        // auto dark
+        if (config("daisyui.darkTheme")) {
+          if (
+            themeOrder[0] !== config("daisyui.darkTheme") &&
+            themeOrder.includes(config("daisyui.darkTheme"))
+          ) {
+            themesToInject["@media (prefers-color-scheme: dark)"] = {
+              [themeRoot]: includedThemesObj[`${config("daisyui.darkTheme")}`],
+            }
+          }
+        } else if (config("daisyui.darkTheme") === false) {
+          // disables prefers-color-scheme: dark
+        } else {
+          if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
+            themesToInject["@media (prefers-color-scheme: dark)"] = {
+              [themeRoot]: includedThemesObj["dark"],
+            }
           }
         }
+        // theme 0 with name
+        themesToInject["[data-theme=" + themeOrder[0] + "]"] = includedThemesObj[themeOrder[0]]
+        themesToInject[
+          themeRoot + ":has(input.theme-controller[value=" + themeOrder[0] + "]:checked)"
+        ] = includedThemesObj[themeOrder[0]]
+        // theme 1 with name
+        themesToInject["[data-theme=" + themeOrder[1] + "]"] = includedThemesObj[themeOrder[1]]
+        themesToInject[
+          themeRoot + ":has(input.theme-controller[value=" + themeOrder[1] + "]:checked)"
+        ] = includedThemesObj[themeOrder[1]]
+      } else {
+        themesToInject["[data-theme=" + themeName + "]"] = includedThemesObj[themeName]
+        themesToInject[
+          themeRoot + ":has(input.theme-controller[value=" + themeName + "]:checked)"
+        ] = includedThemesObj[themeName]
       }
-      // theme 0 with name
-      themesToInject["[data-theme=" + themeOrder[0] + "]"] = includedThemesObj[themeOrder[0]]
-      themesToInject[
-        themeRoot + ":has(input.theme-controller[value=" + themeOrder[0] + "]:checked)"
-      ] = includedThemesObj[themeOrder[0]]
-      // theme 1 with name
-      themesToInject["[data-theme=" + themeOrder[1] + "]"] = includedThemesObj[themeOrder[1]]
-      themesToInject[
-        themeRoot + ":has(input.theme-controller[value=" + themeOrder[1] + "]:checked)"
-      ] = includedThemesObj[themeOrder[1]]
-    } else {
-      themesToInject["[data-theme=" + themeName + "]"] = includedThemesObj[themeName]
-      themesToInject[themeRoot + ":has(input.theme-controller[value=" + themeName + "]:checked)"] =
-        includedThemesObj[themeName]
-    }
-  })
+    })
 
-  addBase(themesToInject)
+    addBase(themesToInject)
 
-  return {
-    includedThemesObj,
-    themeOrder,
-  }
+    return {
+      includedThemesObj,
+      themeOrder,
+    }
+  },
 }

package/src/theming/index.js

@@ -32,4 +32,4 @@ const colorObject = {
   "error-content": "var(--fallback-erc,oklch(var(--erc)/<alpha-value>))",
 }
 
-export default colorObject
+module.exports = colorObject