0Pricing
CSS Academy · Урок

Пользовательские плагины PostCSS

Пишите собственный плагин PostCSS для программного преобразования узлов CSS.

«Пользовательские плагины PostCSS» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Зачем писать пользовательский плагин

Если ни один существующий плагин PostCSS не решает вашу задачу — преобразование CSS для конкретного проекта, вспомогательный инструмент для миграции или пользовательское правило проверки — написание собственного плагина даёт прямой доступ к AST CSS.

Структура плагина

Плагин PostCSS — это функция, которая получает корневой узел (разобранный CSS) и, при необходимости, объект результата. Используйте фабрику postcss.plugin() или современный подход с прямой функцией:

// my-plugin.js
const plugin = () => {
  return {
    postcssPlugin: 'my-plugin',
    Declaration(decl) {
      // Called for every declaration node
    },
    Rule(rule) {
      // Called for every rule node
    }
  };
};
plugin.postcss = true;
module.exports = plugin;

Обход объявлений

Преобразуйте каждое объявление color:

const plugin = () => ({
  postcssPlugin: 'rem-converter',
  Declaration(decl) {
    if (decl.prop === 'font-size' && decl.value.endsWith('px')) {
      const px = parseFloat(decl.value);
      decl.value = `${px / 16}rem`;
    }
  }
});

Добавление новых правил

Вставьте новое правило после каждого правила .btn:

Rule(rule) {
  if (rule.selector.includes('.btn')) {
    const focusRule = rule.cloneAfter();
    focusRule.selector = rule.selector + ':focus';
  }
}

Удаление объявлений

Удалите все объявления color: red (плагин для отладки и очистки):

Declaration(decl) {
  if (decl.prop === 'color' && decl.value === 'red') {
    decl.remove();
  }
}

Вспомогательные средства PostCSS

PostCSS предоставляет вспомогательные методы для узлов:

  • node.remove(): удаляет узел
  • node.replaceWith(newNode): заменяет узел
  • node.cloneBefore()/cloneAfter(): вставляет копию
  • postcss.decl()/rule()/atRule(): создаёт новые узлы

Асинхронные плагины

Плагины PostCSS могут быть асинхронными — это полезно, когда необходимо читать файлы или выполнять сетевые запросы:

async Declaration(decl, helpers) {
  if (decl.prop === 'icon') {
    const svg = await readFile(`icons/${decl.value}.svg`);
    decl.replaceWith(helpers.decl({ prop: 'background', value: `url(${svg})` }));
  }
}

Тестирование плагинов PostCSS

Тестируйте плагины, напрямую используя пакет postcss:

const postcss = require('postcss');
const plugin = require('./my-plugin');

test('converts px to rem', () => {
  const input = 'p { font-size: 16px; }';
  const result = postcss([plugin()]).process(input, { from: undefined });
  expect(result.css).toBe('p { font-size: 1rem; }');
});

Параметры плагина

Принимайте параметры конфигурации, добавив аргумент в фабрику плагина:

const plugin = (opts = {}) => ({
  postcssPlugin: 'configurable',
  Declaration(decl) {
    if (decl.prop === opts.property) {
      decl.value = opts.replacement;
    }
  }
});

Публикация плагинов PostCSS

Плагины PostCSS следуют соглашению об именовании: postcss-plugin-name. Их публикуют в npm и добавляют в репозиторий PostCSS. Для внутренних инструментов храните их как локальные файлы в проекте.

Быстрая проверка

Какой обходчик PostCSS вызывается для каждой пары «свойство: значение» в таблице стилей?

Итоги

Пользовательские плагины PostCSS используют методы-обходчики для обработки узлов AST CSS. Declaration(decl) — для пар «свойство: значение», Rule(rule) — для блоков селекторов, AtRule() — для правил @-формата. Используйте методы узлов, такие как remove(), replaceWith() и cloneAfter(), чтобы изменять дерево CSS. Тестируйте плагины напрямую с помощью пакета postcss.

Часто задаваемые вопросы

Урок «Пользовательские плагины PostCSS» бесплатный?

Да — полный текст урока «Пользовательские плагины PostCSS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Пользовательские плагины PostCSS»?

Пишите собственный плагин PostCSS для программного преобразования узлов CSS. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Пользовательские плагины PostCSS»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Что делает PostCSS и как он работает
  2. Autoprefixer и cssnano
  3. Пользовательские плагины PostCSS
  4. PostCSS в Vite и Webpack
← Назад к CSS Academy