来自“postcss-is-pseudo-class”插件：'' 中的复杂选择器不能转换为没有 ':is()' 的等效选择器

Question

我正在使用 cookiecutter 进行 django 项目。 我使用 webpack 设置了前端管道，并使用 flowbite。

一切都运行良好，直到我添加来自 flowbite 的切换按钮。

添加此按钮后，出现这些错误。

一开始以为是tailwindcss或者flowbite版本问题，所以更新了所有的包，但是并没有解决。

我可以假设是 postcss 或 webpack 配置的问题。

这是我的 postcss 配置。

module.exports = {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
  };

这是我的 webpack 配置。

const path = require('path');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const Terser = require("terser");

const exclusions = "/node_modules/";

module.exports = {
  target: 'web',
  context: path.join(__dirname, '../'),
  entry: {
    app: "./frontend/js/app.js",
  },
  output: {
    path: path.resolve(__dirname, "../static"), // Should be in STATICFILES_DIRS
    publicPath: "/static/", // Should match Django STATIC_URL
    filename: "js/[name].js", // No filename hashing, Django takes care of this
    chunkFilename: "[id]-[chunkhash].js", // DO have Webpack hash chunk filename, see below
  },
  module: {
    rules: [
      {
        test: /.*/,
        include: path.resolve(__dirname, "frontend/images"),
        exclude: exclusions,
        options: {
          context: path.resolve(__dirname, "frontend/"),
          name: "[path][name].[ext]",
        },
        loader: "file-loader",
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        include: path.resolve(__dirname, "frontend/fonts"),
        options: {
          context: path.resolve(__dirname, "frontend/"),
          outputPath: "fonts/",
        },
        loader: "file-loader",
      },
      {
        test: /\.s?css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['postcss-preset-env', 'autoprefixer', 'pixrem'],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new BundleTracker({
      path: path.resolve(path.join(__dirname, '../')),
      filename: 'webpack-stats.json',
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: "css/[id].css",
    }),
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new CopyWebpackPlugin({
      patterns: [
        { from: "frontend/images", to: "images" },
        { from: "frontend/fonts", to: "fonts" },
      ],
    }),
  ],
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx'],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      }),
    ],
  },
};

这是我的 package.json 以防万一需要查看版本。

{
  "version": "0.1.0",
  "main": "tailwind.config.js",
  "dependencies": {
    "@tailwindcss/forms": "0.5.9",
    "@tailwindcss/typography": "0.5.15",
    "flowbite": "^2.5.2",
    "html-loader": "5.1.0",
    "html-webpack-plugin": "5.6.3"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.8",
    "autoprefixer": "^10.4.20",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^12.0.2",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.9.2",
    "node-sass-tilde-importer": "^1.0.2",
    "pixrem": "^5.0.0",
    "postcss": "^8.4.49",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.1.1",
    "tailwindcss": "^3.4.16",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.97.1",
    "webpack-bundle-tracker": "^3.1.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0",
    "webpack-merge": "^6.0.1"
  },
  "engines": {
    "node": "20"
  },
  "browserslist": [
    "last 2 versions"
  ],
  "scripts": {
    "dev": "webpack serve --config webpack/dev.config.js",
    "build": "webpack --config webpack/prod.config.js"
  }
}

我已经搜索了很长时间来解决这个问题，但找不到解决方案。 请帮忙。

Answer 1

您正在运行

postcss-preset-env

，其中包括用于

is()

选择器的转译插件。

此插件无法转换

.foo ~ .bar:is(.dark *)

 中的 

.peer: checked ~ .dark\:peer-checked\:bg-blue-700:is(.dark *) {

模式

它尝试转换此选择器，因为您的配置表明您希望支持较旧的浏览器版本，而不支持

:is()

选择器。使用针对更现代的浏览器版本的浏览器列表设置或更新配置是“解决”此问题的一种方法。

鉴于此选择器可能是由 Tailwind 等其他工具生成的，似乎不太可能有其他方法来消除此错误。