I am trying to convert this css to a php array but it seems because there is a multidimensional css it doesn't quite get parsed properly.
I have put the below to a sanbox for viewing http://sandbox.onlinephpfunctions.com/code/e53fd35c73d4f5b0c67d0d3a1e5d2b97f58a86fb
Here is the php function to that uses regex
function parseCSS($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;
}
Sample CSS string
$css = "@-webkit-keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}@keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}#el_Qlda4JMGnZ{fill: #1076bc;}#el_r3BhVadOaj{fill: #fff;}.cls-1{fill:#03143b;}.cls-2{fill:#fff;}";
Here is the current ouput
Array
(
[@-webkit-keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation] => Array
(
[0%{-webkit-transform] => rotate(0deg)
[transform] => rotate(0deg)
)
[100%] => Array
(
[-webkit-transform] => rotate(-360deg)
[transform] => rotate(-360deg)
)
[}@keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation] => Array
(
[0%{-webkit-transform] => rotate(0deg)
[transform] => rotate(0deg)
)
[}#el_Qlda4JMGnZ] => Array
(
[fill] => #1076bc
)
[#el_r3BhVadOaj] => Array
(
[fill] => #fff
)
[.cls-1] => Array
(
[fill] => #03143b
)
[.cls-2] => Array
(
[fill] => #fff
)
)
Here is the expected output
Array
(
[@-webkit-keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation] => Array
(
[0%] => array
(
[-webkit-transform] rotate(0deg)]
[transform] rotate(0deg)]
)
[100%] => Array
(
[-webkit-transform] => rotate(-360deg)
[transform] => rotate(-360deg)
)
)
[@keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation] => Array
(
[0%] => Array
(
[-webkit-transform] => rotate(0deg)
[transform] => rotate(0deg)
)
[100%] => Array
(
[-webkit-transform] => rotate(-360deg)
[transform] => rotate(-360deg)
)
)
[#el_Qlda4JMGnZ] => Array
(
[fill] => #1076bc
)
[#el_r3BhVadOaj] => Array
(
[fill] => #fff
)
[.cls-1] => Array
(
[fill] => #03143b
)
[.cls-2] => Array
(
[fill] => #fff
)
)
My Answer:
To achieve the expected output, you can modify the regex pattern and the way you are storing the values in the PHP array. Here is an updated version of the `parseCSS` function:
php
function parseCSS($css){
$results = array();
preg_match_all('/(.+?)\s?\{\s?(.+?)\s?\}/', $css, $matches);
foreach($matches[0] as $i => $original) {
$selector = $matches[1][$i];
$attributes = explode(';', $matches[2][$i]);
$temp = array();
foreach($attributes as $attr) {
if (strlen($attr) > 0) {
list($name, $value) = explode(':', $attr);
$temp[trim($name)] = trim($value);
}
}
if (strpos($selector, '@') === 0) {
$results[$selector] = $temp;
} else {
$selectorParts = explode(' ', $selector);
$lastSelector = array_pop($selectorParts);
$currentArray = &$results;
foreach($selectorParts as $part) {
if (!isset($currentArray[$part])) {
$currentArray[$part] = array();
}
$currentArray = &$currentArray[$part];
}
$currentArray[$lastSelector] = $temp;
}
}
return $results;
}
$css = "@-webkit-keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}@keyframes el_Qlda4JMGnZ_J0Dx98qCd_Animation{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg;}100%{-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}#el_Qlda4JMGnZ{fill: #1076bc;}#el_r3BhVadOaj{fill: #fff;}.cls-1{fill:#03143b;}.cls-2{fill:#fff;}";
print_r(parseCSS($css));
This updated function will correctly parse the multidimensional CSS and store the values in a PHP array as expected.
Rate this post
3 of 5 based on 1115 votesComments