← Wszystkie wpisy

Przewodniki

Migracja ze Stylish / Stylus do JustZix — co zyskujesz oprócz CSS

15 maja 2026 · autor JustZix Team

Jeśli używasz Stylish lub Stylus od lat — JustZix to ich naturalny następca. Wszystko co tamte robią dla CSS, JustZix robi też. Plus: JS rules (Stylus tego nie ma), action bars z 6 typami przycisków (slider/toggle3/textarea), 4 typy okien na froncie (CSS pane / JS pane / JS Console / Output Console), snap connections dla dashboard layout, share linki z TTL i sync między urządzeniami. Bez konta, bez tracking'u, kompletnie open-source. Ten post mówi co skopiować ze Stylusa i co dodać z JustZix po drodze.

Dlaczego migrować — szybkie podsumowanie

Step 1 — Eksport stylów ze Stylusa

Stylus ma wbudowany backup eksportu:

1. Otwórz Stylus extension → "Manage" → "Backup" → "Export styles to file"
2. Zapisz stylus_backup.json — to JSON z każdym stylem (kod CSS + sections z URL prefixami)

Stylish: jeśli używałeś, prawdopodobnie masz lokalne backupy lub klucze do userstyles.org. JustZix nie ma direct importu — przeklepywanie ręczne (każdy styl = nowa reguła JustZix). Średnio 30 sekund per styl.

Step 2 — Mapping concepts

Terminologia różna, semantyka podobna:

Step 3 — Przekleić CSS

Dla każdego Stylus style:

