Using Stylify CSS in Qwik Framework

Qwik is reimagined JavaScript framework for the edge. No hydration, auto lazy-loading, edge-optimized.

Stylify can be used within the Qwik Framework using the Stylify CSS Vite plugin.

Try it on StackBlitz

Installation

Integration can be installed only via CLI like NPM or Yarn:

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

Usage

Edit the vite.config.js.

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

const stylifyPlugin = stylifyVite({
	bundles: [
		{ files: ['src/**/*.tsx'], outputFile: 'src/global.css' }
	],
	// Optional - https://stylifycss.com/en/docs/unplugin
	// 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]
});

Import global.css in src/root.tsx:

import './global.css';

Split bundles for each page

Bundles can be also configured for each page separately. With this approach, you can get the smallest CSS possible. For example:

bundles: [
	// Layout
	{ files: ['src/root.tsx', 'src/routes/layout.tsx'], outputFile: 'src/assets/css/layout.css'},
	// Index page
	{ files: ['src/routes/index.tsx'], outputFile: 'src/assets/css/index.css'},
],

In src/routes/index.tsx the following:

import { useStyles$ } from '@builder.io/qwik';
import indexCss from '../assets/css/index.css';
// ...

export default component$(() => {
	useStyles$(indexCss);
	// ...
})

And add the layout import import './assets/css/layout.css' in src/root.tsx.

Configuration

There is a lot of options you can configure:

• @stylify/unplugin
• Compiler config