Language-tools: Erreur lors de l'utilisation de la nouvelle syntaxe CSS dans VS Code

Pouvez-vous essayer de configurer le prétraitement après cela et voir si l'erreur svelte existe toujours ? Cela devrait être similaire à votre configuration de construction, dans votre cas, cela devrait être postcss.
En ce qui concerne l'erreur css, nous utilisons le service de langage css de vscode, nous ne pouvons donc pas faire grand-chose tant qu'ils ne prennent pas en charge cette syntaxe.

@jasonulu123 salut ! Merci pour votre réponse.

Voici mon rollup.config.js pour Sapeur :

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,
  },
};

Corrigez-moi s'il vous plaît si je me trompe, mais avec rollup.config.js je n'ai pas besoin de créer svelte.config.js fichier séparé sveltePreprocess({...}) ? 🤔

Si je définis l'attribut lang (ou type ) pour <style> à postcss (ou text/postcss ), je vois la même erreur et très coloration syntaxique étrange à tout le code CSS :

Copiez simplement la section de prétraitement dans svelte.config.js ou déplacez-la vers svelte.config.js et exigez-la de votre configuration de build. Le serveur de langage utilise svelte pour compiler votre code en interne, il doit donc également savoir le prétraiter.

@jasonulu123 merci ! Cette erreur de résolution :

// 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],
    },
  }),
};

Mais comment mettre en évidence la syntaxe en CSS normal, comme avant ?

Si votre CSS n'a pas de syntaxe spécifique postcss. Vous pouvez supprimer l'attribut lang.

@jasonulu123 merci !

De plus, j'ai défini svelte.plugin.css.diagnostics.enable sur false pour supprimer cette erreur CSS :

) expectedcss(css-rparentexpected)