Using Stylify CSS with Vite.js

Vite.js is next Generation Frontend Tooling and Assets Bundler.

Stylify can be integrated into the Vite.js using @stylify/bundler.

Try it on StackBlitz

How to integrate the Stylify CSS into the Vite.js

The example below works with the Vite template. You can however use the example below and configure it for Svelte, React, Vue, Angular, Lit and any other framework you want.

First, install the @stylify/unplugin package using NPM or Yarn:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Next add the following configuration into the vite.config.js:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{ files: ['./*'], outputFile: './stylify.css' }],
	// Optional
	// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

export default defineConfig(({ mode }) => ({
	plugins: [stylifyPlugin],
}));

Now you can add the path of the generated stylify.css into main.js file:

import './stylify.css';

If you use the Vite.js commands now you will get the stylify.css file generated.