顺风复杂类(焦点等)和苗条项目中的笑话出错.仅在运行测试时 [英] Error with tailwind complex class (focus, etc.) and jest in svelte project. Only when running tests
本文介绍了顺风复杂类(焦点等)和苗条项目中的笑话出错.仅在运行测试时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
运行应用程序时,在 .svelte 文件中, 中的 CSS 完美运行.
When running the app, in a .svelte file, the CSS in <style>
works perfectly.
当用 jest 执行测试时,如果我像这样使用简单的 CSS 选择器就可以了:
When executing the tests with jest, it's OK if I use simple CSS selector like this:
<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;
}
但是如果我添加一个像 focus 这样的复杂类:
But if I add a complex class like 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$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
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:
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:
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:
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:
babel.config.js:
module.exports = {
'presets': [
[
'@babel/preset-env',
{ targets: { node: 'current' } }
]
]
}
推荐答案
于是我发现...我需要在我的 package.json 中的 jest 部分添加 "preprocess": true
:
So I found...
I needed to add "preprocess": true
in my package.json in the jest section:
""jest": {
"transform": {
"^.+\\.svelte$": [
"svelte-jester",
{
"preprocess": true
}
],
"^.+\\.js$": "babel-jest"
}
}
这篇关于顺风复杂类(焦点等)和苗条项目中的笑话出错.仅在运行测试时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文