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

[shamsartem]

To Reproduce
You can use my repo to reproduce it https://github.com/shamsartem/dbudget
Check default.svelte for errors.

Alternatively:

1. Add postcss-preset-env plugin to rollup.config.js and to postcss.config.js with { stage: 0 } setting
2. Add e.g. @Custom-Media --t (width >= 768px); in App.svelte inside style tag with lang="postcss"
3. Try using @media (--t) in App.svelte - it should work and there is no error visible
4. Try using @media (--t) in some other component - it shows the error but builds and works correctly

Expected behavior
There shouldn't be an error in this case

System (please complete the following information):

• OS: Manjaro
• IDE: VSCode
• Plugin/Package: "Svelte for VSCode"

[jasonlyu123]

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

[dummdidumm]

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.

[shamsartem]

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

[jasonlyu123]

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

[shamsartem]

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 ***@***.***> 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 <#517 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q> .

[jasonlyu123]

Sorry for that I found it doesn't work XD

[jasonlyu123]

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.

[shamsartem]

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