Use UnoCSS instead of WindiCSS

[dplaza]

I faced challenges migrating from WindiCSS to UnoCSS, particularly with filesystem content functionality using vite-plugin-ruby. When I exclude ViteRuby from the plugins list and run bin/vite dev directly, it works fine. React file classes are processed without issues, but Slim file classes in app/views are only extracted if ViteRuby is excluded.

Here is my current configuration:

vite.config.js

import { defineConfig } from "vite";
import ViteRuby from "vite-plugin-ruby";
import React from "@vitejs/plugin-react";
import UnoCSS from "unocss/vite";

export default defineConfig({
	plugins: [
		ViteRuby(),
		React(),
		UnoCSS(),
	],
});

uno.config.js

import {
	presetUno,
	transformerDirectives,
	presetTypography,
	defineConfig,
} from "unocss";
import { presetForms } from "@julr/unocss-preset-forms";
import slimExtractor from "./slim_extractor";

export default defineConfig({
	content: {
		pipeline: {
			include: [
				// slim added to the default list here, otherwise they won't be detected
				/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html|slim)($|\?)/,
			],
		},
		filesystem: [
			"app/views/**/*",
		],
	},
	extractors: [slimExtractor()],
	presets: [presetUno(), presetTypography(), presetForms()],
	transformers: [transformerDirectives()]
})

slim_extractor.js

const classPattern = /(?:class\s*=\s*"([^"]+)"|\.([-:_\/\\\w\d]+))/g;

export default function slimExtractor() {
	return {
		name: "slim-extractor",
		extract({ id, code }) {
			if (id.endsWith(".slim")) {
				const matches = new Set();

				while (true) {
					const match = classPattern.exec(code);

					if (match === null) break;

					if (match[1]) {
						for (const cls of match[1].split(/\s+/)) {
							matches.add(cls);
						}
					} else if (match[2]) {
						matches.add(match[2]);
					}
				}

				return Array.from(matches);
			}
		},
	};
}

vite.json

{
	"all": {
		"sourceCodeDir": "app/javascript",
		"watchAdditionalPaths": [
			"app/views/**/*",
		],
		"host": "0.0.0.0"
	},
	"development": {
		"autoBuild": true,
		"publicOutputDir": "vite-dev",
		"port": 3036
	},
	"test": {
		"autoBuild": true,
		"publicOutputDir": "vite-test",
		"port": 3037
	}
}

It seems like the ViteRuby configuration is overriding the watchers for the filesystem content.

I would really appreciate any help, thanks!

[ElMassimo]

Hi Diego!

It's likely a problem with how the relative paths are resolved in unocss (probably against Vite's root, which is app/javascript when in a Vite Ruby app, instead of your project root).

Try passing a resolved path (absolute path) instead of a relative path.

import { projectRoot } from 'vite-plugin-ruby'
import { resolve } from 'path'

...

		filesystem: [
			resolve(projectRoot, "app/views/**/*"),
		],

[dplaza]

Hey Máximo, you were right, this was exactly the issue, thanks a lot!