Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/unscatty/unocss-preset-daisy

UnoCSS preset for daisyUI
https://github.com/unscatty/unocss-preset-daisy

daisyui unocss unocss-preset

Last synced: 7 days ago
JSON representation

UnoCSS preset for daisyUI

Awesome Lists containing this project

README 

        
# unocss-preset-daisy



> Yet another daisyUI preset for UnoCSS



Fully (i think so) compatible [UnoCSS](https://github.com/unocss/unocss) preset for [daisyUI](https://github.com/saadeghi/daisyui)



Variants (`hover`, `focus`, breakpoints: `sm`, `md`, etc.) supported.



This is a rework of kidonng's [unocss-preset-daisy](https://github.com/kidonng/unocss-preset-daisy) to make it work with UnoCSS variants, kudos to him for the original work.



[Checkout the demo!](https://unscatty.github.io/unocss-preset-daisy/)



## :warning: :warning: :warning: Warning :warning: :warning: :warning:



This preset makes heavy usage of shortcuts and rules, so, when using the UnoCSS VSCode extension, editor may become laggy. I recommend disabling the extension's color preview to help with that.



```js

// in your global settings.json or workspace settings.json

{

  "unocss.colorPreview": false

}

```



Auto-completion suggestions may also take a while to appear, this is due to the amount of shortcuts generated by the preset.



## Installation

> from version `1.0.0` onwards, `daisyui` package is no longer required



```sh

npm install -D unocss @unscatty/unocss-preset-daisy

```



## Usage



> **Note**: `@unocss/reset` comes with `unocss`. If you are using pnpm, install it separately unless you enable hoisting.



### Vite



```js

import { defineConfig } from 'vite'

import unocss from 'unocss/vite'

import { presetUno } from 'unocss'

import { presetDaisy } from '@unscatty/unocss-preset-daisy'



export default defineConfig({

  plugins: [

    unocss({

      presets: [presetUno(), presetDaisy()],

    }),

  ],

})

```



```js

// main.js

import '@unocss/reset/tailwind.css'

import 'uno.css'

```



### Astro



```js

import { defineConfig } from 'astro/config'

import unocss from 'unocss/astro'

import { presetUno } from 'unocss'

import { presetDaisy } from '@unscatty/unocss-preset-daisy'



export default defineConfig({

  integrations: [

    unocss({

      presets: [presetUno(), presetDaisy()],

      injectReset: true,

    }),

  ],

})

```



### Nuxt



To use UnoCSS with Nuxt, `@unocss/nuxt` must be installed as well.



```js

import { defineNuxtConfig } from 'nuxt/config'

import { presetUno } from 'unocss'

import { presetDaisy } from '@unscatty/unocss-preset-daisy'



export default defineNuxtConfig({

  modules: ['@unocss/nuxt'],

  css: ['@unocss/reset/tailwind.css'],

  unocss: {

    presets: [presetUno(), presetDaisy()],

  },

})

```



### Things to consider



#### Attributify mode



DaisyUI is developed primarily for TailwindCSS, so, when using daisy's components and [Uno's attributify mode](https://unocss.dev/presets/attributify#attributify-mode), remember to always place components and modifiers inside a `class` attribute, otherwise, they may not work.



Complex components (like drawer, modal, etc.) that have nested child components, will not work when using attributify mode, as the child components expect to be inside a `class` attribute.



_"Simple"_ components (like buttons, badges, etc.) may work when using attributify mode, however, some modifiers (`btn-active`, `btn-outline`, `glass`, etc.) are still hardcoded as `class` selectors, so, they will possibly not work.



Trying to adapt this preset to use attributify mode would be almost impossible as there is no way to know all possible combinations of components and modifiers.



You can still use attributify mode for other utility classes outside of daisy's components.



```html



Primary



Primary



Accent



Drawer responsive (attributify)




  

  


    

    

      Open drawer

    

  


  


    

    

  




```



As a rule of thumb, if using a daisy component, always use `class` selectors.



### Uno's variant group transformer

Same as [Attributify](#attributify-mode)



### Z-positioning

Some components may appear on top or behind other elements, this is due to the way this preset generates shortcuts and how Uno sorts and applies the CSS code.



This can be easily fixed using the `z-*` classes to set the z-index of the element.



## Config



This preset accepts [the same config as daisyUI](https://daisyui.com/docs/config/) (except for `logs` and `prefix`).



```js

{

	presets: [

		presetUno(),

		presetDaisy({

			styled: false,

			themes: ['light', 'dark'],

		}),

	],

}

```



## Caveats



### Unused classes, variable names and keyframes



When generating the shortcuts and rules from daisyUI, some CSS code (animation _@keyframes_) get generated. Some of them may not be used in your project, but they will still be generated and included in the final CSS. This is due to the way this preset generates the rules and shortcuts, I still need to figure out a way to fix this, but for now, it's not a big deal, as the unused code is not that big (mostly keyframes definitions, variables that hold data-url svg elements and themes configuration).



Other than that, code for components is generated on demand, as expected.



If you are concerned about this, you can use something like [PurgeCSS](https://purgecss.com/) to remove the unused code from the final CSS. If you use Vite to build your project, you can use the [Vite plugin](https://github.com/jowast/vite-plugin-purgecss) for PurgeCSS.



## TODO



- [ ] Make demo less ugly. Organize components in their own pages, add more components, etc.

- [x] Fix unused code generation (move keyframes to preset config insted of preflights, convert variables to CSS object definition).

- [ ] Make it possible to extend components using shortcuts, scoped by theme. Potentially by using the [unocss-preset-theme](https://github.com/unpreset/unocss-preset-theme). So, defining a new theme would be way easier.

- [ ] Rename functions to make it more clear what they do.

- [ ] Add tests

- [X] Remove static daisyUI component files

- [X] Remove unused playground dependencies (move playground dependencies to its own package.json)

- [ ] Add `prefix` option

- [ ] Make `daisy-untailwind` a peer dependency



## Credits



- [daisyUI](https://github.com/saadeghi/daisyui)

- [UnoCSS](https://github.com/unocss/unocss)

- kidonng's [unocss-preset-daisy](https://github.com/kidonng/unocss-preset-daisy) - inspiration and base for this preset



## Authors



- Carlos Aguilera ([@unscatty](https://github.com/unscatty)) - Creator, maintainer