Language-tools: Поддержка проверки PostCSS

Упомянутое вами расширение обеспечивает только подсветку синтаксиса. И похоже, что он вводит правила синтаксиса в css. Итак, если у вас установлено расширение, оно также улучшит выделение css в вашем svelte-файле.

Что касается ошибки, то ее существует два источника. Один из них - компактный компилятор, мы используем его для обеспечения точной специфической диагностики, вам нужно будет установить необходимый препроцессор. вы можете следовать инструкции здесь

Второй источник - это используемая нами языковая служба vscode CSS. Вы можете отключить его, установив

svelte.plugin.css.diagnostics: false

Мы не планируем сейчас предоставлять валидацию для синтаксиса, специфичного для postcss. Поэтому, если вы хотите проверить postcss, вы можете установить другие расширения и настроить его на обработку svelte файла как HTML.

Еще одна вещь о расширении, о котором вы упомянули. Если вы хотите использовать его для выделения синтаксиса для вашего svelte-файла, не устанавливайте атрибут lang = postcss для стиля, если это не необходимо, потому что он внедряет синтаксис в css.

Привет, спасибо за комментарии. Я сослался на расширение PostCSS Language, чтобы показать функции, которые оно проверяет и допускает, поскольку они, вероятно, будут теми же функциями, которые вы проверяете для проверки ошибок. Подсветка синтаксиса отлично работает с этим плагином.

Когда вы говорите, что мне придется настроить необходимый препроцессор, применимы ли инструкции, на которые вы ссылаетесь, также и к PostCSS? Я предполагаю, что важен файл svelete.config.js . Я использую sapper, поэтому мне нужно создать этот файл, установить в нем свой препроцессор и импортировать его в rollup.config.js чтобы инструменты Svelte Language понимали PostCSS?

Я попробую то, что вы предложили. Я знаю, что вы не планируете поддерживать проверку PostCSS, но, очевидно, мне бы хотелось ее поддержать, не отключая всю проверку CSS. Спасибо за помощь и внимание!

Да, это также относится к postcss.
Поскольку языковой сервер использует компилятор для получения предупреждений и ошибок, ему также необходимо знать, как выполнять предварительную обработку. svelte.config.js предназначен для того, чтобы языковой сервер знал об этом.

Привет @ jasonlyu123 Я просто хотел сообщить вам, что создал файл svelte.config.js и он не дал никакого эффекта, а также поделился им с другими людьми, чтобы они знали. Было бы полезно знать, что ищет стройный языковой сервер, чтобы определить, что ему нужно для понимания языка; Я не могу сказать только из приведенного примера.

Это моя конфигурация препроцесса:

const sveltePreprocess = require('svelte-preprocess');
const phtmlUtilityClass = require('phtml-utility-class');

const preprocess = sveltePreprocess({
    postcss: true,
    pug({ content, filename }) {
        const code = pug.render(content)
        return { code, map: null }
    }
});

const myPreprocessor = {
    markup({ content, filename }) {
        content = content.replace(/(\<[^>]*=)(\{[^{}]*\})([^<]*\>)/gmi, (match, p1, p2, p3) => {
            return `${p1}"${p2}"${p3}`
        })
        return phtmlUtilityClass.process(content, { from: filename }).then(result => {
            return { code: result.html, map: null }
        });
    }
}

module.exports = {
    preprocess: [
        preprocess,
        myPreprocessor
    ],
};

Массивы препроцессоров пока не поддерживаются # 279

Спасибо за это. Я просто проверил, будет ли это иметь значение, даже если не использовать массив, и это не так. Так что просто сообщите себе и другим, кто может найти эту проблему, чтобы это не повлияло на исправление ошибок проверки.

const sveltePreprocess = require('svelte-preprocess');
const phtmlUtilityClass = require('phtml-utility-class');

const preprocess = sveltePreprocess({
    postcss: true,
    pug({ content, filename }) {
        const code = pug.render(content)
        return { code, map: null }
    }
});

module.exports = {
    preprocess
};

@limitlessloop Можете ли вы проверить окно вывода vscode, выбрав svelte, и увидеть, есть ли какие-либо ошибки?
Кроме того, можете ли вы предоставить свою конфигурацию postcss? Я никогда раньше не настраивал postcss вручную.

Привет @ jasonlyu123. Спасибо за ваш ответ.

Ниже представлен результат:

Initialize language server at  /Users/limitlessloop/Sites/stancy/website
Trying to load config for /Users/limitlessloop/Sites/stancy/website/src/components/Button.svelte
Found config at  /Users/limitlessloop/Sites/stancy/website/svelte.config.js
Initialize new ts service at  
SnapshotManager File Statistics:
Project files: 0
Svelte files: 0
From node_modules: 0
Total: 0
Using Svelte v3.23.2 from /Users/limitlessloop/Sites/stancy/website/node_modules/svelte/compiler
Using Svelte v3.23.2 from /Users/limitlessloop/Sites/stancy/website/node_modules/svelte/compiler

А ниже моя конфигурация PostCSS

module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-logical': {},
        'postcss-preset-env': {
            autoprefixer: {
                flexbox: 'no-2009',
            },
            stage: 3,
            features: {
                'nesting-rules': true,
                'custom-properties': false,
            }
        },
    }
};

А это пример кода:

Что за сообщение об ошибке? Я слежу за вашей конфигурацией, и ошибка svelte исчезла, осталась только ошибка vscod-css-language-service.

Хм. 🤔

