Зачем нужны постпроцессоры при живых препроцессорах {#Cover}

Алексей Иванов, JetStyle

Зачем нужны постпроцессоры при живых препроцессорах

Алексей Иванов, компания JetStyle

О чем этот доклад

  1. Почему чистого css мало для счастливой жизни.
  2. Плюсы и минусы препроцессоров.
  3. Что такое постпроцессы и чем они хороши.
  4. Почему постпроцессоры становятся популярны именно сейчас.
  5. Как сделать свой постпроцессор.

Появление CSS

 

 

 

 

 

Появление Ruby-программистов

Ruby-программисты смотрят на css-код

Ruby-программисты создают SASS

  1. Переменные
  2. Вложенные селекторы
  3. Простая математика

К SASS добавляются LESS и Stylus

  1. Переменные
  2. Вложенные селекторы
  3. Простая математика

Возможности препроцессоров начинают бурно развиваться

  1. Переменные 6. Примеси
  2. Вложенные селекторы 7. Функции
  3. Простая математика 8. Циклы for
  4. Массивы 9. Условные операторы if .. else
  5. Наследование селекторов 10. Ссылки на свойства

Наконец-то настал Золотой Век css!
 

  1. Переменные 6. Примеси
  2. Вложенные селекторы 7. Функции
  3. Простая математика 8. Циклы for
  4. Массивы 9. Условные операторы if .. else
  5. Наследование селекторов 10. Ссылки на свойства

Наконец-то настал Золотой Век css!
…или нет?

  1. Переменные 6. Примеси
  2. Вложенные селекторы 7. Функции
  3. Простая математика 8. Циклы for
  4. Массивы 9. Условные операторы if .. else
  5. Наследование селекторов 10. Ссылки на свойства

 

Какие из-за этого возникают проблемы?

  1. Возможности препроцессоров можно применять только через их специальный синтаксис.

Новая надежда! Rework

 

Ну а сейчас-то Золотой Век?

Ну…

Что такое постпроцессор?

Постпроцессор – это библиотека а) принимающая на вход css, б) преобразующая его тем или иным образом и в) сохраняющая на диск снова как css.

Примеры постпроцессоров

Что изменил Rework?

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

Rework – первый,
но не единственный

  1. Rework – самый старый, больше всего плагинов.
  2. PostCSS – лучше поддержка карт кода, сохраняет форматирование, много дополнительных хелперов, более надежный парсер.
  3. CSSComb-core – самый универсальный парсер, поддержка синтаксиса SASS и LESS, нет карт кода.

Пример: grunt-webpcss на PostCSS

    .icon {
        background: url('a.png')
    }

    .icon {
        background: url('a.png')
    }
    .webp .icon {

        background: url('a.webp')
    }
Пример кода из доклада PostCSS: будущее после Sass и LESS

Пример: autoprefixer на PostCSS

    .box {
        flex-shrink: 0;
        flex-basis: 300px;
    }

    .box {
        -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                flex-shrink: 0;
        -webkit-flex-basis: 300px;
            -ms-flex-preferred-size: 300px;
                flex-basis: 300px;
    }
Пример кода из доклада PostCSS: будущее после Sass и LESS

Пример: rtlcss на PostCSS

Изменяет дизайн для арабского и иврита

    a {
        left: 10px;
        text-align: left;
    }

    a {
        right: 10px;
        text-align: right;
    }
Пример кода из доклада PostCSS: будущее после Sass и LESS

Другие способы использования

  1. Создание спрайтов.
  2. Группировка селекторов по медиавыражениям.
  3. Объединение файлов.
  4. Тысячи других.

Как использовать

  1. Отдельные библиотеки с CLI.
  2. grunt и gulp плагины.
  3. Через node.js.

Свой постпроцессор. Проблема

Современные браузеры:

    a::after { }

Для IE 8:

    a:after { }
Пример кода из доклада PostCSS: будущее после Sass и LESS

Свой постпроцессор. PostCSS

    var coloner = postcss(function (css) {

        css.eachRule(function (rule) {

            if ( rule.selector.match(/::/) )

                rule.selector += ', ' +

                    rule.selector.replace('::', ':');

        });
    });
Пример кода из доклада PostCSS: будущее после Sass и LESS

Свой постпроцессор. Результат

    var fixed = coloner.process(css).css;

Вход:

Выход:

    a::after {
        content: "→"
    }

    a::after, a:after {

        content: "→"
    }
Пример кода из доклада PostCSS: будущее после Sass и LESS

Резюме

Вопросы?

Twitter:   @iadramelk
Почта:   stupidlogin@gmail.com
Github:   github.com/iAdramelk

Fork me on Github