css-syn.php

css-syn.php

<?php

$css_file = $_REQUEST['css_file'];

if (!$css_file) {
    die("<h1>NO CSS FILE NAME GIVEN!</h1>");
}

require 'css-syn.inc.php';


?>

css-syn.inc.php

<?php

$content = implode('',file($css_file));


function comments ($matches) {
    # Links
    $patterns[] = '!(http://[/\w-.]+)!s';
    $replaces[] = '<a href="\\1">\\1</a>';

    $comments = preg_replace($patterns, $replaces, $matches[0]);

    return '<span class="comment">'. $comments .'</span>';
}
function attributes ($matches) {
    # Attributes
    $patterns[] = '!([-\w]+\s*):!s';
    $replaces[] = '<span class="attr">\\1</span>:';
    # Values
    $patterns[] = '!:(\s*)(.+?)(\s*;)!s';
    $replaces[] = ':\\1<span class="value">\\2</span><span class="eol">\\3</span>';
    # URLs
    $patterns[] = '!(url\([\'"]?)(.*?)([\'"]?\))!s';
    $replaces[] = '<span class="url">\\1<span class="file">\\2</span>\\3</span>';
    # Colors
    $patterns[] = '!(#[[:xdigit:]]{3,6})!s';
    $replaces[] = '<span class="color">\\1</span>';
    # Parenthes
    $patterns[] = '!({|})!s';
    $replaces[] = '<span class="parenthes">\\1</span>';
    # Unity
    $patterns[] = '!(em|px|%)\b!s';
    $replaces[] = '<em>\\1</em>';

    return preg_replace($patterns, $replaces, $matches[0]);
}
function handles ($matches) {
    # HTML Tags (@ first!)
    $patterns[] = '!\b(body|h\d|a|span|div|acronym|small|strong|em|pre
            |ul|ol|li|p)\b!xs';
    $replaces[] = '<span class="htag">\\1</span>\\2';
    # IDs
    $patterns[] = '!(#[-\w]+)!s';
    $replaces[] = '<span class="id">\\1</span>';
    # Class
    $patterns[] = '!(\.[-\w]+)\b!s';
    $replaces[] = '<span class="class">\\1</span>';
    # METAs
    $patterns[] = '!(:link|:visited|:hover|:active|:first-letter)!s';
    $replaces[] = '<span class="metac">\\1</span>';

    return preg_replace($patterns, $replaces, $matches[0]);
}

//$content = preg_replace($patterns, $replaces, $content);
$content = preg_replace_callback('!(}|\*/).*?({|/\*)!s',   'handles',    $content);
$content = preg_replace_callback('!{[^}]*}!s',   'attributes', $content);
$content = preg_replace_callback('!/\*.*?\*/!s', 'comments',   $content);

echo '<?xml version="1.0" encoding="iso-8859-1"?>'."\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
  <title><?php echo 'CSS '. basename($css_file, '.css'); ?></title>
  <style type="text/css">

body       {    background: #BBB; }
pre        {    background: #DDD; padding: 0.8em; }
em         {    font-style: italic; }
.parenthes {    color: #2A6; font-weight: bold; }
.comment   {    color: #AAC; }
.htag      {    color: #569; background: #D5D6DA; font-weight: bold; }
.metac     {    color: #0FF; background: #D5D6DA; }
.id        {    color: #E82; background: #E4E4E0; }
.attr      {    color: #6AF; }
.value     {    color: #D46; }
.color     {    color: #F57; }
.eol       {    color: #26E; }
.url       {    color: #962; }
.file      {    color: #444; background: #FE4; }
.class     {    font-style: italic; }

  </style>
</head>
<body>
<pre>
<?php echo trim($content); ?>
</pre>

<div id="conformance">
<a href="http://validator.w3.org/check/referer"
    title="XHTML valide !">xhtml</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"
    title="CSS valide !">css</a>
</div>

</body>
</html>