Aseliot
Aseliot

Reputation: 97

PHP CSS from string to array

This must be simple somehow but I can't figure it out and have been at it for the whole day already.

I want to parse a CSS file into an array with keys and values like this:

Array('#idname' => Array('overflow' => hidden, 'color' => '#FFF'));

I ignore all media queries by removing them with a regular expression and also remove all whitespace.

//Remove all media queries
$cssFromLink = preg_replace("/@media.*?}}/i", '', $cssFromLink);
//Remove all whitespace
$cssFromLink = str_replace(' ','', $cssFromLink);

All that I want is to be able to search in a list for an id or classname and then extract a property like background-color.

Libraries like Sabberworm and other CSS parsers don't seem to work for me, they either seem to be taking forever/do nothing or throw a fatal error. I am trying this on the css from apple.com.

All others solutions look equally complex to me but almost none of them seem to work for apple.com specifically and I can't have it crash on popular websites.

Upvotes: 1

Views: 1075

Answers (2)

Aseliot
Aseliot

Reputation: 97

The answer from JapanPro at Parse a CSS file with PHP works the best for me. It still has some errors (a } is in front of some id's) and i'm not sure if using regex is the best way to parse it for every situation but for now I will use this.

<?php

$css = <<<CSS
#selector { display:block; width:100px; }
#selector a { float:left; text-decoration:none }
CSS;

//
function BreakCSS($css)
{

    $results = array();

    preg_match_all('/(.+?)\s?\{\s?(.+?)\s?\}/', $css, $matches);
    foreach($matches[0] AS $i=>$original)
        foreach(explode(';', $matches[2][$i]) AS $attr)
                if (strlen($attr) > 0) // for missing semicolon on last element, which is legal
                {
                        // Explode on the CSS attributes defined
                        list($name, $value) = explode(':', $attr);
                        $results[$matches[1][$i]][trim($name)] = trim($value);
                }
    return $results;
}
var_dump(BreakCSS($css));

Upvotes: 1

Ben
Ben

Reputation: 9001

I just made this, try it out:

<?php

    //To test
    $string = "#id {
        overflow: hidden;
        color: #fff;
    }
    #id2 {
        margin: 0px;
        height: 100%;
    }";

    //Call the function and print it out
    $css_array = cssToArray($string);
    echo "<pre>";
    print_r($css_array);

    //The actual function
    function cssToArray($css){
        //Regex to find tags and their rules
        $re = "/(.+)\{([^\}]*)\}/";
        preg_match_all($re, $css, $matches);

        //Create an array to hold the returned values
        $return = array();
        for($i = 0; $i<count($matches[0]); $i++){
            //Get the ID/class
            $name = trim($matches[1][$i]);

            //Get the rules
            $rules = trim($matches[2][$i]);

            //Format rules into array
            $rules_a = array();
            $rules_x = explode(";", $rules);
            foreach($rules_x as $r){
                if(trim($r)!=""){
                    $s = explode(":", $r);
                    $rules_a[trim($s[0])] = trim($s[1]);
                }
            }

            //Add the name and its values to the array
            $return[$name] = $rules_a;
        }

        //Return the array
        return $return;
    }

Upvotes: 0

Related Questions