windicss vite integration.

[Manborough]

Does anyone know if you need to do anything further to enable the windicss vite plugin with vite-rails? I am running it in a docker container for development, if that changes anything.

• under app/frontend/entrypoints/application.js I have import 'virtual:windi.css'
• in the vite.config.ts I have imported windicss and inlcuded it as a plugin.
  (it auto generated as a typescript file, though I'm not using it anywhere else)
• it's in my package.json file too.
• And under the application.html.erb I have <%= vite_javascript_tag 'application' %>.

I've set a h1 to have bg-red-300 but it's not working so far.

[Manborough]

Looks like the plugin isn't auto looking at .html.erb files.
I assume I can add in some options for the plugin, but I have no idea how to extend the globs list or change the directory to look in app/views.

2021-03-17T05:41:42.953Z vite-plugin-windicss:scan:glob globs [ 'index.html', 'src/**/*.{html,vue,md,mdx,pug,jsx,tsx,svelte}' ]
vite_1   | 2021-03-17T05:41:42.982Z vite-plugin-windicss:config {}

[Manborough]

I've found the documentation for options! I'll test it out in a couple of days when I have time and report back in case anyone else is trying to solve this.

https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts

[ElMassimo]

Hi @Manborough!

Check this repo for a working example: https://github.com/ElMassimo/pingcrm-vite

I recently made a PR to Windi CSS to add a root option here.

You should specify the root to match the Rails root:

    WindiCSS({
      root: process.cwd(),
      scan: {
        fileExtensions: ['erb', 'html', 'vue', 'rb', 'jsx', 'tsx'],
        dirs: ['app/views', 'app/helpers', 'app/javascript'],
      },
    }),

I might add this to a FAQs section in the docs.

[ElMassimo]

In the example repo, import 'windi.css' was commented out, but it's needed in order to include the styles.

zen.mp4

The docker compose config is missing npm install in the Vite image.

If you were using docker, it's likely that when you tried adding the import, the Vite process had not started correctly because the packages were not installed, so bin/vite dev does not actually start.

Try running docker-compose run --rm --entrypoint "npm install" vite and restarting the process:

vite_1   |   vite v2.1.0 dev server running at:
vite_1   |
vite_1   |   > Local:    http://localhost:3036/vite-dev/
vite_1   |   > Network:  http://172.19.0.3:3036/vite-dev/
vite_1   |
vite_1   |   ready in 1857ms.

[Manborough]

Hmmm I couldn't sworn I had un-commented it, as for the the missing npm install I didn't think that would matter as the dependencies are cached in a volume. Either way I tried out your tips and I'm still getting the same bug.

I downloaded your docker vite example here, https://github.com/ElMassimo/vite_rails_docker_example, to see if I could replicate it outside of my setup.

I bundle installed and npm installed. I added windicsss to the vite-config (+ other config) and ran docker-compose and a separate vite process.

Here's the result (excuse the slightly random cursor pointing)

docker-example3.mov

I'm assuming here that windi-css-vite should pickup on the changed value from bg-red-300 to bg-red-400 and reload the css.

P.S I don't want to be wasting your time with support questions, so let me know if you've had enough of my replies :) I can always install tailwind the old way.

[ElMassimo]

I'm assuming here that windi-css-vite should pickup on the changed value from bg-red-300 to bg-red-400 and reload the css.

That is true for CSS classes used in files that are handled by Vite such as stylesheets, or Vue and React components.

Going back to your previous comment, it's only now I understand what's going on, sorry.

If I set them back to the original classes they'll display again.

At the moment, the scanning performed by vite-plugin-windicss is only performed on startup, so this workflow is not yet supported for files that are not handled by Vite, like server-rendered templates.

I'm thinking about adding support for that in vite-plugin-windicss or in vite-plugin-full-reload.

---

Starting in 0.2.0, vite-plugin-full-reload will use Vite's file watcher, so this works out of the box.
Planning to do the same for vite-plugin-windicss next week.

[ElMassimo]

This is now supported in vite-plugin-windicss as well: windicss/vite-plugin-windicss#99.

To get the benefit of fast feedback, it's still better to use it in combination with vite-plugin-full-reload if adding classes to server templates.

[Manborough]

Damn that was fast!

I'll give it a whirl today and see how it goes. Thanks for all your hard work on this @ElMassimo