'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo #507

amir20 · 2025-01-17T19:54:56Z

Describe the bug

Starting with vite 6.x, I started getting the following errors when using lightningcss:

[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 |    }

This has been discussed in parcel-bundler/lightningcss#871 (comment)

Seems like Vite is processing css before Vue has processed the css.

Reproduction

https://stackblitz.com/edit/vitejs-vite-k5i7wfpr

Steps to reproduce

Pretty simple configuration:

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()],
});

System Info

System:
    OS: macOS 15.2
    CPU: (12) arm64 Apple M3 Pro
    Memory: 183.94 MB / 18.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 23.2.0 - ~/.local/state/fnm_multishells/21576_1737139643781/bin/node
    npm: 10.9.0 - ~/.local/state/fnm_multishells/21576_1737139643781/bin/npm
    pnpm: 9.14.2 - ~/.local/state/fnm_multishells/21576_1737139643781/bin/pnpm
    bun: 1.1.45 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 131.0.6778.266
    Safari: 18.2
  npmPackages:
    @vitejs/plugin-vue: 5.2.1 => 5.2.1
    vite: 6.0.7 => 6.0.7

Used Package Manager

pnpm

Logs

Click to expand!

❯ pnpm vite build --debug 11:53:18
vite:config bundled config file loaded in 568.37ms +0ms
vite:config using resolved config: {
vite:config css: {
vite:config transformer: 'lightningcss',
vite:config preprocessorMaxWorkers: 0,
vite:config devSourcemap: false,
vite:config lightningcss: {
vite:config targets: {
vite:config chrome: 5242880,
vite:config edge: 5242880,
vite:config safari: 917504,
vite:config firefox: 5111808,
vite:config opera: 4390912
vite:config }
vite:config }
vite:config },
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:watch-package-data',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'unocss:transformers:pre',
vite:config 'unocss:global:build:scan',
vite:config 'unocss:global:content',
vite:config 'svg-loader',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:vue',
vite:config 'unocss:config',
vite:config 'unocss:transformers:undefined',
vite:config 'unocss:devtools',
vite:config 'unocss:api',
vite:config 'unocss:global:build:generate',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:rollup-options-plugins',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'unocss:transformers:post',
vite:config 'unocss:global:build:bundle',
vite:config 'vite-plugin-webfont-dl',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:manifest',
vite:config 'vite:ssr-manifest',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config polyfillModulePreload: true,
vite:config modulePreload: { polyfill: true },
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config sourcemap: false,
vite:config terserOptions: {},
vite:config rollupOptions: {},
vite:config commonjsOptions: { include: [ /node_modules/ ], extensions: [ '.js', '.cjs' ] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [ /node_modules/ ] },
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config cssCodeSplit: true,
vite:config minify: 'esbuild',
vite:config ssr: false,
vite:config emitAssets: true,
vite:config createEnvironment: [Function: createEnvironment],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssMinify: true
vite:config },
vite:config resolve: {
vite:config externalConditions: [ 'node' ],
vite:config extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ],
vite:config dedupe: [ 'vue' ],
vite:config noExternal: [],
vite:config external: [],
vite:config preserveSymlinks: false,
vite:config alias: [
vite:config {
vite:config find: /^/?@vite/env/,
vite:config replacement: '/@fs/Users/araminfar/Workspace/amir20.github.io/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs'
vite:config },
vite:config {
vite:config find: /^/?@vite/client/,
vite:config replacement: '/@fs/Users/araminfar/Workspace/amir20.github.io/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/client.mjs'
vite:config }
vite:config ],
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config conditions: [ 'module', 'node', 'development|production' ],
vite:config enableBuiltinNoExternalCheck: false
vite:config },
vite:config define: {
vite:config VUE_OPTIONS_API: true,
vite:config VUE_PROD_DEVTOOLS: false,
vite:config VUE_PROD_HYDRATION_MISMATCH_DETAILS: false
vite:config },
vite:config ssr: {
vite:config target: 'node',
vite:config optimizeDeps: {
vite:config esbuildOptions: { preserveSymlinks: false },
vite:config include: [],
vite:config exclude: [],
vite:config needsInterop: [],
vite:config extensions: [],
vite:config holdUntilCrawlEnd: true,
vite:config force: false,
vite:config noDiscovery: true
vite:config },
vite:config external: [],
vite:config noExternal: [],
vite:config resolve: {
vite:config conditions: [ 'module', 'node', 'development|production' ],
vite:config externalConditions: [ 'node' ]
vite:config }
vite:config },
vite:config environments: {
vite:config client: {
vite:config define: {
vite:config VUE_OPTIONS_API: true,
vite:config VUE_PROD_DEVTOOLS: false,
vite:config VUE_PROD_HYDRATION_MISMATCH_DETAILS: false
vite:config },
vite:config resolve: {
vite:config externalConditions: [ 'node' ],
vite:config extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ],
vite:config dedupe: [ 'vue' ],
vite:config noExternal: [],
vite:config external: [],
vite:config preserveSymlinks: false,
vite:config alias: [
vite:config {
vite:config find: /^/?@vite/env/,
vite:config replacement: '/@fs/Users/araminfar/Workspace/amir20.github.io/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs'
vite:config },
vite:config {
vite:config find: /^/?@vite/client/,
vite:config replacement: '/@fs/Users/araminfar/Workspace/amir20.github.io/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/client.mjs'
vite:config }
vite:config ],
vite:config mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
vite:config conditions: [ 'module', 'browser', 'development|production' ],
vite:config enableBuiltinNoExternalCheck: false
vite:config },
vite:config keepProcessEnv: false,
vite:config consumer: 'client',
vite:config optimizeDeps: {
vite:config include: [],
vite:config exclude: [],
vite:config needsInterop: [],
vite:config extensions: [],
vite:config disabled: undefined,
vite:config holdUntilCrawlEnd: true,
vite:config force: false,
vite:config noDiscovery: false,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config dev: {
vite:config warmup: [],
vite:config sourcemap: { js: true },
vite:config sourcemapIgnoreList: [Function: isInNodeModules$1],
vite:config preTransformRequests: true,
vite:config createEnvironment: [Function: defaultCreateClientDevEnvironment],
vite:config recoverable: true,
vite:config moduleRunnerTransform: false
vite:config },
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config polyfillModulePreload: true,
vite:config modulePreload: { polyfill: true },
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config sourcemap: false,
vite:config terserOptions: {},
vite:config rollupOptions: {},
vite:config commonjsOptions: { include: [ /node_modules/ ], extensions: [ '.js', '.cjs' ] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [ /node_modules/ ] },
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config cssCodeSplit: true,
vite:config minify: 'esbuild',
vite:config ssr: false,
vite:config emitAssets: true,
vite:config createEnvironment: [Function: createEnvironment],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssMinify: true
vite:config }
vite:config },
vite:config ssr: {
vite:config define: {
vite:config VUE_OPTIONS_API: true,
vite:config VUE_PROD_DEVTOOLS: false,
vite:config VUE_PROD_HYDRATION_MISMATCH_DETAILS: false
vite:config },
vite:config resolve: {
vite:config externalConditions: [ 'node' ],
vite:config extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ],
vite:config dedupe: [ 'vue' ],
vite:config noExternal: [],
vite:config external: [],
vite:config preserveSymlinks: false,
vite:config alias: [
vite:config {
vite:config find: /^/?@vite/env/,
vite:config replacement: '/@fs/Users/araminfar/Workspace/amir20.github.io/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs'
vite:config },
vite:config {
vite:config find: /^/?@vite/client/,
vite:config replacement: '/@fs/Users/araminfar/Workspace/amir20.github.io/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/client.mjs'
vite:config }
vite:config ],
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config conditions: [ 'module', 'node', 'development|production' ],
vite:config enableBuiltinNoExternalCheck: false
vite:config },
vite:config keepProcessEnv: true,
vite:config consumer: 'server',
vite:config optimizeDeps: {
vite:config include: [],
vite:config exclude: [],
vite:config needsInterop: [],
vite:config extensions: [],
vite:config disabled: undefined,
vite:config holdUntilCrawlEnd: true,
vite:config force: false,
vite:config noDiscovery: true,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config dev: {
vite:config warmup: [],
vite:config sourcemap: { js: true },
vite:config sourcemapIgnoreList: [Function: isInNodeModules$1],
vite:config preTransformRequests: false,
vite:config createEnvironment: [Function: defaultCreateDevEnvironment],
vite:config recoverable: false,
vite:config moduleRunnerTransform: true
vite:config },
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config polyfillModulePreload: true,
vite:config modulePreload: { polyfill: true },
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config sourcemap: false,
vite:config terserOptions: {},
vite:config rollupOptions: {},
vite:config commonjsOptions: { include: [ /node_modules/ ], extensions: [ '.js', '.cjs' ] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [ /node_modules/ ] },
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config cssCodeSplit: true,
vite:config minify: false,
vite:config ssr: true,
vite:config emitAssets: true,
vite:config createEnvironment: [Function: createEnvironment],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssMinify: 'esbuild'
vite:config }
vite:config }
vite:config },
vite:config configFile: '/Users/araminfar/Workspace/amir20.github.io/vite.config.ts',
vite:config configFileDependencies: [ '/Users/araminfar/Workspace/amir20.github.io/vite.config.ts' ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config build: {}
vite:config },
vite:config root: '/Users/araminfar/Workspace/amir20.github.io',
vite:config base: '/',
vite:config decodedBase: '/',
vite:config rawBase: '/',
vite:config publicDir: '/Users/araminfar/Workspace/amir20.github.io/public',
vite:config cacheDir: '/Users/araminfar/Workspace/amir20.github.io/node_modules/.vite',
vite:config command: 'build',
vite:config mode: 'production',
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config bundleChain: [],
vite:config isProduction: true,
vite:config json: { namedExports: true, stringify: 'auto' },
vite:config esbuild: { jsxDev: false },
vite:config server: {
vite:config port: 5173,
vite:config strictPort: false,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: false,
vite:config proxy: undefined,
vite:config cors: true,
vite:config headers: {},
vite:config warmup: { clientFiles: [], ssrFiles: [] },
vite:config middlewareMode: false,
vite:config fs: {
vite:config strict: true,
vite:config deny: [ '.env', '.env.', '.{crt,pem}', '/.git/' ],
vite:config allow: [ '/Users/araminfar/Workspace/amir20.github.io' ]
vite:config },
vite:config preTransformRequests: true,
vite:config perEnvironmentStartEndDuringDev: false,
vite:config sourcemapIgnoreList: [Function: isInNodeModules$1]
vite:config },
vite:config builder: undefined,
vite:config preview: {
vite:config port: 4173,
vite:config strictPort: false,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: false,
vite:config proxy: undefined,
vite:config cors: true,
vite:config headers: {}
vite:config },
vite:config envDir: '/Users/araminfar/Workspace/amir20.github.io',
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(1) {
vite:config 'fnpd_/Users/araminfar/Workspace/amir20.github.io' => {
vite:config dir: '/Users/araminfar/Workspace/amir20.github.io',
vite:config data: {
vite:config name: 'amirraminfar.me',
vite:config version: '0.0.0',
vite:config private: true,
vite:config type: 'module',
vite:config packageManager: '[email protected]',
vite:config scripts: {
vite:config build: 'cross-env NODE_ENV=production vite-ssg build',
vite:config dev: 'vite --open',
vite:config preview: 'vite preview'
vite:config },
vite:config devDependencies: {
vite:config critters: '^0.0.25',
vite:config 'http-server': '^14.1.1',
vite:config prettier: '^3.4.2'
vite:config },
vite:config dependencies: {
vite:config '@iconify-json/ph': '^1.2.2',
vite:config '@unocss/reset': '^65.4.2',
vite:config '@unocss/transformer-directives': '^65.4.2',
vite:config '@vitejs/plugin-vue': '5.2.1',
vite:config '@vue/compiler-sfc': '^3.5.13',
vite:config '@vue/server-renderer': '^3.5.13',
vite:config '@vueuse/head': '^2.0.0',
vite:config 'cross-env': '^7.0.3',
vite:config d3: '^7.9.0',
vite:config 'd3-selection': '^3.0.0',
vite:config 'd3-shape': '^3.2.0',
vite:config 'd3-timer': '^3.0.1',
vite:config lightningcss: '^1.29.1',
vite:config 'serve-static': '2.0.0-beta.2',
vite:config unocss: '^65.4.2',
vite:config 'unplugin-icons': '^22.0.0',
vite:config vite: '6.0.7',
vite:config 'vite-plugin-webfont-dl': '^3.10.4',
vite:config 'vite-ssg': '^25.0.0',
vite:config 'vite-svg-loader': '^5.1.0',
vite:config vue: '^3.5.13',
vite:config 'vue-router': '^4.5.0'
vite:config }
vite:config },
vite:config hasSideEffects: [Function: hasSideEffects],
vite:config setResolvedCache: [Function: setResolvedCache],
vite:config getResolvedCache: [Function: getResolvedCache]
vite:config },
vite:config set: [Function (anonymous)]
vite:config },
vite:config worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
vite:config future: undefined,
vite:config optimizeDeps: {
vite:config include: [],
vite:config exclude: [],
vite:config needsInterop: [],
vite:config extensions: [],
vite:config disabled: undefined,
vite:config holdUntilCrawlEnd: true,
vite:config force: false,
vite:config noDiscovery: false,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config dev: {
vite:config warmup: [],
vite:config sourcemap: { js: true },
vite:config sourcemapIgnoreList: [Function: isInNodeModules$1],
vite:config preTransformRequests: false,
vite:config createEnvironment: [Function: defaultCreateDevEnvironment],
vite:config recoverable: false,
vite:config moduleRunnerTransform: false
vite:config },
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks],
vite:config createResolver: [Function: createResolver],
vite:config fsDenyGlob: [Function: arrayMatcher],
vite:config safeModulePaths: Set(0) {}
vite:config } +142ms
vite v6.0.7 building for production...
transforming (1) src/main.js[vite:css][lightningcss] 'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?
6 | bottom: -10px;
7 |
8 | :deep(.wave:nth-of-type(1)) {
| ^
9 | fill: #a55eea;
10 | }
[vite:css][lightningcss] 'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?
10 | }
11 |
12 | :deep(.wave:nth-of-type(2)) {
| ^
13 | fill: #fed330;
14 | }
[vite:css][lightningcss] 'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?
14 | }
15 |
16 | :deep(.wave:nth-of-type(3)) {
| ^
17 | fill: #45aaf2;
18 | }
[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 | }
✓ 180 modules transformed.
✓ 1 webfont css downloaded. (14 ms, cache hit: 100.00%)
✓ 26 webfonts downloaded. (19 ms, cache hit: 100.00%)
dist/assets/favicon-DLpXBDQU.svg 0.81 kB │ gzip: 0.47 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3CUBGEe-DnPa8eh0.woff2 4.34 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkCnkaWzU-Cf6Wh-ak.woff2 4.47 kB
dist/assets/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_-DQ2yjD0Y.woff2 8.84 kB
dist/assets/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU-MV214wRY.woff2 9.49 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBGEe-CaxB3VTI.woff2 13.00 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkCXkaWzU-CEIe30GC.woff2 13.89 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3-UBGEe-DAIrzMIp.woff2 17.63 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBXkaWzU-BgJLMsj2.woff2 18.80 kB
dist/assets/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_-CR05oQ3b.woff2 20.32 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMaxKUBGEe-Bm5C9Z0M.woff2 20.41 kB
dist/assets/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_-Dr2SnCEI.woff2 21.19 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkaHkaWzU-mQQU5nC4.woff2 22.29 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3iUBGEe-B1tIhOr4.woff2 22.80 kB
dist/assets/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU-CQ1QqPi_.woff2 23.08 kB
dist/assets/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU-DWLruiEb.woff2 23.22 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkAnkaWzU-Cu0rrrwt.woff2 24.58 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe-Dqr_DJ6L.woff2 26.43 kB
dist/assets/phantom-Bd9OZgBa.png 28.26 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkCHkaWzU-cqKqHPSO.woff2 28.54 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3GUBGEe-mFIB_JhL.woff2 35.57 kB
dist/assets/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA-BGlevZWC.woff2 38.37 kB
dist/assets/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7-C5iWh5y6.woff2 38.75 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkC3kaWzU-xZvC1bSU.woff2 39.46 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBA-CHnqiQTt.woff2 40.13 kB
dist/assets/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMawCUBGEe-SopRAUEK.woff2 40.57 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkBnka-HlDuTyNj.woff2 44.19 kB
dist/assets/KFO5CnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmkenkaWzU-CHxzkRUY.woff2 44.34 kB
dist/index.html 59.60 kB │ gzip: 3.01 kB
dist/assets/clashleaders-CP40Zzqb.png 63.09 kB
dist/assets/dozzle-BK1kuqZA.png 127.96 kB
dist/assets/Waves-CJBhKvnx.css 0.29 kB │ gzip: 0.15 kB
dist/assets/Home-CrHZMn77.css 0.45 kB │ gzip: 0.27 kB
dist/assets/index-CeEibNMz.css 16.47 kB │ gzip: 4.31 kB
dist/assets/vue.f36acd1f-_ZNy3boC.js 0.92 kB │ gzip: 0.54 kB
dist/assets/About-Dcd5HdCc.js 1.72 kB │ gzip: 1.01 kB
dist/assets/Home-pcMDf02V.js 1.91 kB │ gzip: 0.98 kB
dist/assets/Projects-BoJZhsmj.js 2.91 kB │ gzip: 1.39 kB
dist/assets/Waves-Dq94R6kw.js 19.67 kB │ gzip: 6.56 kB
dist/assets/index-DjPXDfmR.js 120.61 kB │ gzip: 47.42 kB
✓ built in 573ms

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

