Using Stylify CSS in React.js

React.js is a JavaScript library for building user interfaces.

Stylify can be used with React.js in varous ways:

• With Vite.js (this example)
• Next.js

Try it on StackBlitz

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

The example below works with the Vite - React.js template. You can however use the example below and configure it for Svelte, 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 react from '@vitejs/plugin-react'
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{outputFile: './src/stylify.css', files: ['./src/**'] }],
	// 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({
	plugins: [stylifyPlugin, react()]
});

Now you can add the path to the generated src/stylify.css into src/main.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