🚀 Dale estilo a tu web Svelte más rápido con Stylify CSS

Dale estilo a tu web Svelte de forma más rápida e intuitiva con Stylify

NoLimit Wehosting for $2/month.
Code WN241PJLO2

Stylify + Svelte + Vite. Dale estilo a tu web Svelte más rápido con Stylify. No estudies selectores y sintaxis. Usa sintaxis CSS pura y obtén CSS generado con optimización avanzada para producción.

Para un comienzo más fácil, puedes revisar el Stylify Stackblitz playground 🎮.

💎 Introducción a Stylify CSS

Stylify es una biblioteca que utiliza selectores similares a CSS para generar CSS optimizado basado en lo que escribes.

• ✅ Selectores similares a CSS
• ✅ Sin framework que estudiar
• ✅ Menos tiempo dedicado a la documentación
• ✅ CSS manoseado y extremadamente pequeño
• ✅ No es necesario purgar CSS
• ✅ Componentes, variables, selectores personalizados
• ✅ Puede generar múltiples paquetes de CSS

También tenemos una página sobre ¡qué problemas resuelve Stylify CSS y por qué deberías darle una oportunidad!

🚀 Configuración de Svelte

La forma más fácil de Setup el Svelte está utilizando CLI:

• Ejecutar yarn create vite app
• Selecciona svelte o svelte-ts.
• Luego cd app.

De esta forma obtendrás el esqueleto de la aplicación Svelte por defecto.

🔌 Integración CSS de Stylify

Instala el paquete @stylify/unplugin usando NPM o Yarn:

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

Abre el archivo vite.config.js y copia el siguiente contenido en él:

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'],
	}]
});

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

El último paso, abre el src/main.js y añade la ruta a stylify.css:

// ...
import './stylify.css'

Estilizar la web

¡Si copias el código de abajo en src/App.svelte y ejecutas yarn dev obtendrás un Hello World! 🎉 texto:

<main class="max-width:800px margin:0_auto">
	<h1 class="text-align:center margin-top:100px font-size:42px">
		¡¡¡Hola Mundo!!! 🎉
	</h1>
</main>

Stylify observa cualquier cambio en los archivos que coincida con la máscara en los archivos del bundle y genera CSS en el src/stylify.css.

Si añades por ejemplo color:blue el CSS se actualizará automáticamente 🎉.

Adelante y prueba Stylify CSS directamente en Stackblitz.com 💡.

Componentes

Para evitar plantillas hinchadas con utilidades, puedes usar componentes directamente en los archivos, donde se utilizan a través de opciones de contenido (espera objeto javascript sin corchetes) o en el compilador config.

<!--
stylify-components
	container: 'max-width:800px margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:42px'
/stylify-components
-->
<main class="container">
	<h1 class="title">
		¡¡¡Hola Mundo!!! 🎉
	</h1>
</main>

Variables

Si te gusta el código limpio, también quieres evitar valores hardcodeados en los selectores. [Las variables (/es/docs/get-started#adding-a-variable) se pueden definir de la misma manera que los componentes:

<!--
stylify-variables
	titleFontSize: '42px',
	containerWidth: '800px'
/stylify-variables

stylify-components
	container: 'max-width:$containerWidth margin:0_auto',
	title: 'text-align:center margin-top:100px font-size:$titleFontSize'
/stylify-components
-->
<main class="container">
	<h1 class="title">
		¡¡¡Hola Mundo!!! 🎉
	</h1>
</main>

Construyendo para producción

Si ejecutas yarn build + yarn preview, el marcado svelte se convertirá en esto:

<main class="a">
	<h1 class="b">
		¡Hello World! 🎉
	</h1>
</main>

El CSS también se acorta:

:root {--titleFontSize: 42px;--containerWidth: 800px;}
.c,.a{max-width:800px}
.d,.a{margin:0 auto}
.e,.b{text-align:center}
.f,.b{margin-top:100px}
.g,.b{font-size:42px}

Configura todo lo que necesites

Los ejemplos anteriores no incluyen todo lo que Stylify puede hacer:

• Puedes mapear archivos anidados en la plantilla
• Estilizar selectores globales
• Definir pantallas personalizadas
• Añade tus macros como ml:20px para margin-left
• Y mucho más

Siéntete libre de revisar la documentación para aprender más 💎.