Это ошибки, которые я получаю.

} Expected
at-rule or selector expected

Ага. это ошибка проверки vscode-css-language-service . Вы можете либо добавить к стилю атрибут lang="postcss" чтобы отключить проверку css для этого файла, либо отключить его в рабочей области, установив svelte.plugin.css.diagnostics: false .

Понятно, я не совсем понял, что вы имели в виду под «стройной ошибкой».

Мы перекрещиваем провода? Я понимаю, вы можете выключить его, но тогда какой смысл добавлять файл svelte.config.js только для того, чтобы выключить его?

Кроме того, при добавлении lang="postcss" к тегу стиля теряется подсветка синтаксиса, ранее вы не советовали добавлять атрибут lang. Кроме того, PostCSS не похож на другие препроцессоры в том отношении, что это не сам язык, а просто инструмент, который можно использовать для поддержки современного CSS, поэтому, на мой взгляд, атрибут lang не нужен.

В любом случае, я хотел бы понять, как это работает (причина появления ошибок), тогда, по крайней мере, возможно, я смогу поговорить с сообществом PostCSS или создателем расширения PostCSS Language Support относительно поддержки в файлах Svelte.

Компилятор svelte компилирует файл css. Поэтому, когда он встречает синтаксис, который не понимает, он выдаст ошибку парсера. Вот что я имел в виду, говоря о стройной ошибке.

Svelte.config.js сообщает языковому серверу использовать эту конфигурацию предварительной обработки для предварительной обработки перед компиляцией.
https://github.com/sveltejs/language-tools/blob/17bfd6e27fd8a6cbc6f417eb184bc7d0b1dac727/packages/language-server/src/plugins/svelte/SvelteDocument.ts#L79
Таким образом, добавление svelte.config.js не устраняет ошибку.

Ошибка vscode-css-language-service, о которой я упоминал, находится здесь
https://github.com/sveltejs/language-tools/blob/17bfd6e27fd8a6cbc6f417eb184bc7d0b1dac727/packages/language-server/src/plugins/css/CSSPlugin.ts#L72
Мы используем его только для анализа CSS. Но этот модуль не поддерживает используемый вами синтаксис, поэтому он также выдает ошибку парсера. Как видно в коде. Мы пропустим проверку, если тип стиля postcss . Вот почему я сказал, что вы можете установить атрибут. Но расширение подсветки синтаксиса, которое вы упоминаете перед внедрением в css, а не в postcss. Итак, пока вы устанавливаете атрибут, подсветка синтаксиса будет отключена. Вот почему я предлагаю избегать этого, если вы хотите использовать расширение для выделения синтаксиса. Или вы можете найти другую альтернативу.

Но как ты сказал. Многие функции postcss - это синтаксис предложения. Нет смысла добавлять атрибут lang. Возможно, мы могли бы добавить другой способ отключить проверку CSS для каждого файла.

Спасибо @ jasonlyu123.

Но этот модуль не поддерживает используемый вами синтаксис, поэтому он также выдает ошибку парсера.

Под этим модулем вы имеете в виду модуль PostCSS ? Если да, то стоит ли мне поговорить с автором, чтобы узнать, можно ли что-нибудь сделать в поддержку этого? Мне кажется, что если Svelte Language Tools использует конфигурацию для предварительной обработки перед компиляцией для анализа CSS, тогда имело бы смысл, что используемый им модуль PostCSS должен поддерживать синтаксис, для которого он выдает ошибку?

нет, это vscode-css-language-service. Они используют собственный парсер и анализ. И у них нет плана поддержки css next.

Понятно, спасибо за подтверждение и за ваше терпение.

Может, вместо этого можно использовать stylelint?

Ну, я просто добавил "svelte.plugin.css.diagnostics.enable": false чтобы отключить ошибку, но не сработало.

Я думаю, что мой svelte.config.js настроен правильно

const SveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: SveltePreprocess({
    "defaults": {
      "script": "typescript",
      "style": "postcss" // Tried pcss too
    },
    "postcss": true
  }),
};

Я использую расширение VSCode для поддержки языка PostCSS.
Когда я использую lang = "scss" или lang = "less" (как было предложено), знак ошибки исчезал.
Но с lang = "pcss" ou lang = "postcss" (даже с отключенной диагностикой) не работает ...
Также из вывода Svelte я получил:

• PostCSS configuration was not passed. If you expect to load it from a file, make sure to install "postcss-load-config" and try again ʕ•ᴥ•ʔ (возможно, дублировано в проблему с
  Установлено: "postcss-load-config": "^2.1.0"
  Я не знаю, что мне здесь не хватает?

@jaikme, как настроить postcss? Насколько мне известно, postcss требует настроек, и кажется, что ваши настройки не подхватываются нашим экземпляром препроцессора. Так что это отдельная проблема, она не связана с исходным постом.

@ jasonlyu123 Хорошо.
Вот мой конфиг.

Он состоит из двух частей - заставить его работать для сборки и заставить его работать для расширения VSCode. См. Документацию о том, как настроить PostCSS. Я собираюсь закрыть этот вопрос на данный момент, но если что-то все еще неясно, дайте нам знать или, что еще лучше, создайте PR с улучшенной документацией.

Маловероятно, что мы добавим поддержку расширенных функций css, таких как новый синтаксис CSS или TailwindCSS, потому что это станет бременем обслуживания. Есть много других хороших расширений VSCode, которые отлично справляются с предоставлением расширенных функций и могут использоваться вместе с расширением Svelte.