sapphi-red · 2025-01-18T09:10:44Z

It seems plugin-vue handles the vue specific features after Vite handles the CSS transformation. plugin-vue needs to add a code to suppress these warnings.
A similar warning is output for :slotted and :global.

dflock · 2025-01-21T15:12:26Z

This also affects me, as I'm using vue, lightningcss and have just upgrqded to vite 6.0.11.

fl0werpowers · 2025-01-22T23:20:29Z

Having the similar warning for :global in my Astro project with Vite 6.0.11 and LightningCSS 1.29.1. Not using Vue, though.

TotallyInformation · 2025-02-01T14:27:34Z

Agree, just upgraded to Astro v5 which uses Vite v6 and now getting:

13:06:18 [WARN] [vite] [vite:css][lightningcss] 'details-content' is not recognized as a valid pseudo-element. Did you mean ':details-content' (pseudo-class) or is this a typo?

Astro config:

export default defineConfig({
    ...
    vite: {
        css: {
            transformer: "lightningcss",
            lightningcss: {
                targets: browserslistToTargets(browserslist('>=0.12%, not ie > 0')),
            },
        },
        build: {
            cssMinify: 'lightningcss'
        },
    },
    ...
})

edison1105 · 2025-02-05T01:08:08Z

@sapphi-red
This error is thrown before transformStyle is called. It seems like vite process the CSS code before plugin-vue

