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: {
		// 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({
	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.

Configuration

There is a lot of options you can configure:

• @stylify/unplugin
• Compiler config