search

antfu / vitesse-nuxt

Vitesse for Nuxt 3 🏔💚⚡️
https://vitesse-nuxt3.netlify.app/
MIT License
1.74k stars 231 forks source link

Unocss issue on antfu / vitesse-nuxt3 #44

Closed BITRU closed 2 years ago

BITRU commented 2 years ago

I have problem in not working space-x-? class. On even FRASH setup antfu/vitesse-nuxt3

div class="bg-white h-full"> div class="flex space-x-4"> div class="bg-red-600">03

div class="bg-red-600">02
div class="bg-red-600">03 /div> /div>

result in .space-x-4>:not([hidden])~:not([hidden])>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));} correct css .space-x-4>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}

:not([hidden])~:not([hidden]) - is extra code that is not supposed to be there. that why css does not work

UnoCSS result in correct code. That is why it is not issue with Unocss as I been replied. Playground

antfu commented 2 years ago

Upgrade UnoCSS to 0.37.4 should fix this issue.

pietervanstee commented 1 year ago

Great, this fix the issue for me as well. I was working with a fresh vitesse template. Any chance there we can update UnoCSS again to a current version where the space-x|y-2 would work?

This is the package.json I started with UnoCSS v 0.47.2 at the moment. { "type": "module", "private": true, "packageManager": "pnpm@7.17.1", "scripts": { "build": "vite-ssg build", "dev": "vite --port 3333 --open", "lint": "eslint .", "preview": "vite preview", "preview-https": "serve dist", "test": "vitest", "test:e2e": "cypress open", "test:unit": "vitest", "typecheck": "vue-tsc --noEmit", "up": "taze major -I" }, "dependencies": { "@unocss/reset": "^0.47.2", "@vueuse/core": "^9.6.0", "@vueuse/head": "^1.0.18", "nprogress": "^0.2.0", "pinia": "^2.0.27", "vue": "^3.2.45", "vue-demi": "^0.13.11", "vue-i18n": "^9.2.2", "vue-router": "^4.1.6" }, "devDependencies": { "@antfu/eslint-config": "^0.33.0", "@iconify-json/carbon": "^1.1.11", "@intlify/vite-plugin-vue-i18n": "^6.0.3", "@types/markdown-it-link-attributes": "^3.0.1", "@types/nprogress": "^0.2.0", "@vitejs/plugin-vue": "^3.2.0", "@vue-macros/volar": "^0.5.4", "@vue/test-utils": "^2.2.4", "critters": "^0.0.16", "cross-env": "^7.0.3", "cypress": "^11.2.0", "eslint": "^8.28.0", "eslint-plugin-cypress": "^2.12.1", "https-localhost": "^4.7.1", "markdown-it-link-attributes": "^4.0.1", "markdown-it-shiki": "^0.7.2", "pnpm": "^7.17.1", "shiki": "^0.11.1", "taze": "^0.8.4", "typescript": "^4.9.3", "unocss": "^0.47.2", "unplugin-auto-import": "^0.12.0", "unplugin-vue-components": "^0.22.11", "unplugin-vue-macros": "^1.0.3", "vite": "^3.2.4", "vite-plugin-inspect": "^0.7.9", "vite-plugin-pages": "^0.27.1", "vite-plugin-pwa": "^0.13.3", "vite-plugin-vue-component-preview": "^0.3.3", "vite-plugin-vue-layouts": "^0.7.0", "vite-plugin-vue-markdown": "^0.22.1", "vite-ssg": "^0.22.0", "vite-ssg-sitemap": "^0.4.3", "vitest": "^0.25.3", "vue-tsc": "^1.0.10" } }

Thanks