`vite build` produces incorrectly flattened nested CSS #18974

RobinMalfait · 2024-12-16T13:08:31Z

Describe the bug

When using modern CSS with nesting, a production build will generate invalid CSS.

Given the following CSS:

.foo {
  :where(& > .bar) {
    color: red;
  }
}

In a production build, this is flattened as:

.foo :where(>.bar){color:red}

This CSS is invalid because :where(…) doesn't accept relative selectors.

But I expect it to be flattened as this instead:

:where(.foo>.bar){color:red}

Note: in dev mode (vite dev) it works as expected.

Reproduction

https://github.com/RobinMalfait/vite-incorrect-css-flattening

Steps to reproduce

npm install
npm run dev — open http://localhost:5173, the text should be red
npm run build — open http://localhost:4173, the text should be red, but is black

System Info

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 3.51 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.local/state/fnm_multishells/16285_1734176270818/bin/node
    Yarn: 1.22.22 - ~/.local/state/fnm_multishells/1076_1734173982354/bin/yarn
    npm: 9.6.7 - ~/.local/state/fnm_multishells/16285_1734176270818/bin/npm
    pnpm: 9.8.0 - ~/Library/pnpm/pnpm
    bun: 1.1.39 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 120.1.61.114
    Chrome: 131.0.6778.140
    Chrome Canary: 133.0.6898.0
    Edge: 124.0.2478.80
    Firefox Nightly: 131.0a1
    Safari: 18.2
    Safari Technology Preview: 18.2
  npmPackages:
    vite: ^6.0.3 => 6.0.3

Used Package Manager

npm

Logs

Click to expand!

❯ vite build --debug
  vite:config no config file found. +0ms
  vite:config using resolved config: {
  vite:config   root: '/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening',
  vite:config   base: '/',
  vite:config   mode: 'production',
  vite:config   configFile: undefined,
  vite:config   logLevel: undefined,
  vite:config   clearScreen: undefined,
  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   environments: {
  vite:config     client: {
  vite:config       define: undefined,
  vite:config       resolve: {
  vite:config         externalConditions: [ 'node' ],
  vite:config         extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ],
  vite:config         dedupe: [],
  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/robin/github.com/RobinMalfait/vite-incorrect-css-flattening/node_modules/vite/dist/client/env.mjs'
  vite:config           },
  vite:config           {
  vite:config             find: /^\/?@vite\/client/,
  vite:config             replacement: '/@fs/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening/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   },
  vite:config   resolve: {
  vite:config     externalConditions: [ 'node' ],
  vite:config     extensions: [ '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json' ],
  vite:config     dedupe: [],
  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/robin/github.com/RobinMalfait/vite-incorrect-css-flattening/node_modules/vite/dist/client/env.mjs'
  vite:config       },
  vite:config       {
  vite:config         find: /^\/?@vite\/client/,
  vite:config         replacement: '/@fs/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening/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   configFileDependencies: [],
  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     environments: {
  vite:config       client: {
  vite:config         define: undefined,
  vite:config         resolve: undefined,
  vite:config         dev: {},
  vite:config         build: {},
  vite:config         optimizeDeps: undefined
  vite:config       }
  vite:config     },
  vite:config     resolve: { conditions: undefined, mainFields: undefined }
  vite:config   },
  vite:config   decodedBase: '/',
  vite:config   rawBase: '/',
  vite:config   publicDir: '/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening/public',
  vite:config   cacheDir: '/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   bundleChain: [],
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:watch-package-data',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  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: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     '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   css: {
  vite:config     transformer: 'postcss',
  vite:config     preprocessorMaxWorkers: 0,
  vite:config     devSourcemap: false,
  vite:config     lightningcss: undefined
  vite:config   },
  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: [
  vite:config         '/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening'
  vite:config       ]
  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/robin/github.com/RobinMalfait/vite-incorrect-css-flattening',
  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/robin/github.com/RobinMalfait/vite-incorrect-css-flattening' => {
  vite:config       dir: '/Users/robin/github.com/RobinMalfait/vite-incorrect-css-flattening',
  vite:config       data: {
  vite:config         name: 'vite-incorrect-css-flattening',
  vite:config         version: '1.0.0',
  vite:config         description: '',
  vite:config         main: 'index.js',
  vite:config         scripts: { dev: 'vite dev', build: 'vite build && vite preview' },
  vite:config         keywords: [],
  vite:config         author: 'Robin Malfait',
  vite:config         license: 'ISC',
  vite:config         devDependencies: { vite: '^6.0.3' }
  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   ssr: {
  vite:config     target: 'node',
  vite:config     optimizeDeps: { esbuildOptions: { preserveSymlinks: false } },
  vite:config     resolve: { conditions: undefined, externalConditions: undefined }
  vite:config   },
  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 } +13ms
vite v6.0.3 building for production...
✓ 2 modules transformed.
dist/index.html                 0.20 kB │ gzip: 0.15 kB
dist/assets/index-DiaIqj75.css  0.03 kB │ gzip: 0.05 kB
✓ built in 41ms

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:

clementgateaud · 2025-01-09T11:16:11Z

Hello! Any news on this issue ? I have the same issue using some tailwind classes on Nuxt.

engyii · 2025-01-13T10:21:42Z

I +1, Got the same issue here, this CSS from tailwind 4 (beta > 6) is not applied in our nuxt build (3.15.1)

.space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }

became

.space-x-2 :where(>:not(:last-child)) {
                    --tw-space-x-reverse: 0;
                    margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start: calc(var(--spacing)*2*var(--tw-space-x-reverse))
                }

The beta version of tailwind 4 is not buildable with vite as a result (or I don't know how)

evdama · 2025-01-14T10:10:09Z

I've moved my Sveltekit project to Tailwind v4 with Vite yesterday and there I have a utilities.css which among other things has

@utility scrollbar-hidden {
  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

This shows up and works in my local dev build using vite dev but is absent from the production build using vite build. My vite.config.ts is rather simple:

import { defineConfig } from 'vitest/config'
import { sveltekit } from '@sveltejs/kit/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  build: { target: 'ESNext' },
  plugins: [sveltekit(), tailwindcss()],
  test: {
    include: ['tests/vitest/**/*.{test,spec}.{js,ts}']
  }
})

I'm currently on those package versions:

sa@Mac: ~/0/ulm  |development ✓| gr vite package.json
package.json:8:    "dev": "vite dev",
package.json:9:    "build": "vite build",
package.json:10:    "preview": "vite preview",
package.json:18:    "tests:unit": "vitest --run",
package.json:28:    "@sveltejs/vite-plugin-svelte": "^5.0.3",
package.json:30:    "@tailwindcss/vite": "4.0.0-beta.9",
package.json:74:    "vite": "^6.0.7",
package.json:75:    "vitest": "^2.1.8",
sa@Mac: ~/0/ulm  |development ✓| gr tailwind package.json
package.json:29:    "@tailwindcss/forms": "^0.5.10",
package.json:30:    "@tailwindcss/vite": "4.0.0-beta.9",
package.json:53:    "prettier-plugin-tailwindcss": "^0.6.9",
package.json:67:    "tailwindcss": "4.0.0-beta.9",
sa@Mac: ~/0/ulm  |development ✓|

sk31park · 2025-01-24T04:04:04Z

Has anyone resolved this issue?
I'm having the exact same issue with nuxt build.

Botato300 · 2025-01-24T12:59:29Z

same here!
original code:

 .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }

final code:

.space-x-4 :where(>:not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))
    }

