PHP - Parse, Regex CSS file?

Question

I'm looking for a way to achieve this.

#header { background: red; font-size: 14px; color:white; }

I want to be able to parse/regex this (and more of these in same file) into an array that looks something like this.

Array[0] = header
Array[0][0] = background: red;
Array[0][1] = font-size; 14px;
Array[0][2] = color: white;

And next for example #content would then be

Array[1] = content 
Array[1][0] = width: 1200px;

etc

I've been trying to google for hours now and I'm completely LOST in the jungle of regex and multidimensional arrays.

Anyone has any idea how this can be achieved?

Check out [this answer](http://stackoverflow.com/questions/3618381/parse-a-css-file-with-php) as I believe the answers there suit your issue. — skrilled, May 16 '14 at 18:51
Hey, thanks for the answer. I've looked at that post before, but I can't really make any sense out of it. Regex is for me very very hard to grasp. That's why it would be great if anyone here, could help me with my example and hopefully give a insight on why it works and how it works! I want to learn! :) — user3151165, May 16 '14 at 18:54
You need two regexen for such a task. The linked answer gives a workable regex to split up CSS declaration sections. You'd still have to split the individual definitions out (as simple as `(?=;)` though). If you elaborate on your last attempts, we might help. Otherwise this is too broad of question (for a mostly solved problem). — mario, May 16 '14 at 18:56
@mario Ok, if I re-phrase myself like this. What do I need to read upon to split this string "#header { background: red; font-size: 14px; color:white; }" into variables for my choice. Like first I want to split it into everythng between # til } loop through the hole file find all "classes". Then I would like to get the first word containing #WORD for example etc etc... And like that get it all into an array? — user3151165, May 16 '14 at 19:01

score 0 · Accepted Answer · edited May 23 '17 at 10:25

Having as a base this question (posted by @skrilled in the comments) I made an example of how you can parse a css with regular expression.

We can accomplish this by doing a two steps matching of the String.

1) Firstly we retrieve the class (or id name) and the abstraction of the attributes in a string (I mean, all the attributes in one string). This regex fulfills pretty well the task: ([#\.][a-z0-9]*?\.?.*?)\s?\{([^\{\}]*)\}

2) Had the attributes string, we can now spend a regex to parse it and create a new array. Using this simple regex we can retrieve the second part: ([^\;]*);

In the code this would be something like:

function parseCss($cssString){
    //Parsing the class or id name + the attributes
    $regex = "/([#\.][a-z0-9]*?\.?.*?)\s?\{([^\{\}]*)\}/m";
    preg_match_all($regex, $cssString, $classes, PREG_PATTERN_ORDER);

    if(sizeof($classes[1]) > 0){
        //organize a new proper array "$parsedCss"
        foreach($classes[1] as $index => $value){
            $parsedCss[$index][0] = $value; //class or id name
        }

        foreach($classes[2] as $index => $value){  
            //Parsing the attributes string
            $regex = "/([^\;]*);/m";
            preg_match_all($regex, $value, $returned_attributes, PREG_PATTERN_ORDER);

            if(sizeof($returned_attributes[1]) > 0){
                $parsedCss[$index][1] = $returned_attributes[1]; // array of attributes
            }
        }
    }
    return $parsedCss;
}

Then you can just print:

echo '<pre>';
$css = "#header { background: red; font-size: 14px; color:white; }#header { background: red; font-size: 14px; color:white; }";
print_r(parseCss($css));

And the result would be:

Array
(
    [0] => Array
        (
            [0] => #header
            [1] => Array
                (
                    [0] =>  background: red
                    [1] =>  font-size: 14px
                    [2] =>  color:white
                )

        )

    [1] => Array
        (
            [0] => #header
            [1] => Array
                (
                    [0] =>  background: red
                    [1] =>  font-size: 14px
                    [2] =>  color:white
                )

        )

)

PHP - Parse, Regex CSS file?

1 Answers1