Error when using new CSS syntax at VS Code

[koddr]

Describe the bug
I faced with error, when I use new CSS syntax feature Media Queries Level 4 at VS Code in Svelte component.

<style>
  @media (width >= 768px) { // <--- error line
    .nav {
      padding: 16px 24px;
    }
  }
</style>

I use latest Sapper version:

    // ...
    "sapper": "^0.27.15",
    "svelte": "^3.23.2"
}

But Svelte linter always show me this error (also, see screenshot 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, I see this error at normal *.css files, but if I set VS Code CSS validation setting css.validate to false this error is gone.

I try to set svelte.plugin.css.diagnostics.enable to false, but I still see css-syntax-error message by Svelte (also, see screenshot 2).

To Reproduce
Steps to reproduce the behavior:

1. Add new CSS syntax to <style>...</style> in *.svelte component
2. Save
3. See error

Expected behavior
No error after add new CSS syntax.

Screenshots

System (please complete the following information):

• OS: macOS 10.14.6
• IDE: VS Code
• Plugin/Package: Svelte Beta

VS Code and Node versions:

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

Additional context
Possible solution, maybe, allow to add special value to the <style lang="...">...</style> attribute to support all new CSS features, because it's only bad UX/view issue.

All new syntax after npm run build processed by postcss-media-minmax plugin to old CSS syntax, like:

@media (width >= 768px) ---> @media (min-width: 786px)

[jasonlyu123]

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.

[koddr]

@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:

[jasonlyu123]

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.

[koddr]

@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?

[jasonlyu123]

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

[koddr]

@jasonlyu123 thx!

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

) expectedcss(css-rparentexpected)