Tailwind complex class（焦点等）错误和 svelte 项目中的笑话。仅当运行测试时

Question

当运行应用程序在 .svelte 文件中时，<style> 中的 CSS 完美运行。

当用 jest 执行测试时，如果我像这样使用简单的 CSS 选择器就可以了：

<style lang="postcss" type="text/postcss">
form input {
        @apply shadow appearance-none border border-transparent rounded w-full py-2 px-3 text-gray-700 leading-tight;
}

但是如果我添加一个复杂的 class 比如 focus:

form input {
@apply focus:ring-2 shadow appearance-none border border-transparent rounded w-full py-2 px-3 text-gray-700 leading-tight;

}

我遇到了这个错误：

ParseError: Semicolon or block is expected

      at error (node_modules/svelte/src/compiler/utils/error.ts:25:16)
      at Parser.error (node_modules/svelte/src/compiler/parse/index.ts:101:3)
      at Object.read_style [as read] (node_modules/svelte/src/compiler/parse/read/style.ts:31:11)
      at tag (node_modules/svelte/src/compiler/parse/state/tag.ts:189:27)
      at new Parser (node_modules/svelte/src/compiler/parse/index.ts:53:12)
      at parse (node_modules/svelte/src/compiler/parse/index.ts:218:17)
      at Object.compile (node_modules/svelte/src/compiler/compile/index.ts:93:14)
      at compiler (node_modules/svelte-jester/src/transformer.cjs:32:25)
      at Object.process (node_modules/svelte-jester/src/transformer.cjs:11:12)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:464:35)

这是我的配置文件：

package.json

{
"name": "svelte-app",
"version": "1.0.0",
"private": true,
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "test": "jest --watchAll",
    "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
},
"devDependencies": {
    "@babel/preset-env": "^7.15",
    "@babel/core": "^7.15",
    "@rollup/plugin-commonjs": "^20.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "@sveltejs/adapter-static": "^1.0.0-next.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/svelte": "^3.0.3",
    "@testing-library/user-event": "^13.2.1",
    "autoprefixer": "^10.3.1",
    "axios": "^0.21.1",
    "cssnano": "^5.0.7",
    "babel-jest": "26.6.3",
    "jest": "26.6.3",
    "msw": "^0.34.0",
    "postcss": "^8.3.5",
    "postcss-load-config": "^3.1.0",
    "rollup": "^2.56",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-dev": "^1.1.3",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.42.0",
    "svelte-check": "^2.2.4",
    "svelte-jester": "^1.8.2",
    "svelte-preprocess": "^4.7.4",
    "tailwindcss": "^2.2.7"
},
"dependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.5",
    "sirv-cli": "^1.0.0",
    "tailwindcss": "^2.2.7"
},
"jest": {
    "transform": {
        "^.+\.svelte$": "svelte-jester",
        "^.+\.js$": "babel-jest"
    }
}

svelte.config.js:

const preprocess = require("svelte-preprocess");
const adapter = require('@sveltejs/adapter-static')
//import preprocess from "svelte/types/compiler/preprocess";
//import adapter from '@sveltejs/adapter-static'

const config = {
  preprocess: [preprocess({
    "postcss": true
  })],

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
    adapter: adapter({
      // default options are shown
      pages: 'build',
      assets: 'build',
      fallback: null,
    }),
  },
};

module.exports = config;

tailwind.config.js:

const production = !process.env.ROLLUP_WATCH;

const config = {
    mode: "jit",
    purge: [
        './src/**/*.{html,js,svelte,ts}',
    ],
    theme: {
        extend: {
            keyframes: {
                wiggle: {
                    '0%, 100%': { 'background-color': 'inherit' },
                    '50%': { 'background-color': 'rgba(124,58,237, 0.2)' },
                }
            }
            ,
            animation: {
                wiggle: 'wiggle 3s ease-in-out infinite',
            }
        }
    },
    plugins: [],
    future: {
        purgeLayersByDefault: true,
        removeDeprecatedGapUtilities: true,
    }
};

module.exports = config;

postcss.config.js:

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");

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

const config = {
    plugins: [
        //Some plugins, like postcss-nested, need to run before Tailwind,
        tailwindcss(),
        //But others, like autoprefixer, need to run after,
        autoprefixer(),
        !dev && cssnano({
            preset: "default",
        })
    ],
};

module.exports = config;

babel.config.js:

module.exports = {
  'presets': [
    [
      '@babel/preset-env',
      { targets: { node: 'current' } }
    ]
  ]
}

Answer 1

所以我发现... 我需要在笑话部分的 package.json 中添加 "preprocess": true：

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

Tailwind complex class（焦点等）错误和 svelte 项目中的笑话。仅当运行测试时

Error with tailwind complex class (focus, etc.) and jest in svelte project. Only when running tests

jestjs

svelte

tailwind-css

Tailwind complex class（焦点等）错误和 svelte 项目中的笑话。仅当 运行 测试时

Error with tailwind complex class (focus, etc.) and jest in svelte project. Only when running tests

jestjs

svelte

tailwind-css

Tailwind complex class（焦点等）错误和 svelte 项目中的笑话。仅当运行测试时