web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
9.2k stars 537 forks source link

[Bug]: about lightningcss minimizer, which could cause the difference about dev & prod env #7813

Closed ja-plus closed 3 days ago

ja-plus commented 1 week ago

System Info

System: OS: Windows 10 10.0.19044 CPU: (4) x64 Intel(R) Xeon(R) Silver 4214 CPU @ 2.20GHz Memory: 1.07 GB / 7.99 GB Binaries: Node: 18.16.0 - D:\ThsSoftware\nodejs1816_ths\ths\node.EXE Yarn: 1.22.22 - D:\ThsSoftware\nodejs1816_ths\ths\yarn.CMD npm: 8.19.4 - D:\ThsSoftware\nodejs1816_ths\ths\npm.CMD pnpm: 8.11.0 - D:\ThsSoftware\nodejs1816_ths\ths\pnpm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (128.0.2739.54) Internet Explorer: 11.0.19041.1566 npmPackages: @rspack/cli: ^1.0.3 => 1.0.3 @rspack/core: ^1.0.3 => 1.0.3

Details

The lightingcss will minimize the code, and the targets config not take effetc.

Example

.test {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

to

.test {
  inset: 0;
}

The inset can not be used in chrome < 87

I've tried the targets config but not worked

new rspack.LightningCssMinimizerRspackPlugin({
   minimizerOptions: {
     targets: 'chrome 49',
    },
}),

Reproduce link

No response

Reproduce Steps

prepare a css

style.css

.test-css-minimize{
  top: 0;
  left:0;
  right:0;
  bottom:0;
}

main.js

import './style.css';

rspack.config.js

optimization: {
    minimizer: [
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: {
          targets: 'chrome 84',
        },
      }),
    ],
  },

npm run build

result:

图片

please take back rspack.SwcCssMinimizerRspackPlugin

ja-plus commented 1 week ago

the lightning css worked correct

"lightningcss": "^1.26.0"

main.js:

import { transform } from 'lightningcss';

let { code, map } = transform({
  filename: 'style.css',
  code: Buffer.from(`
    .test-css-minimize {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }`),
  minify: true,
  sourceMap: true,
  targets: {
    chrome: 84,
  },
});
console.log(code.toString());

result:

Executing task: npm run start 

> lightningcss@1.0.0 start
> node main.js

.test-css-minimize{top:0;bottom:0;left:0;right:0}

// if not set target:
.test-css-minimize{inset:0}
SoonIter commented 1 week ago

https://github.com/web-infra-dev/rspack/pull/7811

noshower commented 1 week ago

You can temporarily use this configuration to resolve the issue.

 minimizerOptions: {
         targets: 'chrome 84',
         // empty object
         exclude: {}
 },
chenjiahan commented 3 days ago

Fixed by https://github.com/web-infra-dev/rspack/pull/7811