删除 Next.js 中未使用的样式标签 CSS 问题

Question

我们可以删除 Next.js 中未使用的 CSS 吗？代码是 available on CodeSandbox。

这是我的组件：

import Link from "next/link";

export default function IndexPage() {
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a className="red">About</a>
      </Link>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
        .red {
          color: red;
        }
        .blue {
          color: red;
        }
      `}</style>
    </div>
  );
}

这是我的 PostCSS 配置：

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009"
        },
        stage: 3,
        features: {
          "custom-properties": false
        }
      }
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}"
        ],
        extractors: ["vue", "js", "html"]
      }
    ]
  ]
};

我只在我的组件中使用了 red 类，所以它应该删除所有其他类，但在我的情况下它没有删除任何内容。

我正在使用 PurgeCSS 删除未使用的 CSS。