[Bug] `vite build` hangs when building a React app with PostCSS

Describe the bug

I’m unable to complete the build process npm run build using Vite + PostCSS on my machine as well as online in stackblitz or via Github Actions.

Running in dev mode works fine and CSS file are processed without any issue. Building it without postcss.config.js file works without any problem.

Attached in Reproduction is a link to a standard react setup referenced in “Trying Vite Online” documentation

Reproduction

https://stackblitz.com/edit/vitejs-vite-zoeewe?file=index.html&terminal=dev

System Info

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 60.46 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.7.0 - ~/.asdf/installs/nodejs/16.7.0/bin/node
    npm: 7.20.3 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 96.0.2
    Firefox Developer Edition: 98.0
    Safari: 15.4

Used Package Manager

npm

Logs

> react-starter-vite@0.0.1 build
> vite build "--debug"

  vite:config bundled config file loaded in 716.00ms +0ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  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',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  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   server: {
  vite:config     preTransformRequests: true,
  vite:config     https: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   test: {
  vite:config     coverage: { all: true, src: [Array], exclude: [Array] },
  vite:config     environment: 'jsdom',
  vite:config     exclude: [
  vite:config       'build',
  vite:config       'coverage',
  vite:config       'dist',
  vite:config       'node_modules',
  vite:config       'public',
  vite:config       'reports',
  vite:config       'tests'
  vite:config     ],
  vite:config     globals: true,
  vite:config     reporters: [ 'default', 'junit' ],
  vite:config     outputFile: './reports/junit.xml'
  vite:config   },
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   optimizeDeps: {
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: '/Users/xx/Repos/github/vite-react-starter/vite.config.js',
  vite:config   configFileDependencies: [ '/Users/xx/Repos/github/vite-react-starter/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: '/Users/xx/Repos/github/vite-react-starter',
  vite:config   base: '/',
  vite:config   publicDir: '/Users/xx/Repos/github/vite-react-starter/public',
  vite:config   cacheDir: '/Users/xx/Repos/github/vite-react-starter/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   isProduction: true,
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: false,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  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(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +14ms
vite v2.9.8 building for production...

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 https://github.com/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.

[sapphi-red]

The direct reason here was that esbuild transform was not ending. So for a workaround, set build.minify to false.

---

First, open-props/normalize(code) includes the css below.

:where(blockquote,:not>cite){border-inline-start-width:var(--border-size-3)}

This becomes like below after postcss. The output is not a valid css.

:where(blockquote, :not(ltr) {
  border-left-width: 3px
}
:where(blockquote, :not(rtl) {
  border-right-width: 3px
}

Then this css gets processed by esbuild to be minified. But this process never ends.

reproduction code (run this with node postcss.js and node esbuild.js)

So there’s two upstream bugs here.

1. postcss (and the plugins) is outputting invalid css
   • I’m not sure the input css is valid. If it is not valid then it is a bug in open-props not postcss.
2. esbuild never ends when an invalid css is fed

[sapphi-red]

Closing as it was fixed with esbuild 0.14.42. (https://github.com/evanw/esbuild/issues/2276) See https://github.com/csstools/postcss-plugins/issues/400 for the postcss related ones.