saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.11k stars 1.3k forks source link

svelte kit error #356

Closed andronasef closed 2 years ago

andronasef commented 2 years ago

when run the with sveltekit windicss daisyui - without diasy it works

gitpod /workspace/template-sveltekit $ npm run dev

template-sveltekit@0.0.1 dev svelte-kit dev

๐ŸŒผ daisyUI components 1.19.0 https://github.com/saadeghi/daisyui

Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at String.indexOf () at guessClassName (file:///workspace/template-sveltekit/node_modules/windicss/lib/index.mjs:366:18) at file:///workspace/template-sveltekit/node_modules/windicss/lib/index.mjs:367:67 at Array.map () at guessClassName (file:///workspace/template-sveltekit/node_modules/windicss/lib/index.mjs:367:41) at file:///workspace/template-sveltekit/node_modules/windicss/lib/index.mjs:367:67 at Array.map () at guessClassName (file:///workspace/template-sveltekit/node_modules/windicss/lib/index.mjs:367:41) at file:///workspace/template-sveltekit/node_modules/windicss/lib/index.mjs:367:67 at Array.map () file:///workspace/template-sveltekit/node_modules/@sveltejs/kit/dist/chunks/index.js:4410 throw new Error('Cannot close server before it is initialized'); ^

Error: Cannot close server before it is initialized at Watcher.close (file:///workspace/template-sveltekit/node_modules/@sveltejs/kit/dist/chunks/index.js:4410:10) at process. (file:///workspace/template-sveltekit/node_modules/@sveltejs/kit/dist/chunks/index.js:4237:9) at process.emit (node:events:390:28) at process.emit (node:domain:475:12) at process.exit (node:internal/process/per_thread:184:15) at handle_error (file:///workspace/template-sveltekit/node_modules/@sveltejs/kit/dist/cli.js:803:10) at file:///workspace/template-sveltekit/node_modules/@sveltejs/kit/dist/cli.js:874:4

Windiconfig // @ts-check - enable TS check for js file import { defineConfig ,transform } from 'windicss/helpers'

export default defineConfig({ plugins: [ transform('daisyui'), ],

/ configurations... / })

svelte.config.js import adapter from '@sveltejs/adapter-auto'; import preprocess from 'svelte-preprocess'; import WindiCSS from 'vite-plugin-windicss'

/* @type {import('@sveltejs/kit').Config} / const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(),

kit: {
    adapter: adapter(),

    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',   vite: {
             plugins: [
               WindiCSS(),
             ],
           },

}

};

package.json export default config;

{ "name": "template-sveltekit", "version": "0.0.1", "scripts": { "dev": "svelte-kit dev", "build": "svelte-kit build", "package": "svelte-kit package", "preview": "svelte-kit preview", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ." }, "devDependencies": { "@sveltejs/adapter-auto": "next", "@sveltejs/kit": "next", "@typescript-eslint/eslint-plugin": "^4.31.1", "@typescript-eslint/parser": "^4.31.1", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.1", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.4.0", "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", "tslib": "^2.3.1", "typescript": "^4.4.3", "vite-plugin-windicss": "^1.6.1" }, "type": "module", "dependencies": { "daisyui": "^1.19.0" } }

saadeghi commented 2 years ago

@andronasef
Similar problem here with Nuxt and Windi: https://github.com/saadeghi/daisyui/issues/349#issuecomment-999218977
This issue is not from daisyUI and unfortunately I can't do anything about it on my end. Please open an issue on Windi repo.

othernotherone commented 2 years ago

I'm getting this error too, but using Svelte and Windi.

Easiest way to reproduce is to build https://github.com/GeopJr/SveltePress locally. then change to the cakepop theme using npx create-sveltepress-app add --theme=GeopJr/cakepop --pandoc. This installs windicss and daisyui. Then running pnpm run dev -- --open gets the maximum call stack size error.

I found the issue reported on Windi CSS - https://github.com/windicss/windicss/issues/623 - but the op even removed daisyui and things worked again. That was a clue, so I tried downgrading daisyui to v1.16.2 and that worked. No more max call stack error.

It might just be the combination of things causing this (waving my hands a lot here), but hopefully this helps get things closer to resolution across all of the things. Thanks for your work!

saadeghi commented 2 years ago

daisyUI built package is nothing more than CSS objects (CSS-in-JS) containing the style of components. No compile happens on daisyUI side so if there are build errors, something's wrong with the build tool. And since now it's working with Tailwind CSS CLI or a PostCSS build without errors, I'm pretty sure the problem is from Windi ๐Ÿคทโ€โ™‚๏ธ

othernotherone commented 2 years ago

so further debugging to add detail - i stepped through each version of daisyui from 1.20.0 to 1.16.6. It fails on every version but starts working at 1.16.6. Something introduced between 1.16.6 and 1.17.0?

i then reverted daisyui back to latest (1.20.0) and started testing https://github.com/windicss/vite-plugin-windicss/tags - i stepped back through each version, got the failure through 1.4.10 in October...well before the daisyui 1.16.6 release. By that method of testing, it doesn't seem to be related to windi alone.

i am here to help - just trying to get to the bottom of it where ever it is...i can make edits to test things out if you have any ideas. i'm looking through the commits for the 1.17.0 version to see if anything jumps out at me as a conflict with something in windi.

saadeghi commented 2 years ago

From version 1.17 I used some CSS selectors like [class~="step"] (reason) and I also used some :where() selectors (to get compatible with latest Typography plugin) Changelog: https://github.com/saadeghi/daisyui/blob/master/CHANGELOG.md#1170-2021-12-21
That might be the reason if it get into errors after 1.17 ๐Ÿค” But it's all valid CSS selectors so I would expect build tools to handle them ๐Ÿ˜