Uso de Stylify CSS en Svelte

Svelte es un enfoque radicalmente nuevo de la creación de interfaces de usuario. Mientras que los frameworks tradicionales como React y Vue realizan la mayor parte de su trabajo en el navegador, Svelte desplaza ese trabajo a un paso de compilación que tiene lugar cuando construyes tu aplicación.

Puedes usar Stylify CSS con SvelteKit o con Vite + Svelte App. A continuación hay guías para ambos escenarios.

Cómo integrar Stylify CSS con SvelteKit

Pruébalo en StackBlitz

Primero, instala el paquete @stylify/unplugin usando NPM o Yarn:

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

A continuación añade la siguiente configuración en vite.config.js:

import { sveltekit } from '@sveltejs/kit/vite';
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{
		outputFile: './src/stylify.css',
		files: ['./src/**/*.{svelte,html}'],
	}]
});

const config = {
	plugins: [
		stylifyPlugin,
		sveltekit(),
	]
};

export default config;

El último paso, crear src/routes/+layout.svelte con el siguiente contenido stylify.css:

<script>
	import '../stylify.css';
</script>

<slot />

En caso de que hayas creado más paquetes, por ejemplo para páginas, tienes que añadir las rutas a esos archivos CSS generados en los archivos Svelte correctos.

Ahora ejecuta yarn dev. Se generará el fichero src/stylify.css.

Cómo integrar el CSS de Stylify con Svelte y Vite.js

Pruébalo en StackBlitz

El ejemplo de abajo funciona con la plantilla Vite - Svelte. Sin embargo, puedes utilizar el ejemplo de abajo y configurarlo para React.js, Vue y cualquier otro framework que utilices.

Primero, instala el paquete @stylify/unplugin usando NPM o Yarn:

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

A continuación añade la siguiente configuración en vite.config.js:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
	bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.svelte'] }],
	// Opcional
	// Información de configuración del compilador 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, svelte()]
});

Ahora puedes añadir la ruta del src/stylify.css generado en el archivo src/main.js:

import './stylify.css';

Ahora ejecuta yarn dev. Se generará el archivo src/stylify.css.

Configuración

Hay muchas opciones que puedes configurar:

• @stylify/unplugin
• Compiler config

Otros consejos

En caso de que uses la sintaxis de grupo de Stylify como [h1,h2]{color:blue}, svelte coincidirá con el {color como variable. Para evitarlo, utiliza la sintaxis con llaves y literales de plantilla para los atributos de clase:

class={` [h1,h2]{color:blue} `}