Skip to content

Latest commit

 

History

History
65 lines (45 loc) · 4.71 KB

other-css-preprocessors.md

File metadata and controls

65 lines (45 loc) · 4.71 KB
Raw

Using other CSS-languages than CSS/Less/SCSS

The svelte-language-server and therefore the VSCode extension can only handle CSS/Less/SCSS syntax. To get other syntaxes working, read on.

PostCSS

  1. Setup you build and svelte.config.js (general info) correctly and add a postcss.config.cjs (note the cjs ending; you need to write the config in CommonJS style currently, more on that below). We recommend using svelte-preprocess. For the svelte.config.js, this should be enough:
import sveltePreprocess from 'svelte-preprocess';
export default { preprocess: sveltePreprocess({ postcss: true }) };

Note that this assumes that you have a ESM-style project, which means there's "type": "module" in your project's package.json. If not, you need to use CommonJS in your svelte.config.js, things like import ... or export const ... are not allowed. You then also switch the postcss.config cjs file ending to js.

If your svelte.config.js is not in the workspace root (for example your svelte.config.js is within /frontend), you'll have to pass in the configFilePath config. This is because the relative path is resolved relative to the working directory of the node process.

import sveltePreprocess from 'svelte-preprocess';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default {
    preprocess: sveltePreprocess({
        postcss: {
            configFilePath: join(__dirname, 'postcss.config.cjs')
        }
    })
};
  1. Either add lang="postcss" to each of your <style> tags where you plan on using PostCSS, or disable CSS diagnostics completely by adding "svelte.plugin.css.diagnostics.enable": false within your settings. If you still want diagnostics, install the Stylelint VSCode extension. If you want better syntax highlighting, install the PostCSS VSCode extension.

TailwindCSS

We assume you already have setup TailwindCSS within your Svelte project. If not, this article and this article explain two approaches on how to do it.

To use TailwindCSS with the VSCode extension:

  1. Setup the svelte.config.js the same way you would for PostCSS - see the section above (first point) for more details
  2. Install the Tailwind CSS VSCode extension
  3. Either add lang="postcss" to each of your <style> tags where you plan on using the Tailwind CSS directives such as @apply, or disable CSS diagnostics completely by adding "svelte.plugin.css.diagnostics.enable": false within your settings. If you still want diagnostics, install the Stylelint VSCode extension and configure it accordingly. Note that within your config files you can only use node-syntax, things like import ... or export const ... are not allowed. To disable css checks for svelte-check, use the option --diagnostic-sources "js,svelte".
  4. If your tailwind.config.js is not in the workspace root. Or if your project is not in the workspace root. Make sure you pass in the path to your tailwind config file in your postcss config file.
const path = require('path');
const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [tailwindcss(path.resolve(__dirname, './tailwind.config.cjs'))]
};

SASS

  1. Add lang="sass" to your <style> tags
  2. If you want to have proper syntax highlighting for VS Code, install the SASS VSCode extension
  3. If you have problems with formatting, turn it off. If you experience wrong css diagnostic errors, turn it off

Stylus

  1. Add lang="stylus" to your <style> tags
  2. If you want to have proper syntax highlighting for VS Code, install the language-stylus extension