RobinMalfait added the pending triage label Dec 16, 2024

RobinMalfait mentioned this issue Dec 16, 2024

[v4] Tailwind utilities layer absent in production build when vite.build.minify is used tailwindlabs/tailwindcss#15278

Open

RobinMalfait changed the title ~~Production builds incorrectly flatten nested CSS~~ vite build produces incorrectly flattened nested CSS Dec 16, 2024

sapphi-red mentioned this issue Dec 16, 2024

Minifying Css nesting :where(& > .bar) generates invalid CSS evanw/esbuild#4005

Open

sapphi-red added bug: upstream Bug in a dependency of Vite feat: css p3-downstream-blocker Blocking the downstream ecosystem to work properly (priority) labels Dec 16, 2024

github-actions bot removed the pending triage label Dec 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`vite build` produces incorrectly flattened nested CSS #18974

`vite build` produces incorrectly flattened nested CSS #18974

RobinMalfait commented Dec 16, 2024

clementgateaud commented Jan 9, 2025

engyii commented Jan 13, 2025

evdama commented Jan 14, 2025 •

edited

Loading

sk31park commented Jan 24, 2025

Botato300 commented Jan 24, 2025 •

edited

Loading

vite build produces incorrectly flattened nested CSS #18974

vite build produces incorrectly flattened nested CSS #18974

Comments

RobinMalfait commented Dec 16, 2024

Describe the bug

Reproduction

Steps to reproduce

System Info

Used Package Manager

Logs

Validations

clementgateaud commented Jan 9, 2025

engyii commented Jan 13, 2025

evdama commented Jan 14, 2025 • edited Loading

sk31park commented Jan 24, 2025

Botato300 commented Jan 24, 2025 • edited Loading

`vite build` produces incorrectly flattened nested CSS #18974

`vite build` produces incorrectly flattened nested CSS #18974

evdama commented Jan 14, 2025 •

edited

Loading

Botato300 commented Jan 24, 2025 •

edited

Loading