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

[zettadam]

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

> [email protected] 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

[zettadam]

:where is valid in recent browsers.

[zettadam]

While esbuild understands general CSS syntax and can understand some CSS rules (enough to bundle CSS file together and to minify CSS reasonably well), esbuild does not contain complete knowledge of CSS. This means esbuild takes a "garbage in, garbage out" philosophy toward CSS. If you want to verify that your compiled CSS is free of typos, you should be using a CSS linter in addition to esbuild. — esbuild docs

This would suggest that esbuild doesn't care if CSS is valid. I'll try to bundle openprops css files directly with esbuild to see.

[Update]: I run esbuild --bundle ./node_modules/open-props/normalize.min.css --outfile=out.css without any issues. Took 2ms.

[sapphi-red]

I know :where is a valid css. I thought :not>cite may not be valid. I know there is a syntax like :not(.foo), but is it possible to use :not without brackets?

Also the output of postcss is invalid because the last bracket is missing. :where(blockquote, :not(ltr)

This would suggest that esbuild doesn't care if CSS is valid.

Yes that's true. So it is a bug in esbuild. esbuild fails to handle a css which lacks a closing bracket.

[lucianokrebs]

The solution is not 100% related, but I landed here searching for the same error.
We have a Vue 2 project using Vite with the CI/CD configured with gitlab-runner.

We were using a t2.xlarge to run the pipelines and mistakenly we changed that to a t2.small.
It caused the pipelines to freeze with a message:

vite v2.9.9 building for production...
transforming... 

The fix to the issue was not related to the Vite version or any CSS-related changes. We just returned the EC2 instance to its original size and the build script finished correctly.

[sapphi-red]

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