1. W JustZix options: Folder → +Reguła
2. Scope: wybierz "URL pattern" i wklej Stylus URL prefix (np. https://reddit.com/*)
3. Zakładka CSS: wklej cały kod ze Stylus section (bez wrapper'a @-moz-document — JustZix wraps automatycznie)
4. Save

Stylus syntax-specific: jeśli używałeś preprocessor'a Less/Stylus/SCSS w Stylus, musisz pre-process do plain CSS przed wklejaniem. JustZix to plain CSS only (extension nie ma babel-w-przeglądarce).

Step 4 — Dodaj features których Stylus nie ma

Po migracji CSS, możesz wzbogacić każdą regułę rzeczami niemożliwymi w Stylus:

4a. JS rule — auto-skip cookie banner

Klasyczny brak Stylus — JS to side-channel niedostępny dla CSS. JustZix dodaj JS w tej samej regule:

// JS rule (same scope co CSS)
const observer = new MutationObserver(() => {
  const accept = [...document.querySelectorAll('button, a')]
    .find(b => /accept all|akceptuj wszystkie/i.test(b.textContent));
  if (accept) { accept.click(); observer.disconnect(); }
});
observer.observe(document.body, { childList: true, subtree: true });

CSS ukrył banner wizualnie (defense), JS klikuje "Accept" gdy banner się pojawia (offense). Jedno rule, dwie warstwy.

4b. SLIDER akcja — font-size live tweak

Stylus userstyle z var(--font-size) i prompt'em na liczby — clunky. JustZix:

// Akcja SLIDER "🔤 Font"
min: 12, max: 22, step: 1, defaultValue: 16, unit: 'px'

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

CSS rule używa: body, p, span { font-size: var(--user-font, 16px) !important; }. Drag slider w pasku akcji → live update bez F5. Memory per-domena.

4c. CSS pane — live editor dla nowych snippets

Stylus wymaga otwarcia options page + edit + save + reload page. JustZix CSS pane = panel obok strony, pisanie CSS, live update w samej karcie. F5 zachowuje treść pane'a (sessionStorage). Idealne dla "wypróbować coś tymczasowo".

Step 5 — Setup sync

Stylus Sync wymaga osobnego konta Stylus + manual config. JustZix używa chrome.storage.sync automatycznie — jeśli zalogowany do Chrome, reguły są szyfrowane i synchronizowane przez Google Account.

Limit chrome.storage.sync: 100 KB total + 8 KB per item. JustZix splituje duże reguły między items. Praktycznie 50-100 reguł CSS+JS mieści się bez problemu. Powyżej tego → chrome.storage.local fallback (per-device, bez sync).

Step 6 — Share przez TTL link (zamiast userstyles.org)

userstyles.org = central registry, public, persistent. JustZix Share = ephemeral, opt-in, TTL od 1h do 48h:

1. Reguła JustZix → "Share" (clipboard icon w prawym górnym rogu)
2. Wybierz TTL: 1h / 8h / 24h / 48h
3. Otrzymujesz link https://www.justzix.com/s/aBcDeF123
4. Wklej zespołowi w Slack/Discord. Click → importują regułę do siebie
5. Po TTL → link 404, dane usunięte z backend (GDPR compliance)

Idealne dla zespołów QA — "test ten flow z moim setup'em", "spróbuj tej regulacji UI", "tu masz pasek QA do importu". Bez persistencja w publicznym registry.

Use case 1 — Reddit reader mode

Stylus userstyle "Old Reddit reader mode" → 200 linii CSS hiding sidebar, ads, recommendations. JustZix:

• CSS rule (te same 200 linii)
• Plus TOGGLE3 "Mode" (Reader / Default / Compact) — 3 stany z różnymi CSS variables
• Plus SLIDER "Width" — szerokość kolumny tekstu
• Plus Output Console — log każdej akcji "klik na link" (debug żeby zobaczyć co tracking)

Stylus = static styling. JustZix = interactive customization layer.

Use case 2 — GitHub dark mode (lepsza wersja)

Stylus userstyle "GitHub Dark" → 500 linii CSS z hardcoded colors. JustZix:

• CSS rule z CSS variables (--bg, --text, --accent)
• TOGGLE3 "Mode" (Light / Dim / Dark / Auto-system) — 4 stany, każdy ustawia variables
• SLIDER "Saturation" — desaturate colors dla eye comfort

Customization bezpośrednio w karcie, bez wracania do Stylus options page.

Pułapki migracji

• JustZix NIE importuje JSON ze Stylusa. Ręczne przeklepywanie każdej reguły. Praktycznie: 30 sekund per styl. Jeśli masz 50 styli → ~25 minut. Polecam batch w czasie kawy.
• Brak Less/Stylus/SCSS preprocessing. JustZix CSS jest plain. Pre-process build-time przed wkleceniem, lub użyj CSS variables zamiast Less variables.
• Stylus regex syntax różny od JustZix. Stylus używa regexp("...") w @-moz-document, JustZix scope.url accept regex JS-flavor. Drobne różnice w syntax — testuj wzorce po migracji.
• userstyles.org central registry zniknął. userstyles.world to częściowy successor. JustZix share to ephemeral, niepublic — celowo. Jeśli chcesz public hosting CSS → użyj GitHub Gist + JustZix share dla quick links.
• Stylish historical tracking incident. W 2018 Stylish wyłączyli i okazało się że tracking telemetri był włączony. JustZix open-source MIT, no analytics by default, GA4 tylko po explicit cookie consent (RODO).

Co dalej

Po migracji ze Stylusa masz tę samą funkcjonalność + 5x więcej. Wszystko opcjonalne — możesz używać tylko CSS rules jak w Stylusie, albo eksplorować JS rules, action bars, panes pojedynczo. Sprawdź też:

• Mini-IDE w karcie — pełna mapa narzędzi JustZix
• CSS pane — live editor w karcie (najbardziej "Stylus-like" feature)
• Tryb ciemny dla każdej strony — gotowy snippet do migracji

Zainstaluj JustZix — Stylus może żyć równolegle (chrome pozwala obie wtyczki naraz), więc test JustZix bez deleting Stylus. Po tygodniu zobaczysz że potrzebujesz tylko jednego.