Vite 8 构建后输入框也被隐藏：检查 placeholder 的两次 CSS 转换

开发环境中聚焦输入框，只隐藏占位文字；生产构建后，输入框自身也受到了隐藏等样式影响。若输出里出现 :-ms-placeholder-shown，先检查 Autoprefixer 与 Lightning CSS 的连续处理，而不是修改输入框的事件逻辑。

Vite 8.3.0 中的一个明确组合，是预处理后的 ::placeholder 先经 Autoprefixer 生成旧 MS 前缀，再经 Lightning CSS 压缩。前者输出 :-ms-input-placeholder，后者把这条规则转成 :-ms-placeholder-shown。伪元素的样式与表示输入状态的伪类，作用范围不同。

找到多出来的规则从哪一步产生

例如下面的源码只想改变占位文字：

.field::placeholder {
  visibility: hidden;
}

比较源码、PostCSS 插件输出与最终 CSS。若只有最后一步才出现 :-ms-placeholder-shown，就有理由沿压缩器继续检查；若源码或另一个插件已经写入了状态伪类，应先处理那个阶段。

还要记录实际选择器，不要把带 MS 前缀的字符串直接说成标准 :placeholder-shown。浏览器是否识别相应别名、规则如何应用，需要在项目真正支持的浏览器中观察。vite build 退出成功不说明样式语义相同。

可先停用这一步 CSS 压缩作局部隔离

保存原配置，在受控分支中给构建明确设置：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssMinify: false,
  },
});

它只关闭 Vite 的 CSS 压缩，保留其他既有配置。重新构建后检查那条错误状态选择器是否消失，并在预览页面观察占位文字、输入值、焦点和失焦四种状态。这个改动可能增大 CSS 产物；它没有修复前面 Autoprefixer 生成旧前缀的行为，也不保证其他 CSS 插件没有独立压缩步骤。

需要继续压缩时，可以评估 Vite 支持的 esbuild CSS 压缩路线，但 Vite 8 使用它需要项目安装相应依赖，切换后也要重新检查目标浏览器与输出。不能为了让样式看起来恢复，顺手删掉产品仍需支持的浏览器目标。

浏览器支持范围决定长期配置

检查 Browserslist、Autoprefixer 配置和目标浏览器是否确实需要旧 MS 规则。若已不支持相应浏览器，应通过经过审查的目标配置避免生成不需要的前缀；若仍支持，就应继续保留兼容性要求，寻找经过实际验收的处理组合。

本问题来自具体 CSS 工具的串联，不是 Vite 8 所有 placeholder 样式的统一错误。后续升级后，用原始嵌套规则和实际构建链回归，确认产物与浏览器状态均正确，再恢复原压缩要求。回退时一起恢复依赖锁文件与配置；已经部署的错误 CSS 还需按原发布流程更新，修改本地配置不会自动修正线上资产。