[Bug]: DaisyUI Compatability

[lightstrike]

Operating system

Linux Mint 19.3 Cinnamon

Node.js version

14.15.4

Shopify CLI version

2.2.0

Browsers

No response

Version

4 (Current)

Modifications

I added DaisyUI and Tailwind Forms plugins.

In tailwind.config.js:

module.exports = {
  ...
  plugins: [
    require('daisyui'),
    require('@tailwindcss/forms'),
  ],
  ...
}

Details

1. I installed Tailwind Forms (npm i @tailwindcss/forms) and added to tailwind.config.js
2. I ran npm run start and confirmed Tailwind Forms is working as expected
3. I installed DaisyUI (npm i daisyui) and added to tailwind.config.js
4. I ran npm run start and hit the following error:

🌼 DaisyUI components 1.14.0  https://github.com/saadeghi/daisyui
  ✔︎ Including:  base, components, themes[21], utilities

Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.6, but postcss-preset-env uses 7.0.36. Perhaps this is the source of the error below.
1 asset
40 modules

ERROR in ./src/css/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 26
    at Parser.error .(./node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (./node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (./node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (./node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (./node_modules/postcss-values-parser/lib/parser.js:51:17)
    at ./node_modules/postcss-color-functional-notation/index.cjs.js:15:54
    at ./node_modules/postcss/lib/container.js:72:18
    at ./node_modules/postcss/lib/container.js:55:18
    at Rule.each (./node_modules/postcss/lib/container.js:41:16)
    at Rule.walk (./node_modules/postcss/lib/container.js:52:17)
    at processResult (./node_modules/webpack/lib/NormalModule.js:721:19)
    at ./node_modules/webpack/lib/NormalModule.js:827:5
    at ./node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ./node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (./node_modules/postcss-loader/dist/index.js:142:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.51.1 compiled with 2 errors in 2001 ms

Any ideas or suggestions how to get these DaisyUI working? Much appreciated :star2:

Notice

• [X] I read the notice

[sergejcodes]

Seems like DaisyUI and postcss-preset-env are clashing in some way or another.

I got it working by removing postcss-preset-env from the postcss.config.js file. This repo doesn't depend on postcss-preset-env so you can safely remove it if you are not going to use it.

[lightstrike]

Removing postcss-preset-env did the trick for me too, I don't need it at the moment.

Thanks for the quick support - I am really enjoying using Shopify Theme Lab, great work! :raised_hands: