Minify css will transform rgba to #rrggbbaa

[Ttou]

Describe the bug

use esbuild to minify css will transform rgba to #rrggbbaa，android webview can‘t support：#rrggbbaa

• in vite.config.js set build.config.target with ['chrome61'] can't work
• create build.js set target with ['chrome61'] can work

build.js

const esbuild = require('esbuild')

esbuild.buildSync({
  entryPoints: ['app.css'],
  minify: true,
  target: ['chrome61'],
  outfile: 'out.css'
})

Reproduction

#app {
  background-color: rgba(0, 0, 0, 0.1);
}

const esbuild = require('esbuild')

esbuild.buildSync({
  entryPoints: ['app.css'],
  minify: true,
  outfile: 'out.css'
})

#app{background-color:#0000001a}

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 9.96 GB / 15.84 GB
  Binaries:
    Node: 14.17.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.73)
    Internet Explorer: 11.0.19041.906
  npmPackages:
    vite: ^2.5.0 => 2.5.0

Used Package Manager

npm

Logs

No response

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/vue-next 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.

[Shinigami92]

You reproduction doesn't include any vite related content but esbuild 🤔
Maybe it's an upstream feature request / bug and vite just needs to pass an option to esbuild?

[flicat]

I have the same problem 😢

[Ttou]

You reproduction doesn't include any vite related content but esbuild 🤔
Maybe it's an upstream feature request / bug and vite just needs to pass an option to esbuild?

since vite 2.5.0，it use esbuild to minify css will cause this issue

[Shinigami92]

You reproduction doesn't include any vite related content but esbuild 🤔
Maybe it's an upstream feature request / bug and vite just needs to pass an option to esbuild?

since vite 2.5.0，it use esbuild to minify css will cause this issue

Exactly, that's why I recommended to open an issue at esbuild and not here in vite
The performance and benefit since 2.5 using esbuild to minify css outstands the minor side effects and issues coming with that
So now one of you need to create an issue at esbuild and let them know
The "problem" should be tackled at the root and not monkey patched in vite

[Ttou]

@Shinigami92 someone has report it issue

the problem is esbuild can't identify target value in vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    // esbuild can't identify
    target: ['chrome61']
  }
})

[Shinigami92]

I currently don't have the time to dive deeper into it but I found these two lines:

vite/packages/vite/src/node/plugins/css.ts

Line 314 in 28e4ee9

css = await minifyCSS(css, config)

vite/packages/vite/src/node/plugins/css.ts

Line 379 in 28e4ee9

css = await minifyCSS(css, config)

Maybe someone of you could debug it or write a test and watch the build.target value of config and if it is passed correctly or not

[Ttou]

@Shinigami92 since vite 2.5.1, set target with chrome61, run build & run serve will report an error：

vite.config.js

import legacy from '@vitejs/plugin-legacy'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src')
      }
    ]
  },
  plugins: [
    createVuePlugin({
      jsx: true,
      jsxOptions: {
        compositionAPI: true,
        vOn: false,
        vModel: false
      }
    }),
    legacy()
  ],
  build: {
    brotliSize: false,
    target: ['chrome61']
  }
})

[patak-dev]

@Ttou this seems unrelated to this issue. Please open a new one with a minimal reproduction so it can be properly tracked. Thanks!

[shenX-2021]

@Shinigami92 since vite 2.5.1, set target with chrome61, run build & run serve will report an error：

vite.config.js

import legacy from '@vitejs/plugin-legacy'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, 'src')
      }
    ]
  },
  plugins: [
    createVuePlugin({
      jsx: true,
      jsxOptions: {
        compositionAPI: true,
        vOn: false,
        vModel: false
      }
    }),
    legacy()
  ],
  build: {
    brotliSize: false,
    target: ['chrome61']
  }
})

I also encountered this problem. It happend when using Lazy Loading Routes by vue-router like the below code

createRouter({
  history: createWebHashHistory('/'),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('/src/views/Home.vue')
    }
  ]
});

and vite.config.js

export default defineConfig({
  // ...
  build: {
    target: ['chrome61']
  },
})