顺风复杂类（焦点等）和苗条项目中的笑话出错。仅在运行测试时

Posted 2023-03-06

【中文标题】顺风复杂类（焦点等）和苗条项目中的笑话出错。仅在运行测试时

【英文标题】：Error with tailwind complex class (focus, etc.) and jest in svelte project. Only when running tests

【发布时间】：2021-10-19 22:50:27

【问题描述】：

在 .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;

但是如果我添加一个像焦点这样的复杂类：

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$1.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$1 (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'  
    ]
  ]

【问题讨论】：

尝试转义 : 字符 - \:

【参考方案1】：

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

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