I lost some css rules when I use rem and vw in the same time

2
closed
ben-lau
ben-lau
Posted 6 months ago

I lost some css rules when I use rem and vw in the same time #217

Bug description

my css stylesheet has some rem and vw in the same time by using postcss plugin, then I found some property will lost the rem rule but kept the vw rule. image

Reproduction

part of my webpack config:

{
  optimization: {
    minimize: true,
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          name: 'vendors',
          test: {},
          priority: -10,
          chunks: 'initial',
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true,
        },
      },
    },
    minimizer: [
      new ESBuildMinifyPlugin({
        css: true,
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { publicPath: '../' },
          },
          {
            loader: 'css-loader',
            options: { importLoaders: 2, sourceMap: false },
          },
          {
            loader: 'esbuild-loader',
            options: { loader: 'css', minify: true },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: false,
              postcssOptions: { plugins: ['postcss-pixel-to-remvw'] },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].chunk.[contenthash:8].css',
    }),
  ],
};

Node.js package manager

npm

Environment

System:
    OS: macOS 11.5.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 989.15 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    esbuild-loader: ^2.16.0 => 2.16.0 
    webpack: ^5.58.1 => 5.60.0

Can you contribute a fix?

  • I’m interested in opening a pull request for this issue.
privatenumber
privatenumber
Created 6 months ago

Since esbuild-loader is just a wrapper for esbuild, you'll want to file your report with https://github.com/evanw/esbuild

ben-lau
ben-lau
Created 6 months ago

thanks for you reply, I'll report it to esbuild