Error when using with DaisyUI

[Decipher]

Describe the bug I tried adding DaisyUI as a plugin for WindiCSS as per the following instructions: https://daisyui.com/docs/install/windicss/

This results in an error:

 ERROR  in ./virtual:windi.css                                friendly-errors 09:26:52

Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 19
    at /Users/stuartclark/Projects/nuxt-windicss-daisyui/virtual:windi.css:995:3
    at Parser.error (/Users/stuartclark/Projects/nuxt-windicss-daisyui/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/stuartclark/Projects/nuxt-windicss-daisyui/node_modules/postcss-values-parser/lib/parser.js:162:20)

I'm not certain that the responsibility lies here, but it seems the best place to start looking.

To Reproduce Steps to reproduce the behavior:

1. Clone repository 'https://github.com/Decipher/nuxt-windicss-daisyui'
2. Run 'npm i && npm run dev'
3. See error

Alternatively, you can use the following GitPod snapshot: https://gitpod.io#snapshot/819f90a9-b16c-44a9-8d25-bccf84767634

Expected behavior DaisyUI enabled within Nuxt, no errors.

Screenshots

Additional context

[Decipher]

I found adding postcss as an explicit dependency resolves the above issue, but results in an additional error:

 WARN  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

[harlan-zw]

Hey @Decipher

Thanks for the detailed issue.

So the windi virtual module runs through postcss within Nuxt out of the box. I've cloned the repo and it looks like postcss is failing to parse the calc function in this block

.countdown>:before {
  position: relative;
  content: "00\A 01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
  white-space: pre;
  top: calc(var(--value)*-1em);
  text-align: center;
  transition: all 1s cubic-bezier(1,0,0,1);
}

The parser from this is from the https://github.com/shellscape/postcss-values-parser package, which Nuxt is using quite an old version.

Because this is specific to Daisy UI and not windi explicitly, I think the best option would be to install the https://github.com/nuxt/postcss8 module, not much I can do at a module level to avoid this from happening, besides requiring postcss8 but it may break some users setups.

I tested it out with the repo you made and it seems to be working correctly.

Let me know if you have any questions or issues after trying that :)

[Decipher]

Thanks @harlan-zw,

I will try that as soon as I can.

I did also find that there was a failing utility class (drawer-mobile) that I wanted use, so in that particular instance I swapped over to the other UI framework, but as I prefer this framework I would still like to try to resolve this issue.

[harlan-zw]

Ye let me know if the postcss8 fixes that, otherwise it might be a compatibility issue with tailwind / windi. If you provide the classes which make up drawer-mobile I can take a better look

[ctwhome]

I tried installing nuxt/posrcss8 and it works without nuxt-vite. I made a repo to replicate the problem

https://github.com/ctwhome/windi-daisyui