Switch to the Vite plugin

[babichjacob]

Judging by comments in the Windi CSS Discord server from the svelte-windicss-preprocess maintainer, it seems like it's a better idea to use the Vite plugin instead of the preprocessor.

This was also the impression I got before seeing that discussion, but I wanted to get this out as a provisional thing--it's a good thing I already mark these commands as experimental 😎.

[mrwokkel]

Had problems today with svelte-windicss-preprocess together with sveltekit. Got it working with vite-plugin-windicss by:

// svelte.config.cjs
const { default:windi } = require('vite-plugin-windicss')
...
module.exports = {
  ...
  kit: {
    ...
    vite: {
       ...
       plugins: [
         windi({
           config: 'windi.config.cjs',
         })
       ]
    }
  }
}

// $layout.svelte
<script>
  import { browser } from '$app/env';
  import 'virtual:windi.css';
	
  if (browser) import('virtual:windi-devtools');
</script>

<slot />

// windi.config.cjs
module.exports = {
  preflight: {
    enableAll: true,
  },
  theme: {},
  variants: {},
  plugins: [],
}

Also to work in combination with mdsvex:

// svelte.config.cjs
const { default:windi } = require('vite-plugin-windicss')
const mdsvexConfig = require('./mdsvex.config.cjs');
...
module.exports = {
  ...
  kit: {
    ...
    vite: {
       ...
       plugins: [
         windi({
           config: 'windi.config.cjs',					
           scan: {
             fileExtensions: ['html', 'svelte', ...mdsvexConfig.extensions.map(e => e.substr(1))]
           },
         })
       ]
    }
  }
}

Hope it helps.

[babichjacob]

Had problems today with svelte-windicss-preprocess together with sveltekit. Got it working with vite-plugin-windicss by:

// svelte.config.cjs
const { default:windi } = require('vite-plugin-windicss')
...
module.exports = {
  ...
  kit: {
    ...
    vite: {
       ...
       plugins: [
         windi({
           config: 'windi.config.cjs',
         })
       ]
    }
  }
}

// $layout.svelte
<script>
  import { browser } from '$app/env';
  import 'virtual:windi.css';
	
  if (browser) import('virtual:windi-devtools');
</script>

<slot />

// windi.config.cjs
module.exports = {
  preflight: {
    enableAll: true,
  },
  theme: {},
  variants: {},
  plugins: [],
}

Also to work in combination with mdsvex:

// svelte.config.cjs
const { default:windi } = require('vite-plugin-windicss')
const mdsvexConfig = require('./mdsvex.config.cjs');
...
module.exports = {
  ...
  kit: {
    ...
    vite: {
       ...
       plugins: [
         windi({
           config: 'windi.config.cjs',					
           scan: {
             fileExtensions: ['html', 'svelte', ...mdsvexConfig.extensions.map(e => e.substr(1))]
           },
         })
       ]
    }
  }
}

Hope it helps.

Thanks! Can fileExtensions be left as all so that even classes declared in .js or .ts files are picked up? As well as any extension?

I'm really busy with school lately so this isn't quite something I can personally investigate.

We might have to leave this change until after the core svelte-add command gets a power upgrade that would make this even possible (i.e. making sure mdsvex then windicss has the same result as windicss then mdsvex with respect to those extensions being set properly if it's not possible to leave extensions as undefined / all files are scanned).

[mrwokkel]

Seems the default is this ['html', 'vue', 'md', 'mdx', 'pug', 'jsx', 'tsx', 'svelte'] (source) but I do not know how to get it. (Found out about the existence of Windi yesterday, so I'm no expert)

[alexanderniebuhr]

@babichjacob update to v3.2.0
add to your windicss config, should work in all modes.. note you will not get de-duplication, other than svelte native

    {
      kit: true, // ADD
      ....
    }

[babichjacob]

@babichjacob update to v3.2.0
add to your windicss config, should work in all modes.. note you will not get de-duplication, other than svelte native

    {
      kit: true, // ADD
      ....
    }

@alexanderniebuhr 8cae137

[alexanderniebuhr]

if you find any issues, please report in our repo.. we have no time testing and making it mature currently, so we are just based on community to tell us the issues with details, so we can fix them then. :)

[babichjacob]

I don't use Windi CSS so I am ending support for this project.

After the svelte-add rewrite, someone who can be trusted to set it up correctly and maintain it can contribute it to the svelte-add repository.