← Все статьи

Гайды

Миграция с Stylish / Stylus на JustZix — что ты получаешь сверх CSS

15 мая 2026 · автор JustZix Team

Если ты годами используешь Stylish или Stylus — JustZix их естественный преемник. Всё, что они делают для CSS, делает и JustZix. Плюс: JS-правила (у Stylus их нет), панели действий с 6 типами кнопок (slider/toggle3/textarea), 4 типа окон во фронтенде (CSS pane / JS pane / JS Console / Output Console), snap-соединения для дашборд-layout, ссылки для импорта с TTL и sync между устройствами. Никакого аккаунта, никакого трекинга, полностью open-source. Эта статья объясняет, что копировать из Stylus и что добавить из JustZix по пути.

Почему мигрировать — быстрая сводка

Шаг 1 — экспорт стилей из Stylus

У Stylus есть встроенный экспорт бэкапа:

1. Открой расширение Stylus → «Manage» → «Backup» → «Export styles to file»
2. Сохрани stylus_backup.json — это JSON с каждым стилем (CSS-код + секции с URL-префиксами)

Stylish: если ты его использовал, у тебя, вероятно, есть локальные бэкапы или ключи для userstyles.org. У JustZix нет прямого импорта — ручное «копировать-вставить» (каждый стиль = новое правило JustZix). В среднем 30 секунд на стиль.

Шаг 2 — отображение концепций

Другая терминология, похожая семантика:

Шаг 3 — вставка CSS

Для каждого style Stylus:

