Descreva o bug
Enfrentei um erro ao usar o novo recurso de sintaxe CSS Media Queries Nível 4 no VS Code no componente Svelte.
<style>
<strong i="9">@media</strong> (width >= 768px) { // <--- error line
.nav {
padding: 16px 24px;
}
}
</style>
Eu uso a última versão do Sapper:
// ...
"sapper": "^0.27.15",
"svelte": "^3.23.2"
}
Mas Svelte linter sempre me mostra este erro (veja também a captura de tela 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)
OK, vejo este erro em arquivos *.css
normais, mas se eu definir a configuração de validação de CSS do código VS css.validate
como false
esse erro desaparece.
Tento definir svelte.plugin.css.diagnostics.enable
como false
, mas ainda vejo css-syntax-error
mensagem de Svelte (veja também a captura de tela 2).
Reproduzir
Passos para reproduzir o comportamento:
<style>...</style>
no componente *.svelte
Comportamento esperado
Nenhum erro após adicionar nova sintaxe CSS.
Capturas de tela
Sistema (preencha as seguintes informações):
Versões de código e nó do VS:
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
A solução possível, talvez, permita adicionar um valor especial ao atributo <style lang="...">...</style>
para suportar todos os novos recursos CSS, porque é apenas _ problema de UX / visualização ruim_.
Toda nova sintaxe após npm run build
processada pelo plug-in postcss-media-minmax
para a sintaxe CSS antiga, como:
<strong i="61">@media</strong> (width >= 768px) ---> <strong i="62">@media</strong> (min-width: 786px)
Você pode tentar configurar o pré-processo seguindo isso e ver se o erro svelte ainda existe? Deve ser semelhante à configuração de sua compilação, no seu caso deve ser postcss.
Quanto ao erro css, estamos usando o serviço de linguagem css do vscode, então não há muito que possamos fazer até que eles suportem essa sintaxe.
@ jasonlyu123 hi! Obrigado pela resposta.
Este é meu 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,
},
};
Corrija-me se eu estiver errado, mas com rollup.config.js
eu não preciso criar um arquivo svelte.config.js
separado com apenas sveltePreprocess({...})
configurações? 🤔
Se eu definir o atributo lang
(ou type
) para <style>
como postcss
(ou text/postcss
), vejo o mesmo erro e muito Sintaxe estranha destacando todos os códigos CSS:
Basta copiar a seção de pré-processamento para svelte.config.js ou movê-la para svelte.config.js e solicitá-la de sua configuração de compilação. O servidor de linguagem usa o svelte para compilar seu código internamente, portanto, ele também precisa saber como pré-processar.
@ jasonlyu123 obrigado! Este erro de resolução:
// 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],
},
}),
};
Mas como realçar a sintaxe para CSS normal, como antes?
Se o seu CSS não tiver sintaxe específica para postcss. Você pode remover o atributo lang.
@ jasonlyu123 thx!
Além disso, defino svelte.plugin.css.diagnostics.enable
para false
para excluir este erro CSS:
) expectedcss(css-rparentexpected)
Comentários muito úteis
@ jasonlyu123 thx!
Além disso, defino
svelte.plugin.css.diagnostics.enable
parafalse
para excluir este erro CSS: