React.js integration

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

With Vite.js (this example)
Next.js

Integration example for the Vite.js can be found in integrations examples repository .

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

The example bellow works with the Vite - React.js template. You can however use the example bellow 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 { vitePlugin } from '@stylify/unplugin';

const stylifyPlugin = vitePlugin({
    transformIncludeFilter: (id) => {
        return id.endsWith('js') || id.endsWith('ts') || id.endsWith('tsx') || id.endsWith('jsx');
    },
    bundles: [{
        outputFile: './src/stylify.css',
        files: ['./src/**/*.js', './src/**/*.ts', './src/**/*.jsx', './src/**/*.tsx'],
    }],
    extend: {
        bundler: {
            compiler: {
                selectorsAreas: [
                    '(?:^|\\s+)className="([^"]+)"',
                    '(?:^|\\s+)className=\'([^\']+)\'',
                    '(?:^|\\s+)className=\\{`((?:.|\n)+)`\\}'
                ]
            }
        }
    }
});

export default defineConfig({
    plugins: [stylifyPlugin, react()]
});

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

// ..
import './assets/stylify.css';

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

Configuration

There is a lot of options you can configure:

Where to go next?

🚀 Learn how to get started
🔌 Checkout @stylify/unplugin configuration
⚙️ Or configure Stylify right away: