Language-tools: Error when using new CSS syntax at VS Code

Can you try setting up preprocess following this and see if the svelte error still exist? It should be similar to your build setup, in your case it should be postcss.
As for the css error, we are using vscode's css language-service, so there's not much we could do until they support this syntax.

@jasonlyu123 hi! Thanks for reply.

This is my rollup.config.js for 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,
  },
};

Correct me please if I wrong, but with rollup.config.js I not need to create separated svelte.config.js file with only sveltePreprocess({...}) settings? 🤔

If I set lang (or type) attribute for <style> to postcss (or text/postcss), I see the same error and very strange syntax highlighting to all CSS code:

Just copy the preprocess section into svelte.config.js or move it to svelte.config.js and require it from your build config. The language server use svelte to compile your code internally so it needs to know to preprocess as well.

@jasonlyu123 thanks! This solve 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],
    },
  }),
};

But how to syntax highlight to normal CSS, like before?

If your CSS doesn't have postcss specific syntax. You can remove the lang attribute.

@jasonlyu123 thx!

Additional, I set svelte.plugin.css.diagnostics.enable to false for delete this CSS error:

) expectedcss(css-rparentexpected)