[bug] :deep Compilation error

[lzxb]

Less source code

.faq-desc :deep(.ui-collapse) {
  &-item-content {
    border-bottom-width: 0;
  }
}

Compile into CSS

.faq-desc :deep(.ui-collapse) {
  border-bottom-width: 0;
}
.faq-desc :deep(.ui-collapse)-item-content {
  border-bottom-width: 0;
}

Will report an error，in "lightningcss": "^1.28.2",

import { transform } from 'lightningcss';

transform({
  filename: 'style.css',
  code: Buffer.from(`
.faq-desc :deep(.ui-collapse) {
  border-bottom-width: 0;
}
.faq-desc :deep(.ui-collapse)-item-content {
  border-bottom-width: 0;
}

`),
  minify: true,
  sourceMap: true
});

[devongovett]

Shouldn't that syntax be compiled by Vue before it reaches lightningcss? That is not valid CSS syntax.

[lzxb]

Vue loader always handles it last

      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader'],
        type: 'javascript/auto',
      },

[devongovett]

Why? Shouldn't it run first?

[lzxb]

Rspack related documentation always requires this to be written.

[lzxb]

See detail: https://rspack.dev/guide/tech/vue#vue-3

[dflock]

I've started seeing this since upgrading to Vite 6.x, while using lightningcss. My relevant vite.config.ts look like this:

  css: {
    transformer: 'lightningcss',
  },
  build: {
    cssMinify: 'lightningcss',
  }

and I see this when running dev or build:

[vite:css][lightningcss] 'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?
1  |
2  |  :deep(.code_header) {
   |        ^
3  |    display: none;
4  |  }

It looks like vitejs/vite#495 didn't include this?

[devongovett]

Again, why is this not being compiled to valid CSS before reaching Lightning CSS?

[amir20]

This is happening to me as well. I am also using the new Vite 6.x. My configuration is very minimal:

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import SVGLoader from "vite-svg-loader";
import UnoCSS from "unocss/vite";
import WebfontDownload from "vite-plugin-webfont-dl";

export default defineConfig({
  css: {
    transformer: "lightningcss",
  },
  plugins: [Vue(), UnoCSS(), SVGLoader(), WebfontDownload()],
});

It sounds like from what @devongovett is saying is that Vue needs to run first and then lightning CSS. But that doesn't seem like it is happening.

Here is the error:

[vite:css][lightningcss] 'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?
18 |    }
19 |
20 |    :deep(.wave:nth-of-type(4)) {
   |          ^
21 |      fill: #0fb9b1;
22 |    }

I am using :deep in the a different project with tailwind@v4-beta and does seem to be ok.

[devongovett]

Has anyone filed an issue on the vite side yet? Seems like the problem is over there

[amir20]

Created vitejs/vite-plugin-vue#507

[TheAlexLichter]

Resolved via vitejs/vite-plugin-vue#521 (release pending at the time of commenting)