sapphi-red · 2025-02-05T01:56:35Z

@edison1105 Yes, that's how it worked with postcss as well. Vite doesn't know if this is intended or not, so plugin-vue needs to surppress this warning.

edison1105 · 2025-02-05T03:11:51Z

@sapphi-red
Not using vue also has this problem, see #507 (comment)

sapphi-red · 2025-02-05T03:23:39Z

@edison1105 That one needs to be handled by astro as it's a astro specific feature.

amir20 added the pending triage label Jan 17, 2025

amir20 mentioned this issue Jan 17, 2025

[bug] :deep Compilation error parcel-bundler/lightningcss#871

Open

sapphi-red transferred this issue from vitejs/vite Jan 18, 2025

sapphi-red added the p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) label Jan 18, 2025

github-actions bot removed the pending triage label Jan 18, 2025

edison1105 linked a pull request Feb 6, 2025 that will close this issue

fix(plugin-vue): suppress warnings for non-recognized pseudo selectors form lightningcss #521

Open

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo #507

'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo #507

amir20 commented Jan 17, 2025 •

edited

Loading

sapphi-red commented Jan 18, 2025

dflock commented Jan 21, 2025

fl0werpowers commented Jan 22, 2025 •

edited

Loading

TotallyInformation commented Feb 1, 2025 •

edited

Loading

edison1105 commented Feb 5, 2025

sapphi-red commented Feb 5, 2025

edison1105 commented Feb 5, 2025

sapphi-red commented Feb 5, 2025

'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo #507

'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo #507

Comments

amir20 commented Jan 17, 2025 • edited Loading

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

sapphi-red commented Jan 18, 2025

dflock commented Jan 21, 2025

fl0werpowers commented Jan 22, 2025 • edited Loading

TotallyInformation commented Feb 1, 2025 • edited Loading

edison1105 commented Feb 5, 2025

sapphi-red commented Feb 5, 2025

edison1105 commented Feb 5, 2025

sapphi-red commented Feb 5, 2025

amir20 commented Jan 17, 2025 •

edited

Loading

fl0werpowers commented Jan 22, 2025 •

edited

Loading

TotallyInformation commented Feb 1, 2025 •

edited

Loading