Using Stylify CSS in SolidJS

SolidJS is a framework for simple and performant reactivity for building user interfaces.

Try it on StackBlitz

How to integrate the Stylify CSS with SolidJS and Vite.js

The example below works with the Vite - SolidJS template. You can however use the example below and configure it for React.js, Vue and any other framework you use.

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';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
	bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
	// Optional
	compiler: {
		variables: {},
		macros: {},
		components: {},
		// ...

export default defineConfig({
	plugins: [stylifyPlugin, solidPlugin()],
	server: {
		port: 3000,
	build: {
		target: 'esnext',

Now you can add the path of the generated src/stylify.css into src/index.js file:

import './stylify.css';

Now run yarn dev. The src/stylify.css file will be generated.


There is a lot of options you can configure:

Where to go next?