Кастомные медиавыражения

[Dartess]

Добавлю что использовать сейчас можно не только через postcss плагин, но и через например Lightning CSS

[nikolayshabalin]

Спасибо за дополнение. Сам я пользуюсь Lightning CSS, но почему-то ничто меня не тригернуло о нём написать в статье :) так что ваш комментарий очень в пору

[nin-jin]

И на каком же этапе обрабатываются nested media?

[nikolayshabalin]

Я так сильно в Nesting CSS не вникал, но предполагаю, что в моей кастрированной схеме это третий шаг:

1. Получение CSS-файла

2. Парсинг CSS

3. Работа со стилями

   3.1. нестинг разворачивается в обычные селекторы

   @custom-media --table (width => 768px);
   
   .text { 
     font-size: 20px;
     
     @media (--tablet) {
       font-size: 24px;
     }
   }

   развернётся в

   @custom-media --table (width => 768px);
   
   .text { 
     font-size: 20px;
   }
   
   @media (--tablet) {
    .text {
       font-size: 24px;
    }
   }

   3.2. Сбор @custom-media Создаётся таблица алиасов --tablet -> min-width: 768px

4. Этап правил. Сначала раскрываются custom-media: @media(--tablet) -> media(min-width: 768px. Затем @media вычисляются: если min-width: 768px → true, правило активно, если false → правило игнорируется

5. Каскад + наследование

6. Вычисление значений. Вот тут разрешаются var() и кастомные свойства.