Debug custom vite configuration

[23tux]

Hi @ all!

I try to get WindiCSS to do it's static analysis for SLIM files. I found this piece of code here windicss/windicss#672 (comment)

Unfortunately, it does not work in some cases, so I'd like to debug it. The only question is: How? I can't access http://staff.lvh.me:3036/vite-dev/ in Chrome, BUT: when requesting http://staff.lvh.me:3036/ it redirects to http://staff.lvh.me:3036/vite-dev/, and HMR, reloading... everything works. So I guess the basic setup is working.

This is my vite.config.ts:

import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
import EnvironmentPlugin from 'vite-plugin-environment'
import FullReload from 'vite-plugin-full-reload'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    WindiCSS({
      root: __dirname,
      scan: {
        fileExtensions: ['erb', 'slim', 'html', 'vue', 'js', 'ts', 'jsx', 'tsx'],
        dirs: ['app/views', 'app/frontend'], // or app/javascript, or app/packs
      },
      extract: {
        extractors: [
          {
            extractor: (function hamlExtractor() {
              // const classRegex = /(?<=\.)([\w\-]+)|(?<=class[\:=]\s*['"][\w\:\-\!\[\]#\s]*)([\w\:\-\!\[\]#]+)(?=[\w\:\-\!\[\]#\s]*['"])/gm;
              // const tagRegex = /(?<=\n\s*%)(?!script|meta|style|link)([\w\-]+)(?=[\n\s\.\({])/gm;
              const classRegex = /(?<=\.)([\w\-]+)|(?<=class[\:=]\s*['"][\w\:\-\/\!\[\]#\s]*)([\w\:\-\/\!\[\]#]+)(?=[\w\:\-\/\!\[\]#\s]*['"])/gm;
              const tagRegex = /(?<=\n\s*%)(?!script|meta|style|link)([\w\-]+)(?=[\n\s\.\({])/gm;
              return function extractFromHaml(content) {
                return {
                  classes: content.match(classRegex) || [],
                  tags: content.match(tagRegex) || [],
                };
              };
            })(),
            extensions: ["haml"],
          },
        ],
      },
    }),
    EnvironmentPlugin({ test_env: 'XXX' }),
    FullReload(['config/routes.rb', 'app/views/**/*']),
    RubyPlugin(),
  ],
})

Is there any way to connect to the dev server in chrome to have the usual debugging tools available?

PS: Thanks for the awesome work @ElMassimo, really appreciate it!

[ElMassimo]

For creating a plugin like this, I'd recommend simplifying your setup, so that you develop it separately from the Ruby setup.

I highly recommend using DEBUG="*windi*" vite to log as much information as you can regarding which files are being scanned, and classes are being detected.