Группировать несколько медиазапросов, сформированных как вывод LESS CSS

Question

Я планировал использовать LESS CSS в своем проекте (PHP). Я планирую использовать его вложенный @media функция запроса. Я обнаружил, что он не может сгруппировать несколько медиа-запросов в выходной CSS, который он генерирует.

Например:

// МЕНЬШЕ.header {
  @media all and (минимальная ширина: 240 пикселей) и (максимальная ширина: 319 пикселей) {
    размер шрифта: 12 пикселей;
  }

  @media all and (минимальная ширина: 320 пикселей) и (максимальная ширина: 479 пикселей) {
    размер шрифта: 16 пикселей;
    вес шрифта: полужирный;
  }
}
.body {
  @media all and (минимальная ширина: 240 пикселей) и (максимальная ширина: 319 пикселей) {
    размер шрифта: 10 пикселей;
  }

  @media all and (минимальная ширина: 320 пикселей) и (максимальная ширина: 479 пикселей) {
    размер шрифта: 12 пикселей;
  }
}

// выводим CSS
@media all and (минимальная ширина: 240 пикселей) и (максимальная ширина: 319 пикселей) {.header {
    размер шрифта: 12 пикселей;
  }
}
@media all and (минимальная ширина: 320 пикселей) и (максимальная ширина: 479 пикселей) {.header {
    размер шрифта: 16 пикселей;
    вес шрифта: полужирный;
  }
}
@media all and (минимальная ширина: 240 пикселей) и (максимальная ширина: 319 пикселей) {
  .body {
    размер шрифта: 10 пикселей;
  }
}
@media all and (минимальная ширина: 320 пикселей) и (максимальная ширина: 479 пикселей) {
  .body {
    размер шрифта: 12 пикселей;
  }
}

Мой ожидаемый результат (@media запросы сгруппированы)

@media all and (минимальная ширина: 240 пикселей) и (максимальная ширина: 319 пикселей) {.header {
    размер шрифта: 12 пикселей;
  }
  .body {
    размер шрифта: 10 пикселей;
  }
}
@media all and (минимальная ширина: 320 пикселей) и (максимальная ширина: 479 пикселей) {.header {
    размер шрифта: 16 пикселей;
    вес шрифта: полужирный;
  }
  .body {
    размер шрифта: 12 пикселей;
  }
}

Я хотел бы знать, может ли это быть сделано в LESS (PHP) самостоятельно или есть какой-нибудь простой синтаксический анализатор CSS на основе PHP, который я могу использовать для управления выходным CSS для группировки и объединения запросов @media. как показано на рисунке ниже.

  МЕНЬШИЙ файл
      |
      В
[LESSphp компилятор]
      |
      В
   Файл CSS
      |
      В
Сгенерированный файл CSS
будет проходить мой сценарий
написанный с использованием CSS-парсера
      |
      В
   Файл CSS
с похожими @media
группироваться.

В случае, если выполнение сгруппированных запросов @media в LESS (PHP) не вариант, я хотел бы узнать ваши предложения по синтаксическому анализатору CSS (PHP), которые можно использовать в приведенном выше потоке.

Answer 1

Я адаптирую функцию autoCompileLess для группирования медиазапроса в конце CSS без изменения кода.

@mobile: ~"only screen and (max-width: 529px)";
.test {
    color:green;
    @media @mobile { color:red; }
}    
.test2 {
    color:red;
    @media @mobile { color:blue; }
}

Компилировать с меньшим по умолчанию

.test {
    color:green;
}    
.test2 {
    color:red;
}
@media only screen and (max-width: 529px) {
    .test {
        color:red;
    }
}    
@media only screen and (max-width: 529px) {
    .test2 {
        color:blue;
    }
}

Компилировать меньше с помощью следующей функции

.test {
    color:green;
}    
.test2 {
    color:red;
}
@media only screen and (max-width: 529px) {
    .test {
        color:red;
    }
    .test2 {
        color:blue;
    }
}

И функция:

<?php
function autoCompileLess($inputFile, $outputFile)
{
    // load cache
    $cacheFile = $inputFile.".cache";

    if (file_exists($cacheFile))
    {
        $cache = unserialize(file_get_contents($cacheFile));
        if (empty($cache)) $cache = $inputFile;
    }
    else
    {
        $cache = $inputFile;
    }

    // compile less
    $less = new lessc;
    $newCache = $less->cachedCompile($cache);

    // save less cache
    $saveCache = $newCache;

    // search media query in CSS
    preg_match_all('#@media(.*?)\{(.+?}[ \n])\}#si',$newCache['compiled'],$match,PREG_SET_ORDER);//$MatchingString now hold all strings matching $pattern.


    $media = array();

    // group same media query
    foreach ($match as $val)
    {
        if (!isset($media[$val[1]])) $media[$val[1]] = '';

        $media[$val[1]] .= $val[2];
    }

    // delete media query of cache
    $newCache['compiled'] = preg_replace('#@media(.*?)\{(.+?}[ \n])\}#si', '', $newCache['compiled']);

    // add groups of media query at the end of CSS
    $final = $newCache['compiled'] . "\n";
    foreach ($media as $id => $val)
    {
        $final .= "\n" . '@media' . $id . '{' . $val . '}' . "\n";
    }

    // save less
    // save CSS with groups of media query
    if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) 
    {
        file_put_contents($cacheFile, serialize($saveCache));
        // file_put_contents($outputFile, $newCache['compiled']);
        file_put_contents($outputFile, $final);
    }
}

// use of function
autoCompileLess('style.less', 'style.css');

Answer 2

Почему в ваших медиа-запросах нет ваших селекторов, например, ожидаемого результата? Тогда вы избавитесь от двойных медиазапросов для всего, что вы делаете...