Language-tools: svelte(css-syntax-error) when using postcss-preset-env custom media

Duplicate of #305

We don't have a plan to support the validation of postcss or css next. That's too much maintenance works. You can refer to this doc for setup instruction

For your specific case: Svelte files are transpiled per-file, so it does not know anything about that --t inside the component if you don't define it in there. I think it works for your build because everything is bundled to one big css in the end.

Thank you very much for the response. I really appreciate your effort on this

I decided to post about this only because previously for a couple of weeks I'v been using those custom media queries and there was no error but after some update (I suppose) now there is one. Also this could become part of css spec in the future, who knows. I hope it will at least be fixed then. Thanks

You need to somehow make the custom-media from media-queries.css also available from the preprocess of svelte-config.js.

If I try this exact code that you posted it generates a new error
"postcssPresetEnv is not a function". Even if I remove .default I still see
an error. Still thank you very much for taking a look at this.

On Fri, 4 Sep 2020 at 09:37, Lyu, Wei-Da notifications@github.com wrote:

the problem you're having is the setup of preprocessor in svelte.config.js.
You have three plugins loaded in your rollup config. but only enable auto
preprocessing on svelte.config.js so the IDE's compile process doesn't get
the preprocessed style thus throwing the error.

I tried this in the svelte.config.js and the error goes away.

const sveltePreprocess = require('svelte-preprocess')const postcssImport = require('postcss-import')const postcssPresetEnv = require('postcss-preset-env').defaultconst postcssNested = require('postcss-nested')
const postcssPlugins = [
postcssImport(),
postcssPresetEnv({ stage: 0 }),
postcssNested(),]
module.exports = {
preprocess: sveltePreprocess({
sourceMap: true,
postcss: {
plugins: postcssPlugins,
},
})}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Sorry for that I found it doesn't work XD

I found a workaround (hope I didn't jump to the conclusion too fast again lol)

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess')
const fs = require('fs')
const mediaQueries = fs
  .readFileSync('./src/assets/css/media-queries.css')
  .toString()

module.exports = {
  preprocess: sveltePreprocess({
    postcss: {
      prependData: mediaQueries,
    },
  }),
}

About the build, I guess it's because you declare the custom-media in your app.svelte. Once I remove it and restart the dev server the same error you encounter in the IDE appears.
Maybe you can import the media-queries when you want to use it, or make it globally available.

@jasonlyu123 You are just amazing! You solved both issues in one go (having media queries in two places wasn't great as well). I really appreciate this, now I can work with pleasure. Thanks again and good luck in everything!