Nested classes receives merged styles from all siblings

KonradDRAST commented 2 years ago

Describe the bug Windi doesn't split styles correctly

To Reproduce I've created some nested styles structure, and windicss aggregates all nested styles from the siblings and apply them to all nested clases.

Expected behavior Each class should have only its own styles

Screenshots

harlan-zw commented 2 years ago

Hey @KonradDeskiewicz

Can you confirm the Nuxt version and if you're using nuxt-vite, alternatively if you could supply a reproduction repo that would also be helpful to debug it

KonradDRAST commented 2 years ago

Config was: latest Nuxt 3 with Vite + latest Windi. Unfortunately, there were many more issues we've stumbled upon (other than WindiCSS) so for now, we've given up with Nuxt 3, and the next MVP will use Nuxt 2. Therefore I don't have the repo anymore. Sorry.

replygirl commented 2 years ago

last working with 3.0.0-27430121.2b3dbed—it looks like you already accounted for nuxt/framework#2812, so maybe this is related to the introduction of cssnano in nuxt/framework#3402?

`package.json`

{
  "private": true,
  "engines": {
    "node": ">=14",
    "npm": ">=6",
    "pnpm": ">=6"
  },
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "dev:unit": "vitest watch",
    "lint": "eslint \"**/*.{vue,ts,js}\"",
    "typecheck": "nuxi typecheck",
    "test:e2e": "cypress open",
    "test:unit": "vitest run",
    "coverage:unit": "vitest run --coverage",
    "vercel-install": "npx pnpm i --store=node_modules/.pnpm-store",
    "vercel-build": "npx pnpm build",
    "start": "node .output/server/index.mjs"
  },
  "dependencies": {
    "@replygirl/change-case-object": "^1.3.0",
    "@replygirl/curse": "^2.1.1",
    "@replygirl/tc": "^4.0.1",
    "@vueuse/components": "^7.7.1",
    "@vueuse/core": "^7.7.1",
    "@vueuse/gesture": "2.0.0-beta.1",
    "@vueuse/head": "^0.7.5",
    "@vueuse/motion": "2.0.0-beta.9",
    "@vueuse/nuxt": "^7.7.1",
    "@vueuse/sound": "^1.1.7",
    "change-case": "^4.1.2",
    "date-fns": "^2.28.0",
    "isomorphic-unfetch": "^3.1.0",
    "nanoid": "^3.3.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.11",
    "prism-theme-vars": "^0.2.2",
    "query-string": "^7.1.1",
    "swrv": "^1.0.0-beta.8",
    "ts-dedent": "^2.2.0",
    "unenv": "^0.4.3",
    "vee-validate": "^4.5.10",
    "vue-chemistry": "^0.2.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.18.6",
    "@iconify-json/carbon": "^1.1.1",
    "@iconify-json/mdi": "^1.1.1",
    "@intlify/nuxt3": "^0.1.10",
    "@pinia/nuxt": "^0.1.8",
    "@pinia/testing": "^0.0.9",
    "@types/markdown-it-link-attributes": "^3.0.1",
    "@types/nprogress": "^0.2.0",
    "@types/yup": "^0.29.13",
    "@vercel/node": "^1.13.0",
    "@windicss/plugin-animations": "^1.0.9",
    "@windicss/plugin-heropatterns": "^0.0.8",
    "@windicss/plugin-interaction-variants": "^1.0.0",
    "@windicss/plugin-question-mark": "^0.1.1",
    "@windicss/plugin-scrollbar": "^1.2.3",
    "c8": "^7.11.0",
    "critters": "^0.0.16",
    "cross-env": "^7.0.3",
    "cypress": "^8.7.0",
    "eslint": "^8.10.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-sort-keys-fix": "^1.1.2",
    "filename-reserved-regex": "^3.0.0",
    "https-localhost": "^4.7.1",
    "markdown-it-link-attributes": "^4.0.0",
    "markdown-it-prism": "^2.2.3",
    "nuxi": "^0.10.1",
    "nuxt-windicss": "^2.2.8",
    "nuxt3": "3.0.0-27430121.2b3dbed",
    "pnpm": "^6.32.3",
    "prettier": "^2.5.1",
    "type-fest": "^2.12.0",
    "typescript": "^4.6.2",
    "unplugin-auto-import": "^0.6.1",
    "unplugin-icons": "^0.13.3",
    "vite-plugin-pwa": "^0.11.13",
    "vite-svg-loader": "^3.1.2",
    "vitest": "^0.6.0"
  }
}

`nuxt.config.ts` (abridged)

import { defineNuxtConfig } from 'nuxt3'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import { VitePWA } from 'vite-plugin-pwa'
import ViteSvg from 'vite-svg-loader'

export default defineNuxtConfig({
  buildModules: [
    [
      '@intlify/nuxt3',
      {
        localeDir: 'locales',
        vueI18n: {
          legacy: false,
          locale: 'en',
        },
      },
    ],
    '@pinia/nuxt',
    '@vueuse/nuxt',
    [
      'nuxt-windicss',
      {
        analyze: true,
        // transform: 'pre',
      },
    ],
    [
      'unplugin-icons/nuxt',
      {
        autoInstall: true,
        customCollections: {
          sqf: FileSystemIconLoader(`./assets/icons`),
        },
        defaultClass: 'block',
      },
    ],
  ],
  // https://github.com/nuxt/nuxt.js/issues/13429
  components: {
    dirs: ['~/components'],
    global: true,
  },
  css: [
    'virtual:windi-base.css',
    'virtual:windi-components.css',
    '@/styles/main.css',
    'virtual:windi-utilities.css',
  ],
  ignore: ['auto-imports.d.ts', 'vite.config.ts'],
  typescript: {
    strict: true,
  },
  vite: {
    logLevel: 'info',
    plugins: [
      ViteSvg({
        svgo: false,
      }),
      VitePWA({
        includeAssets: ['favicon.svg', 'robots.txt', 'safari-pinned-tab.svg'],
        manifest: {
          icons: [
            {
              sizes: '192x192',
              src: '/pwa-192x192.png',
              type: 'image/png',
            },
            {
              sizes: '512x512',
              src: '/pwa-512x512.png',
              type: 'image/png',
            },
            {
              purpose: 'any maskable',
              sizes: '512x512',
              src: '/pwa-512x512.png',
              type: 'image/png',
            },
          ],
          name: 'redacted',
          short_name: 'redacted',
          theme_color: '#1FFFCC',
        },
        registerType: 'autoUpdate',
      }),
    ],
  },
})

toniengelhardt commented 2 years ago

I have a similar problem. For me, nested @apply statements break the top-level @apply properties after Nuxt version 3.0.0-27424151.dbab979. I've raised the issue already in the Nuxt repository: https://github.com/nuxt/nuxt.js/issues/13495

Here is a reproduction:

3.0.0-27451165.114cbe3 broken: https://stackblitz.com/edit/nuxt3-windi-css-bug

3.0.0-27424151.dbab979 working: https://stackblitz.com/edit/nuxt3-windi-css-bug-part-2

danielroe commented 2 years ago

@replygirl is right. 👍 The following config seems to resolve the issue:

import { defineNuxtConfig } from 'nuxt3';

export default defineNuxtConfig({
  modules: ['nuxt-windicss'],
  postcss: {
    plugins: {
      cssnano: false
    }
  }
});

This might be something to resolve in nuxt-windicss.

windicss / nuxt-windicss