1. В опциях JustZix: Папка → +Правило
2. Scope: выбери «URL-паттерн» и вставь URL-префикс Stylus (например, https://reddit.com/*)
3. Вкладка CSS: вставь весь код секции Stylus (без обёртки @-moz-document — JustZix оборачивает её автоматически)
4. Сохрани

Специфика синтаксиса Stylus: если ты использовал препроцессор Less/Stylus/SCSS в Stylus, нужно предобработать в простой CSS перед вставкой. JustZix — только простой CSS (никакого babel в браузере).

Шаг 4 — добавь функции, которых нет в Stylus

После CSS-миграции можешь обогатить каждое правило вещами, невозможными в Stylus:

4a. JS-правило — авто-пропуск cookie-баннера

Классический пробел Stylus — JS это побочный канал, недоступный CSS. JustZix: добавь JS в то же правило:

// JS-правило (тот же scope, что CSS)
const observer = new MutationObserver(() => {
  const accept = [...document.querySelectorAll('button, a')]
    .find(b => /accept all|принять все/i.test(b.textContent));
  if (accept) { accept.click(); observer.disconnect(); }
});
observer.observe(document.body, { childList: true, subtree: true });

CSS скрыл баннер визуально (защита), JS нажимает «Accept», когда баннер появляется (атака). Одно правило, два слоя.

4b. Действие SLIDER — живое изменение размера шрифта

Userstyle Stylus с var(--font-size) и числовым промптом — громоздко. JustZix:

// Действие SLIDER «🔤 Шрифт»
min: 12, max: 22, step: 1, defaultValue: 16, unit: 'px'

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

CSS-правило использует: body, p, span { font-size: var(--user-font, 16px) !important; }. Перетащи слайдер на панели действий → живое обновление без F5. Memory по доменам.

4c. CSS pane — живой редактор для новых сниппетов

Stylus требует открыть страницу опций + редактировать + сохранить + перезагрузить страницу. CSS pane JustZix = панель рядом со страницей, пишешь CSS, живое обновление в самой вкладке. F5 сохраняет содержимое pane (sessionStorage). Идеально для «попробовать что-то временно».

Шаг 5 — настроить sync

Stylus Sync требует отдельного аккаунта Stylus + ручной конфигурации. JustZix использует chrome.storage.sync автоматически — если ты залогинен в Chrome, правила зашифрованы и синхронизированы через аккаунт Google.

Лимит chrome.storage.sync: 100 KB всего + 8 KB на элемент. JustZix делит большие правила на несколько элементов. На практике 50-100 CSS+JS правил помещаются без проблем. Сверх → фолбэк chrome.storage.local (по устройству, без sync).

Шаг 6 — делиться через ссылку с TTL (вместо userstyles.org)

userstyles.org = центральный реестр, публичный, постоянный. JustZix Share = эфемерный, opt-in, TTL от 1ч до 48ч:

1. Правило JustZix → «Share» (иконка буфера обмена сверху справа)
2. Выбери TTL: 1ч / 8ч / 24ч / 48ч
3. Получи ссылку https://www.justzix.com/s/aBcDeF123
4. Вставь её команде в Slack/Discord. Клик → они импортируют правило у себя
5. После TTL → ссылка даёт 404, данные удаляются с бэкенда (соответствие GDPR)

Идеально для QA-команд — «протестируй этот поток с моим сетапом», «попробуй это изменение UI», «вот QA-панель для импорта». Никакого постоянства в публичном реестре.

Сценарий 1 — режим чтения Reddit

Userstyle Stylus «Old Reddit reader mode» → 200 строк CSS, скрывающих сайдбар, рекламу, рекомендации. JustZix:

• CSS-правило (те же 200 строк)
• Плюс TOGGLE3 «Mode» (Reader / Default / Compact) — 3 состояния с разными CSS-переменными
• Плюс SLIDER «Width» — ширина текстовой колонки
• Плюс Output Console — логирует каждое действие «клик по ссылке» (отладка, чтобы видеть, что трекается)

Stylus = статический стиль. JustZix = интерактивный слой кастомизации.

Сценарий 2 — тёмная тема GitHub (улучшенная версия)

Userstyle Stylus «GitHub Dark» → 500 строк CSS с захардкоженными цветами. JustZix:

• CSS-правило с CSS-переменными (--bg, --text, --accent)
• TOGGLE3 «Mode» (Light / Dim / Dark / Auto-system) — 4 состояния, каждое задаёт переменные
• SLIDER «Saturation» — десатурация цветов для комфорта глаз

Кастомизация прямо во вкладке, без возврата на страницу опций Stylus.

Ловушки миграции

• JustZix НЕ импортирует JSON Stylus. Ручное «копировать-вставить» по правилу. На практике: 30 сек на стиль. Если у тебя 50 стилей → ~25 мин. Советую сгруппировать работу во время кофе-паузы.
• Никакой предобработки Less/Stylus/SCSS. CSS JustZix простой. Предобрабатывай на build-time перед вставкой, или используй CSS-переменные вместо Less-переменных.
• Синтаксис regex Stylus отличается от JustZix. Stylus использует regexp("...") внутри @-moz-document, scope.url JustZix принимает regex в стиле JS. Небольшие различия синтаксиса — тестируй паттерны после миграции.
• Центрального реестра userstyles.org больше нет. userstyles.world — частичный преемник. Шеринг JustZix эфемерный, не публичный — по выбору. Если хочешь публичный CSS-хостинг → используй GitHub Gist + шеринг JustZix для быстрых ссылок.
• Исторический инцидент трекинга Stylish. В 2018 году Stylish отключили, и выяснилось, что трекинг телеметрии был активен. JustZix open-source MIT, никакой аналитики по умолчанию, GA4 только через явное согласие на cookie (GDPR).

Что делать дальше

После миграции с Stylus у тебя та же функциональность + в 5 раз больше. Всё необязательно — можешь использовать только CSS-правила как в Stylus, или исследовать JS-правила, панели действий, panes по одному. Смотри также:

• Мини-IDE во вкладке — полная карта инструментов JustZix
• CSS pane — живой редактор во вкладке (самая «Stylus-подобная» функция)
• Тёмная тема для любого сайта — готовый сниппет для миграции

Установи JustZix — Stylus может жить параллельно (Chrome позволяет оба расширения одновременно), так что ты можешь попробовать JustZix, не удаляя Stylus. Через неделю ты увидишь, что нужно только одно.