Вёрстка сайта с использованием PostCSS

Вёрстка сайта с использованием PostCSS

PostCSS — инструмент трансформации CSS через JavaScript-плагины. Сам по себе не делает ничего — всё поведение задаётся плагинами. Tailwind CSS работает на PostCSS. Autoprefixer — плагин PostCSS. CSS Modules обрабатываются PostCSS. PostCSS — не замена SCSS, а слой трансформации, который можно использовать в сочетании с любым препроцессором или без него.

Установка и базовая конфигурация

npm install -D postcss

// postcss.config.js
/** @type {import('postcss').Config} */
module.exports = {
  plugins: [
    require('postcss-import'),          // @import → инлайн
    require('postcss-nested'),          // Вложенность как в SCSS
    require('postcss-custom-media'),    // Custom Media Queries
    require('autoprefixer'),            // Вендорные префиксы
    require('postcss-preset-env')({     // Современный CSS → совместимый
      stage: 2,
      features: {
        'nesting-rules': true,
        'custom-properties': false,     // Оставить нативные
        'color-function': true,
      },
    }),
    ...(process.env.NODE_ENV === 'production'
      ? [require('cssnano')({ preset: 'default' })]
      : []),
  ],
};

В Vite PostCSS-конфиг читается автоматически из корня проекта или через css.postcss в vite.config.ts.

Ключевые плагины

postcss-import

Заменяет @import на содержимое файлов прямо при сборке — единый CSS-файл без HTTP-запросов:

/* src/styles/main.css */
@import "./reset.css";
@import "./tokens.css";
@import "./base.css";
@import "./components/button.css";
@import "./components/card.css";
@import "./layout/header.css";
@import "./pages/home.css";

postcss-nested — вложенность без SCSS

/* До обработки */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);

  &:hover {
    box-shadow: var(--shadow-md);
  }

  & .card-title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

/* После обработки */
.card { background: var(--color-surface); border-radius: var(--radius-lg); }
.card:hover { box-shadow: var(--shadow-md); }
.card .card-title { font-size: 1.25rem; font-weight: 600; }
@media (min-width: 768px) { .card { padding: 2rem; } }

postcss-custom-media

/* Определить кастомные медиа-запросы один раз */
@custom-media --sm (min-width: 576px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);
@custom-media --xl (min-width: 1280px);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --motion-ok (prefers-reduced-motion: no-preference);

/* Использование */
.hero {
  padding: 3rem 1rem;

  @media (--md) {
    padding: 6rem 2rem;
  }

  @media (--lg) {
    flex-direction: row;
    padding: 8rem 3rem;
  }
}

.card {
  @media (--dark) {
    background: #1e293b;
    color: #f1f5f9;
  }
}

.animated-element {
  @media (--motion-ok) {
    transition: transform 300ms ease;
  }
}

postcss-preset-env — нативный современный CSS

/* Нативный CSS nesting (Level 4) → PostCSS разворачивает для старых браузеров */
.nav {
  display: flex;
  gap: 1rem;

  & a {
    color: var(--color-text-secondary);

    &:hover {
      color: var(--color-text-primary);
    }

    &[aria-current="page"] {
      color: var(--color-accent);
      font-weight: 500;
    }
  }
}

/* :is() и :where() */
:is(h1, h2, h3, h4) {
  font-weight: 600;
  line-height: 1.3;
}

/* color-mix() */
.button-hover {
  background: color-mix(in srgb, var(--color-accent) 85%, black);
}

/* oklch цвета */
.primary {
  color: oklch(50% 0.2 264);
}

cssnano — минификация

// Тонкая настройка cssnano
require('cssnano')({
  preset: ['advanced', {
    discardComments: { removeAll: true },
    reduceIdents: false,      // Не переименовывать @keyframes
    zindex: false,            // Не оптимизировать z-index
    colormin: true,
    minifyFontValues: true,
  }],
})

Собственный PostCSS-плагин

Когда стандартных плагинов не хватает:

// postcss-theme-tokens.js
const plugin = require('postcss').plugin('postcss-theme-tokens', (opts = {}) => {
  return (root) => {
    root.walkRules((rule) => {
      if (rule.selector === ':root') {
        rule.walkDecls(/^--/, (decl) => {
          // Логировать все токены для документации
          if (opts.log) {
            console.log(`Token: ${decl.prop} = ${decl.value}`);
          }
        });
      }
    });
  };
});

module.exports = plugin;

Или через современный API:

// postcss-strip-debug.mjs
export default {
  postcssPlugin: 'postcss-strip-debug',
  Declaration(decl) {
    // Убрать border: 1px solid red; из production
    if (
      process.env.NODE_ENV === 'production' &&
      decl.prop === 'border' &&
      decl.value.includes('red')
    ) {
      decl.remove();
    }
  },
};
export const postcss = true;

PurgeCSS через PostCSS

npm install -D @fullhuman/postcss-purgecss

// postcss.config.js
module.exports = {
  plugins: [
    ...(process.env.NODE_ENV === 'production'
      ? [
          require('@fullhuman/postcss-purgecss')({
            content: ['./src/**/*.{html,jsx,tsx,vue}'],
            defaultExtractor: (content) =>
              content.match(/[\w-/:]+(?<!:)/g) || [],
            safelist: {
              standard: [/^is-/, /^has-/, /^data-/],
              greedy: [/modal/, /tooltip/],
            },
          }),
        ]
      : []),
  ],
};

Интеграция с SCSS

PostCSS и SCSS работают последовательно — SCSS компилируется первым, PostCSS обрабатывает результат:

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/abstracts" as *;`,
      },
    },
    postcss: {
      plugins: [autoprefixer(), cssnano()],
    },
  },
});

Сроки

Настройка цепочки PostCSS-плагинов для проекта: 2–4 часа. PostCSS, как правило, добавляется к существующему инструментарию, а не используется самостоятельно. Написание кастомного плагина для специфической задачи: 2–6 часов в зависимости от сложности трансформации.