Svelte项目Jest测试时Tailwind带focus等修饰符的类报错如何解决？

问题原因 #

你的本地开发环境运行时会正常调用svelte-preprocess处理PostCSS语法，但是Jest调用的svelte-jester默认没有开启预处理流程，导致Svelte原生CSS解析器无法识别Tailwind带:修饰符的@apply语法，误以为语法错误抛出提示。

解决步骤 #

步骤1：安装postcss-nested依赖 #

Tailwind的修饰符语法需要postcss-nested插件提前解析，避免Svelte把focus:识别为原生CSS伪类语法：

npm install -D postcss-nested

步骤2：修改postcss.config.js配置 #

把postcss-nested加到Tailwind插件之前加载：

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const postcssNested = require("postcss-nested");

const mode = process.env.NODE_ENV;
const dev = mode === "development";

const config = {
    plugins: [
        postcssNested(),
        tailwindcss(),
        autoprefixer(),
        !dev && cssnano({
            preset: "default",
        })
    ],
};

module.exports = config;

步骤3：修改package.json中的Jest配置 #

开启svelte-jester的预处理功能，让它自动读取svelte.config.js里的PostCSS配置处理样式：

"jest": {
    "transform": {
        "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }],
        "^.+\\.js$": "babel-jest"
    }
}

步骤4：补充测试环境变量（可选，针对JIT模式不生效的情况） #

如果你使用Tailwind JIT模式测试时出现样式丢失，修改test脚本设置NODE_ENV：

"scripts": {
    "test": "NODE_ENV=test jest --watchAll"
}

Windows系统用户可以先安装cross-env：

npm install -D cross-env

再修改test脚本：

"test": "cross-env NODE_ENV=test jest --watchAll"

验证 #

删除node_modules/.cache目录后重新运行测试，报错即可消失。

内容的提问来源于stack exchange，提问作者Harald