← Todos los artículos

Guías

Migrar de Stylish / Stylus a JustZix — qué ganas además del CSS

15 mayo 2026 · por JustZix Team

Si usas Stylish o Stylus desde hace años — JustZix es su sucesor natural. Todo lo que esos hacen para el CSS, también lo hace JustZix. Además: reglas JS (Stylus no las tiene), barras de acciones con 6 tipos de botones (slider/toggle3/textarea), 4 tipos de ventanas en el frontend (CSS pane / JS pane / JS Console / Output Console), snap connections para el layout de dashboard, enlaces de compartición con TTL y sync entre dispositivos. Sin cuenta, sin tracking, completamente open-source. Este artículo explica qué copiar de Stylus y qué añadir de JustZix por el camino.

Por qué migrar — resumen rápido

Paso 1 — Exportar los estilos de Stylus

Stylus tiene un export de backup integrado:

1. Abre la extensión Stylus → «Manage» → «Backup» → «Export styles to file»
2. Guarda stylus_backup.json — es JSON con cada estilo (código CSS + section con prefijos URL)

Stylish: si lo has usado, probablemente tienes backups locales o claves para userstyles.org. JustZix no tiene un import directo — copia-pega manual (cada estilo = una nueva regla JustZix). De media 30 segundos por estilo.

Paso 2 — Mapeo de los conceptos

Terminología distinta, semántica similar:

Paso 3 — Pegar el CSS

Para cada style Stylus:

