Препроцессоры и PostCSS

Mithril не навязывает структуру проекта и не включает собственную систему стилей. Это делает фреймворк удобным для интеграции с любыми CSS-препроцессорами и инструментами постобработки. Препроцессоры используются для расширения возможностей CSS: вложенность, переменные, миксины, функции, разделение на модули. PostCSS дополняет эту цепочку автоматической трансформацией итогового CSS-кода.

В проектах на Mithril препроцессоры и PostCSS обычно работают вне самого фреймворка, на уровне сборки. Это позволяет сохранить минимализм Mithril и при этом получить современный и масштабируемый подход к стилям.

SCSS и Sass в связке с Mithril

SCSS — наиболее распространённый препроцессор в экосистеме JavaScript. Его синтаксис близок к обычному CSS и хорошо подходит для компонентной архитектуры.

Ключевые возможности SCSS:

  • переменные для цветов, размеров, отступов;
  • вложенные селекторы;
  • миксины и функции;
  • разделение стилей на частичные файлы;
  • логика (условия, циклы).

Пример структуры проекта:

src/
 ├─ components/
 │   ├─ Button/
 │   │   ├─ Button.js
 │   │   └─ Button.scss
 ├─ styles/
 │   ├─ _variables.scss
 │   ├─ _mixins.scss
 │   └─ main.scss

Файл компонента:

import m from "mithril";
import "./Button.scss";

export const Button = {
    view: ({ attrs, children }) =>
        m("button.btn", attrs, children)
};

SCSS-файл компонента:

@use "../. ./styles/variables" as *;

.btn {
    background-color: $primary-color;
    padding: 0.5rem 1rem;
    border-radius: 4px;

    &:hover {
        background-color: darken($primary-color, 10%);
    }
}

SCSS компилируется в обычный CSS ещё до загрузки приложения в браузер. Mithril не участвует в этом процессе.

Less и альтернативные препроцессоры

Less используется реже, но также хорошо интегрируется в сборку Mithril-приложений. Он предоставляет переменные, миксины и вложенность, но с меньшими возможностями по сравнению с SCSS.

Пример Less:

@primary-color: #4a90e2;

.btn {
    background: @primary-color;

    &:hover {
        background: darken(@primary-color, 10%);
    }
}

Выбор препроцессора не влияет на архитектуру Mithril, так как все они работают на этапе сборки и не зависят от виртуального DOM.

Компонентный подход к стилям

Mithril поощряет композицию компонентов, и стили логично организовывать аналогично. Препроцессоры позволяют:

  • изолировать стили компонентов;
  • использовать общие переменные и миксины;
  • избегать дублирования.

Распространённые подходы:

  • один SCSS-файл на компонент;
  • глобальные переменные и миксины;
  • минимум глобальных селекторов.

Препроцессоры не обеспечивают реальной изоляции стилей, поэтому часто используются соглашения по именованию или дополнительные инструменты (CSS Modules, scoped-стили).

PostCSS как слой постобработки

PostCSS — это платформа для трансформации CSS с помощью плагинов. В отличие от препроцессоров, он работает с уже валидным CSS.

Основные задачи PostCSS:

  • автоматическое добавление вендорных префиксов;
  • трансформация современного CSS под старые браузеры;
  • оптимизация и минификация;
  • линтинг и контроль качества;
  • работа с кастомными свойствами.

PostCSS не заменяет SCSS или Less, а дополняет их.

Autoprefixer

Один из самых популярных плагинов PostCSS — Autoprefixer. Он анализирует CSS и добавляет необходимые префиксы на основе заданной поддержки браузеров.

Пример входного CSS:

.container {
    display: flex;
    user-select: none;
}

Результат обработки:

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

Настройка списка поддерживаемых браузеров обычно выносится в browserslist.

Современный CSS через PostCSS

PostCSS позволяет использовать будущие возможности CSS уже сейчас. Плагины вроде postcss-preset-env включают поддержку:

  • вложенности;
  • кастомных медиазапросов;
  • логических свойств;
  • новых селекторов.

Пример с вложенностью:

.card {
    padding: 1rem;

    & .title {
        font-weight: bold;
    }
}

PostCSS преобразует это в стандартный CSS без вложенности.

Интеграция в сборку

В проектах на Mithril чаще всего используется одна из систем сборки:

  • Vite
  • Webpack
  • Rollup
  • esbuild

Типичная цепочка обработки стилей:

SCSS / Less
   ↓
PostCSS (Autoprefixer, preset-env)
   ↓
CSS
   ↓
Подключение в приложение

Пример конфигурации PostCSS:

export default {
    plugins: [
        require("postcss-preset-env")({
            stage: 1
        }),
        require("autoprefixer")
    ]
};

Mithril не требует специальных настроек — стили подключаются через обычные import.

Производительность и размер бандла

Использование препроцессоров и PostCSS не влияет на рантайм-производительность Mithril-приложения. Вся обработка выполняется на этапе сборки.

Преимущества:

  • чистый и оптимизированный CSS;
  • отсутствие лишнего JavaScript;
  • минимальный размер итогового бандла.

Минификация CSS обычно добавляется на этапе PostCSS или отдельным инструментом (cssnano).

Поддержка архитектурных подходов

Препроцессоры и PostCSS хорошо сочетаются с различными архитектурами:

  • BEM;
  • ITCSS;
  • utility-first;
  • дизайн-системы.

Mithril не ограничивает выбор и позволяет использовать стили как часть независимого слоя, что особенно важно в больших приложениях и библиотеках компонентов.

Практика совместного использования

Наиболее распространённая конфигурация в проектах на Mithril:

  • SCSS для структуры и логики стилей;
  • PostCSS для совместимости и оптимизации;
  • единый входной файл стилей или импорт на уровне компонентов;
  • строгие соглашения по структуре файлов.

Такой подход обеспечивает читаемость, масштабируемость и независимость слоя представления от механики виртуального DOM Mithril.

Оглавление