Nested classes receives merged styles from all siblings

[KonradDRAST]

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]

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]

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]

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]

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: nuxt/nuxt#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]

@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.