1. En las opciones JustZix: Carpeta → +Regla
2. Scope: elige «Patrón URL» y pega el prefijo URL de Stylus (p. ej. https://reddit.com/*)
3. Pestaña CSS: pega todo el código de la section Stylus (sin el wrapper @-moz-document — JustZix lo envuelve automáticamente)
4. Guarda

Específico de la sintaxis Stylus: si has usado un preprocesador Less/Stylus/SCSS en Stylus, debes pre-procesar a CSS plano antes de pegar. JustZix es solo CSS plano (sin babel en el navegador).

Paso 4 — Añadir las funciones que Stylus no tiene

Tras la migración CSS, puedes enriquecer cada regla con cosas imposibles en Stylus:

4a. Regla JS — saltar automáticamente el banner de cookies

Laguna clásica de Stylus — el JS es un canal lateral no disponible para el CSS. JustZix: añade JS en la misma regla:

// Regla JS (mismo scope que el CSS)
const observer = new MutationObserver(() => {
  const accept = [...document.querySelectorAll('button, a')]
    .find(b => /accept all|aceptar todo/i.test(b.textContent));
  if (accept) { accept.click(); observer.disconnect(); }
});
observer.observe(document.body, { childList: true, subtree: true });

El CSS ha ocultado el banner visualmente (defensa), el JS pulsa «Accept» cuando el banner aparece (ataque). Una regla, dos capas.

4b. Acción SLIDER — modificación del tamaño de la fuente en vivo

Userstyle Stylus con var(--font-size) y un prompt de números — engorroso. JustZix:

// Acción SLIDER «🔤 Font»
min: 12, max: 22, step: 1, defaultValue: 16, unit: 'px'

code: |
  document.documentElement.style.setProperty('--user-font', value + 'px');

La regla CSS usa: body, p, span { font-size: var(--user-font, 16px) !important; }. Arrastra el slider en la barra de acciones → actualización en vivo sin F5. Memory por dominio.

4c. CSS pane — editor en vivo para nuevos snippets

Stylus requiere abrir la página de opciones + modificar + guardar + recargar la página. El CSS pane de JustZix = un panel junto a la página, escribir CSS, actualización en vivo en la pestaña misma. F5 conserva el contenido del pane (sessionStorage). Perfecto para «probar algo temporalmente».

Paso 5 — Configurar el sync

Stylus Sync requiere una cuenta Stylus separada + configuración manual. JustZix usa chrome.storage.sync automáticamente — si tienes la sesión iniciada en Chrome, las reglas se cifran y sincronizan mediante la cuenta de Google.

Límite de chrome.storage.sync: 100 KB en total + 8 KB por item. JustZix divide las reglas grandes entre varios items. En la práctica 50-100 reglas CSS+JS entran sin problemas. Más allá → fallback chrome.storage.local (por dispositivo, sin sync).

Paso 6 — Compartir mediante enlace TTL (en lugar de userstyles.org)

userstyles.org = registro central, público, persistente. JustZix Share = efímero, opt-in, TTL de 1h a 48h:

1. Regla JustZix → «Share» (icono de portapapeles arriba a la derecha)
2. Elige el TTL: 1h / 8h / 24h / 48h
3. Obtienes un enlace https://www.justzix.com/s/aBcDeF123
4. Pégalo a tu equipo en Slack/Discord. Clic → importan la regla en su navegador
5. Tras el TTL → el enlace da 404, los datos se eliminan del backend (conformidad RGPD)

Perfecto para los equipos QA — «prueba este flujo con mi setup», «prueba este cambio de UI», «aquí tienes una barra QA para importar». Sin persistencia en un registro público.

Caso de uso 1 — Modo lectura de Reddit

Un userstyle Stylus «Old Reddit reader mode» → 200 líneas de CSS que ocultan la sidebar, los anuncios, las recomendaciones. JustZix:

• Regla CSS (las mismas 200 líneas)
• Más un TOGGLE3 «Mode» (Reader / Default / Compact) — 3 estados con variables CSS distintas
• Más un SLIDER «Width» — anchura de la columna de texto
• Más una Output Console — loguea cada acción «clic en enlace» (debug para ver qué rastrea)

Stylus = estilo estático. JustZix = capa de personalización interactiva.

Caso de uso 2 — Modo oscuro GitHub (una versión mejor)

Un userstyle Stylus «GitHub Dark» → 500 líneas de CSS con colores hardcodeados. JustZix:

• Regla CSS con variables CSS (--bg, --text, --accent)
• TOGGLE3 «Mode» (Light / Dim / Dark / Auto-system) — 4 estados, cada uno establece las variables
• SLIDER «Saturation» — desatura los colores para la comodidad de los ojos

Personalización directamente en la pestaña, sin volver a la página de opciones de Stylus.

Trampas de la migración

• JustZix NO importa el JSON de Stylus. Copia-pega manual por regla. En la práctica: 30 seg por estilo. Si tienes 50 estilos → ~25 min. Recomiendo agrupar el trabajo durante una pausa para el café.
• Sin preprocessing Less/Stylus/SCSS. El CSS de JustZix es plano. Pre-procesa en build-time antes de pegar, o usa variables CSS en lugar de variables Less.
• La sintaxis regex de Stylus difiere de JustZix. Stylus usa regexp("...") dentro de @-moz-document, el scope.url de JustZix acepta regex en estilo JS. Pequeñas diferencias de sintaxis — prueba los patrones tras la migración.
• El registro central userstyles.org ya no está. userstyles.world es un sucesor parcial. La compartición JustZix es efímera, no pública — por decisión. Si quieres un hosting CSS público → usa un GitHub Gist + la compartición JustZix para enlaces rápidos.
• Incidente de tracking histórico de Stylish. En 2018 Stylish fue desactivado y se descubrió que el tracking de telemetría estaba activo. JustZix es open-source MIT, sin analytics por defecto, GA4 solo mediante consentimiento explícito de cookies (RGPD).

Qué hacer después

Tras migrar de Stylus tienes la misma funcionalidad + 5x más. Todo opcional — puedes usar solo reglas CSS como en Stylus, o explorar reglas JS, barras de acciones, panes uno a uno. Mira también:

• Mini-IDE en la pestaña — mapa completo de las herramientas JustZix
• CSS pane — editor en vivo en la pestaña (la función más «Stylus-like»)
• Modo oscuro para cualquier sitio — un snippet listo para la migración

Instala JustZix — Stylus puede vivir en paralelo (Chrome permite ambas extensiones a la vez), así que puedes probar JustZix sin eliminar Stylus. Tras una semana verás que solo hace falta una.