Language-tools: svelte (css-syntax-error) ao usar mídia personalizada postcss-preset-env

Duplicado de # 305

Não temos um plano para apoiar a validação de postcss ou css a seguir. Isso é muita manutenção. Você pode consultar este documento para obter instruções de configuração

Para o seu caso específico: os arquivos Svelte são transpilados por arquivo, então ele não sabe nada sobre aquele --t dentro do componente se você não defini-lo lá. Acho que funciona para a sua construção porque tudo é agrupado em um grande css no final.

Muito obrigado pela resposta. Eu realmente aprecio seu esforço neste

Decidi postar sobre isso apenas porque, anteriormente, por algumas semanas, tenho usado essas consultas de mídia personalizadas e não houve nenhum erro, mas após alguma atualização (suponho) agora há uma. Além disso, isso pode se tornar parte das especificações do css no futuro, quem sabe. Espero que pelo menos seja consertado então. Obrigado

Você precisa, de alguma forma, tornar a mídia personalizada de media-queries.css também disponível no pré-processo de svelte-config.js .

Se eu tentar exatamente este código que você postou, ele gerará um novo erro
"postcssPresetEnv não é uma função". Mesmo se eu remover .default, ainda vejo
um erro. Ainda assim, muito obrigado por dar uma olhada nisso.

Na sexta-feira, 4 de setembro de 2020 às 09:37, Lyu, Wei-Da [email protected] escreveu:

o problema que você está tendo é a configuração do pré-processador em svelte.config.js.
Você tem três plug-ins carregados em sua configuração de rollup. mas só habilitar automático
pré-processamento em svelte.config.js para que o processo de compilação do IDE não seja
o estilo pré-processado, gerando assim o erro.

Tentei isso no svelte.config.js e o erro foi embora.

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

-
Você está recebendo isto porque é o autor do tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/sveltejs/language-tools/issues/517#issuecomment-686945578 ,
ou cancelar
https://github.com/notifications/unsubscribe-auth/AC6ONEK5L3PDUXKDVGIWFMLSECDKVANCNFSM4QTPHU5Q
.

Desculpe por descobrir que não funciona XD

Eu encontrei uma solução alternativa (espero não ter chegado à conclusão muito rápido de novo 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,
    },
  }),
}

Sobre a construção, acho que é porque você declara a custom-media em seu app.svelte. Depois de removê-lo e reiniciar o servidor de desenvolvimento, o mesmo erro que você encontrou no IDE aparece.
Talvez você possa importar as consultas de mídia quando quiser usá-las ou torná-las disponíveis globalmente.

@ jasonlyu123 Você é simplesmente incrível! Você resolveu os dois problemas de uma vez (ter consultas de mídia em dois lugares também não foi muito bom). Agradeço muito, agora posso trabalhar com prazer. Obrigado novamente e boa sorte em tudo!