Автоматична генерація rtl css за допомогою Grunt

Створення rtl сss — важливий процес, який потрібен для адаптацї дизайну до стандартів rtl. Цей процес передбачає заміну margin-left на margin-right, float: left на float: right… і так далі.

На щастя, за нас цю роботу може зробити Grunt, завдяки пакету grunt-css-flip. Цей пакет створює "віддзеркалений" css файл. З основами Grunt можете познайомитись у цій статті, тому відразу приступимо до суті.

Встановлюємо і налаштовуємо grunt-css-flip:

1. Ставимо і налаштовуємо Grunt.

2. Встановлюємо пакет grunt-css-flip:

npm install grunt-css-flip --save-dev.

3. Створюємо Gruntfile.js.

Для прикладу розглянемо наступний Gruntfile.js файл:

 module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      css: {
        files: '**/*.css',
        tasks: ['cssflip:my_target']
      },
    },
    cssflip: {
      my_target: {
        options: {},
        files: {
          'css/styles-rtl.css': 'css/styles.css',
        }
      }
    },
    concurrent: {
      options: {
        logConcurrentOutput: true
      },
      dev: {
        tasks: ["watch:css"]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-concurrent');
  grunt.loadNpmTasks('grunt-css-flip');
  grunt.registerTask('default',['concurrent:dev']);
}

Частина, яка нас цікавить, — це

  cssflip: {
      my_target: {
        options: {},
        files: {
          'css/styles-rtl.css': 'css/styles.css',
        }
      }
    },

Files — тут задаються файли, які потрібно віддзеркалити, через кому можна вказати декілька файлів. Файли вказуються у форматі: ‘назва файлу rtl’: ‘назва файлу, для якого потрібно створити rtl копію’.

Options — тут можна задати, чи потрібно стискати rtl файл, чи ні (параметер compress, дефолтне значення false), і задати відступ для css (параметер indent, дефолтне значення 2 пробіли).

4. Запускаємо Grunt

Відтепер Grunt слідкуватиме за вказаними css файлами (у нашому прикладі це css/styles.css), і створюватиме відповідні віддзеркалені css файли.

Зауваження і уточнення:

grunt-css-flip можна використовувати разом з compass, де compass генерує css з sass, а grunt відслідковує зміни css файлів, і запускає grunt-css-flip, якщо вони змінилися. Також grunt-css-flip можна використовути разом з іншими пакетами, де, для прикладу grunt буде валідувати sass/less код (пакет grunt-scss-lint), якщо перевірка пройдена генеруватиме css (пакет grunt-sass), додаватиме префікси (пакет grunt-autoprefixer), і генеруватиме rtl css файли (пакет grunt-css-flip).

Деякі зауваження щодо автоматичного віддзеркалення:

1. Наразі відсутня повна підтримка flex, тому наприклад flex-direction не буде віддзеркалюватись.

2. Також потрібно бути уважним з подібним центруванням:

margin-left: 50%;

transform: translate(-50%);

Оскільки margin-left віддзеркалиться у margin-right, але transform не зміниться, відповідно у rtl елемент не буде відцентрований.

Лінки: Репозиторій - https://github.com/twbs/grunt-css-flip

Вдалого вам коду!