Skip to content

Builds Fail with Lightning CSS Minifier and ES2023 Target #17983

@4everTonyStark

Description

@4everTonyStark

Describe the bug

When using Lightning CSS as the CSS minifier and es2023 as the build target in vite.config.js, Vite fails to complete a build, outputting the following error:

error during build:
[vite:css-post] Unsupported target "es2023"
    at eval (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:38053:29)
    at convertTargets (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:38049:51)
    at minifyCSS (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:37187:16)
    at async finalizeCss (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:37029:11)

This issue goes away if the build target is changed to es2022 or earlier, or if build.cssMinify is not set to lightningcss. This seems to be an issue with the build.cssTarget option, which is implicitly set to build.target here by Vite since an explicit build.cssTarget is not provided.

Reproduction

https://stackblitz.com/edit/vitejs-vite-hhhonn?file=vite.config.js&terminal=dev

Steps to reproduce

  1. Stop the dev server in the terminal.
  2. Run vite build.
  3. Observe error.

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 65.00 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/72466_1725055346740/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/72466_1725055346740/bin/yarn
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/72466_1725055346740/bin/npm
    pnpm: 9.9.0 - ~/Library/Caches/fnm_multishells/72466_1725055346740/bin/pnpm
    bun: 1.0.25 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.114
    Safari: 17.6

Used Package Manager

pnpm

Logs

Click to expand!
  vite:config bundled config file loaded in 580.02ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2023' ],
  vite:config     cssTarget: [ 'es2023' ],
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     copyPublicDir: true,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     ssrEmitAssets: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     cssMinify: 'lightningcss',
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   css: { transformer: 'lightningcss', lightningcss: { targets: [Object] } },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     port: 8080,
  vite:config     strictPort: true,
  vite:config     open: true,
  vite:config     sourcemapIgnoreList: [Function: isInNodeModules$1],
  vite:config     middlewareMode: false,
  vite:config     fs: {
  vite:config       strict: true,
  vite:config       allow: [Array],
  vite:config       deny: [Array],
  vite:config       cachedChecks: undefined
  vite:config     }
  vite:config   },
  vite:config   configFile: '/home/projects/vitejs-vite-hhhonn/vite.config.js',
  vite:config   configFileDependencies: [ '/home/projects/vitejs-vite-hhhonn/vite.config.js' ],
  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: '/home/projects/vitejs-vite-hhhonn',
  vite:config   base: '/',
  vite:config   decodedBase: '/',
  vite:config   rawBase: '/',
  vite:config   resolve: {
  vite:config     mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   publicDir: '/home/projects/vitejs-vite-hhhonn/public',
  vite:config   cacheDir: '/home/projects/vitejs-vite-hhhonn/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     target: 'node',
  vite:config     optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
  vite:config   },
  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: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:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   esbuild: { jsxDev: false },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: true,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: true,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   envDir: '/home/projects/vitejs-vite-hhhonn',
  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_/home/projects/vitejs-vite-hhhonn' => {
  vite:config       dir: '/home/projects/vitejs-vite-hhhonn',
  vite:config       data: [Object],
  vite:config       hasSideEffects: [Function: hasSideEffects],
  vite:config       webResolvedImports: {},
  vite:config       nodeResolvedImports: {},
  vite:config       setResolvedCache: [Function: setResolvedCache],
  vite:config       getResolvedCache: [Function: getResolvedCache]
  vite:config     },
  vite:config     set: [Function (anonymous)]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     holdUntilCrawlEnd: true,
  vite:config     esbuildOptions: { preserveSymlinks: false }
  vite:config   },
  vite:config   worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
  vite:config   getSortedPlugins: [Function: getSortedPlugins],
  vite:config   getSortedPluginHooks: [Function: getSortedPluginHooks]
  vite:config } +5ms
vite v5.4.2 building for production...
✓ 7 modules transformed.
x Build failed in 418ms
error during build:
[vite:css-post] Unsupported target "es2023"
    at eval (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:38053:29)
    at convertTargets (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:38049:51)
    at minifyCSS (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:37187:16)
    at async finalizeCss (file:///home/projects/vitejs-vite-hhhonn/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:37029:11)

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions