daisyui 2.2.2 → 2.3.0

package/README.md

@@ -74,7 +74,7 @@ module.exports = {
 Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/daisyui@2.2.1/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@2.2.2/dist/full.css" rel="stylesheet" type="text/css" />
 <script src="https://cdn.tailwindcss.com"></script>
 ```
 
@@ -232,6 +232,11 @@ Read the documents for more info:
   - [DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)](https://www.youtube.com/watch?v=Wm2g6FWec34)
   - [Next.js - Tailwind - DeisyUI Setup](https://www.youtube.com/watch?v=uXQgJbUj3PQ)
   - [Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes!](https://www.youtube.com/watch?v=5lF5PxBJoso)
+  - [Build a blog with Svelte](https://www.youtube.com/watch?v=u9jtHBE6NL8)
+  - [Building a product in less than 10 minutes: Laravel, InertiaJS, VueJS, TailwindCSS, DaisyUI](https://www.youtube.com/watch?v=XR1rS-CCfx0)
+  - [Infinite scrolling with MERN | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB](https://www.youtube.com/watch?v=y7LYoRGRqRI)
+  - [How to install TailwindCSS v3 and DaisyUI to your React app](https://www.youtube.com/watch?v=XBYvzPe7skc)
+  - [Laravel: DaisyUI Agiliza Tus Desarrollos Con TailwindCSS + Select2 Tailwind Style (Spanish)](https://www.youtube.com/watch?v=28db3jojTgo)
 - Courses
   - [Building with SvelteKit and GraphCMS](https://explorers.netlify.com/learn/building-with-sveltekit-and-graphcms)
   - [Svelte for Beginners by Mike Karan](https://www.udemy.com/course/svelte-for-beginners/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisyui",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "daisyUI - Tailwind CSS Components",
   "author": "Pouya Saadeghi",
   "license": "MIT",
@@ -82,6 +82,8 @@
   },
   "dependencies": {
     "color": "^4.2",
+    "postcss-class-prefix": "0.3.0",
+    "postcss-js": "3.0.3",
     "tailwindcss": "^3.0"
   },
   "peerDependencies": {

package/src/index.js

@@ -6,10 +6,12 @@ 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");
+let utilitiesUnstyled = require("../dist/utilities-unstyled");
+let utilitiesStyled = require("../dist/utilities-styled");
 const themes = require("./colors/themes");
 const colorFunctions = require("./colors/functions");
+const postcssJs = require('postcss-js');
+const postcssPrefix = require('postcss-class-prefix');
 
 const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   let diasyuiIncludedItems = [];
@@ -61,6 +63,13 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
     console.log("\x1b[36m%s\x1b[0m", " Direction:", "\x1b[0m", "RTL");
     file = styledRtl;
   }
+  
+  // add prefix to class names if specified
+  const prefix = config('daisyui.prefix');
+  if (prefix) {
+    file = postcssJs.sync(postcssPrefix(prefix))(file);
+  }
+
   addComponents(file);
 
   const themeInjector = colorFunctions.injectThemes(addBase, config, themes)
@@ -71,7 +80,13 @@ const mainFunction = ({ addBase, addComponents, addUtilities, config }) => {
   // inject @utilities style needed by components
   if (config("daisyui.utils") != false) {
     addComponents(utilities, { variants: ["responsive"] });
+    if (prefix) {
+      utilitiesUnstyled = postcssJs.sync(postcssPrefix(prefix))(utilitiesUnstyled);
+    }
     addComponents(utilitiesUnstyled, { variants: ["responsive"] });
+    if (prefix) {
+      utilitiesStyled = postcssJs.sync(postcssPrefix(prefix))(utilitiesStyled);
+    }
     addComponents(utilitiesStyled, { variants: ["responsive"] });
     diasyuiIncludedItems.push("utilities");
   }