Codifica tu web SolidJS más rápido con Stylify CSS

Codifica tu web SolidJS más rápido con Stylify CSS

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

Estiliza tu aplicación SolidJS rápida y fácilmente sin CSS-in-JS utilizando Stylify CSS utilidades similares a CSS.

Introducción

Stylify es una librería 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 probarlo!

Instalación

Instala Stylify usando CLI:

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

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

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
	bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
	// Opcional
	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, solidPlugin()],
	server: {
		port: 3000,
	},
	build: {
		target: 'esnext',
	},
});

Añadir CSS de Stylify en src/index.js:

import './stylify.css';

Uso

La sintaxis de Stylify es similar a la de CSS. Sólo tienes que escribir _ en lugar de un espacio y ^ en lugar de una comilla.

Así que si editamos el src/App.jsx:

function App() {
	return (
		<h1 class="font-size:24px margin:12px_24px">
			¡Hola Mundo!
		</h1>
	);
}

export default App;

En producción, obtendrás CSS optimizado y HTML manipulado:

<h1 class="p u">¡Hola Mundo!</h1>

.p{font-size: 24px}
.u{margin: 12px 24px}

Stackblitz Playground

Adelante, prueba Stylify CSS + SolidJS en Stackblitz.

Configuración

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

• Definir componentes
• Añadir selectores personalizados
• Configura tus macros como ml:20px para margin-left
• Define pantallas personalizadas
• Puedes mapear archivos anidados en la plantilla
• Y mucho más

No dudes en consultar la documentación para aprender más 💎.