Describe el error
Me enfrenté a un error cuando uso la nueva función de sintaxis CSS Media Queries Level 4 en VS Code en el componente Svelte.
<style>
<strong i="9">@media</strong> (width >= 768px) { // <--- error line
.nav {
padding: 16px 24px;
}
}
</style>
Yo uso la última versión de Sapper:
// ...
"sapper": "^0.27.15",
"svelte": "^3.23.2"
}
Pero Svelte linter siempre me muestra este error (también, vea la captura de pantalla 1):
Colon is expected. If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocessor`, did you add `lang="scss"`/`lang="less"`
to you `style` tag? If you use SCSS, it may be necessary to add the path to your NODE
runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`? See https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#using-with-preprocessors
for more info.svelte(css-syntax-error)
De acuerdo, veo este error en archivos normales *.css
, pero si configuro la configuración de validación CSS del código VS css.validate
en false
este error desaparece.
Intento establecer svelte.plugin.css.diagnostics.enable
en false
, pero todavía veo el mensaje css-syntax-error
de Svelte (también, vea la captura de pantalla 2).
Reproducir
Pasos para reproducir el comportamiento:
<style>...</style>
en *.svelte
Comportamiento esperado
No hay error después de agregar una nueva sintaxis CSS.
Capturas de pantalla
Sistema (complete la siguiente información):
Versiones de VS Code y Node:
Version: 1.46.0
Commit: a5d1cc28bb5da32ec67e86cc50f84c67cc690321
Date: 2020-06-10T08:59:06.977Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0
Contexto adicional
Posible solución, tal vez, permitir agregar un valor especial al atributo <style lang="...">...</style>
para admitir todas las nuevas funciones de CSS, porque solo es _bad UX / view issue_.
Toda la sintaxis nueva después de npm run build
procesada por el complemento postcss-media-minmax
a la antigua sintaxis CSS, como:
<strong i="61">@media</strong> (width >= 768px) ---> <strong i="62">@media</strong> (min-width: 786px)
¿Puede intentar configurar el preproceso después de esto y ver si el error esbelto aún existe? Debería ser similar a su configuración de compilación, en su caso debería ser postcss.
En cuanto al error css, estamos usando el servicio de lenguaje css de vscode, por lo que no hay mucho que podamos hacer hasta que admitan esta sintaxis.
@ jasonlyu123 ¡hola! Gracias por responder.
Este es mi rollup.config.js
para Sapper:
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import commonjs from "@rollup/plugin-commonjs";
import svelte from "rollup-plugin-svelte";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
// Import svelte-preprocess
import sveltePreprocess from "svelte-preprocess";
// Import PostCSS plugins
import autoprefixer from "autoprefixer";
import pimport from "postcss-import";
import minmax from "postcss-media-minmax";
import csso from "postcss-csso";
import config from "sapper/config/rollup.js";
import pkg from "./package.json";
const mode = process.env.NODE_ENV;
const dev = mode === "development";
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) =>
(warning.code === "CIRCULAR_DEPENDENCY" &&
/[/\\]@sapper[/\\]/.test(warning.message)) ||
onwarn(warning);
// Define svelte-preprocess
const preprocess = sveltePreprocess({
postcss: {
plugins: [pimport, minmax, autoprefixer, csso], // --> add PostCSS plugins
},
});
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
dev,
preprocess, // --> add sveltePreprocess
hydratable: true,
emitCss: true,
}),
resolve({
browser: true,
dedupe: ["svelte"],
}),
commonjs(),
legacy &&
babel({
extensions: [".js", ".mjs", ".html", ".svelte"],
babelHelpers: "runtime",
exclude: ["node_modules/@babel/**"],
presets: [
[
"@babel/preset-env",
{
targets: "> 0.25%, not dead",
},
],
],
plugins: [
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
preserveEntrySignatures: false,
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
"process.browser": false,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
generate: "ssr",
preprocess, // --> add sveltePreprocess
dev,
}),
resolve({
dedupe: ["svelte"],
}),
commonjs(),
],
external: Object.keys(pkg.dependencies).concat(
require("module").builtinModules ||
Object.keys(process.binding("natives"))
),
preserveEntrySignatures: "strict",
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
commonjs(),
!dev && terser(),
],
preserveEntrySignatures: false,
onwarn,
},
};
Corríjame por favor si me equivoco, pero con rollup.config.js
no necesito crear svelte.config.js
archivo sveltePreprocess({...})
configuraciones? 🤔
Si configuro el atributo lang
(o type
) para <style>
en postcss
(o text/postcss
), veo el mismo error y muy resaltado de sintaxis extraña en todo el código CSS:
Simplemente copie la sección de preproceso en svelte.config.js o muévala a svelte.config.js y solicítela desde su configuración de compilación. El servidor de idiomas usa svelte para compilar su código internamente, por lo que también necesita saberlo para preprocesarlo.
@ jasonlyu123 ¡gracias! Esto soluciona el error:
// svelte.config.js
const sveltePreprocess = require("svelte-preprocess");
const autoprefixer = require("autoprefixer");
const pimport = require("postcss-import");
const minmax = require("postcss-media-minmax");
const csso = require("postcss-csso");
module.exports = {
preprocess: sveltePreprocess({
postcss: {
plugins: [pimport, minmax, autoprefixer, csso],
},
}),
};
Pero, ¿cómo se resalta la sintaxis en CSS normal, como antes?
Si su CSS no tiene una sintaxis específica de postcss. Puede eliminar el atributo lang.
@ jasonlyu123 ¡gracias!
Además, configuré svelte.plugin.css.diagnostics.enable
en false
para eliminar este error de CSS:
) expectedcss(css-rparentexpected)
Comentario más útil
@ jasonlyu123 ¡gracias!
Además, configuré
svelte.plugin.css.diagnostics.enable
enfalse
para eliminar este error de CSS: