cephei - a tiny css pre-processor, written in php

cephei.php

<?php

function cephei($selector, $properties) {
  $output = sprintf("%s {\n", $selector);
  $children = [];
  foreach ($properties as $property => $value) {
    if (is_array($value)) {
      $children[$property] = $value;
    } else {
      $output .= sprintf("  %s: %s;\n", $property, $value);
    }
  }
  $output .= "}\n";
  foreach ($children as $_selector => $_properties) {
    $output .= cephei(implode(",\n", array_map(function ($subselector) use ($selector) {
      if (strpos($subselector, '&') !== false) {
        return implode(",\n", array_map(function ($_ps) use ($subselector) {
          return str_replace('&', trim($_ps), trim($subselector));
        }, explode(',', $selector)));
      } else {
        return implode(' ', array_map('trim', [$selector, $subselector]));
      }
    }, explode(',', $_selector))), $_properties);
  }
  return $output;
}

usage.md

usage

cephei is a bit different than other css pre-processors. it doesn't parse an independent file. instead, it is just a function call in php. kind of like this:

$myBrandBlack = '#333';
$myBrandGrey = '#767676';

echo cephei('.my-modal', [
  'background-color' => $myBrandBlack,
  '.modal-header' => [
    'font-weight' => 'bold',
    'h1, h2, h3, h4, h5, h6' => [
      'font-size' => '2.5em',
      'font-color' => $myBrandGrey,
      '&.tiny, &.lol-so-tiny' => [
        'font-size' => '0.8em',
        '&.error, &.warning' => [
          'opacity' => '0.8'
        ]
      ]
    ]
  ]
]);

that outputs this:

.my-modal {
  background-color: #333;
}
.my-modal .modal-header {
  font-weight: bold;
}
.my-modal .modal-header h1,
.my-modal .modal-header h2,
.my-modal .modal-header h3,
.my-modal .modal-header h4,
.my-modal .modal-header h5,
.my-modal .modal-header h6 {
  font-size: 2.5em;
  font-color: #767676;
}
.my-modal .modal-header h1.tiny,
.my-modal .modal-header h2.tiny,
.my-modal .modal-header h3.tiny,
.my-modal .modal-header h4.tiny,
.my-modal .modal-header h5.tiny,
.my-modal .modal-header h6.tiny,
.my-modal .modal-header h1.lol-so-tiny,
.my-modal .modal-header h2.lol-so-tiny,
.my-modal .modal-header h3.lol-so-tiny,
.my-modal .modal-header h4.lol-so-tiny,
.my-modal .modal-header h5.lol-so-tiny,
.my-modal .modal-header h6.lol-so-tiny {
  font-size: 0.8em;
}
.my-modal .modal-header h1.tiny.error,
.my-modal .modal-header h2.tiny.error,
.my-modal .modal-header h3.tiny.error,
.my-modal .modal-header h4.tiny.error,
.my-modal .modal-header h5.tiny.error,
.my-modal .modal-header h6.tiny.error,
.my-modal .modal-header h1.lol-so-tiny.error,
.my-modal .modal-header h2.lol-so-tiny.error,
.my-modal .modal-header h3.lol-so-tiny.error,
.my-modal .modal-header h4.lol-so-tiny.error,
.my-modal .modal-header h5.lol-so-tiny.error,
.my-modal .modal-header h6.lol-so-tiny.error,
.my-modal .modal-header h1.tiny.warning,
.my-modal .modal-header h2.tiny.warning,
.my-modal .modal-header h3.tiny.warning,
.my-modal .modal-header h4.tiny.warning,
.my-modal .modal-header h5.tiny.warning,
.my-modal .modal-header h6.tiny.warning,
.my-modal .modal-header h1.lol-so-tiny.warning,
.my-modal .modal-header h2.lol-so-tiny.warning,
.my-modal .modal-header h3.lol-so-tiny.warning,
.my-modal .modal-header h4.lol-so-tiny.warning,
.my-modal .modal-header h5.lol-so-tiny.warning,
.my-modal .modal-header h6.lol-so-tiny.warning {
  opacity: 0.8;
}

and because it is just php you can use variables and functions. pretty simple, right?