Does anyone know what the most robust regex would be to select all selectors from a css declaration? Below is CSS code for non-standard CSS that would be a good test case.
.somenormalstyledeclaration
{
width:100%;
height:100%;
background-image: url(images/fallback-gradient.png);
}
.somenormalstyle1, .somenormalstyle2
{
width:100%;
height:100%;
background-image: url(images/fallback-gradient.png);
}
.gradient-bg
{
background-color: #1a82f7;
background-image: url(images/fallback-gradient.png);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
@-webkit-keyframes bounce_circle
{
0%
{
opacity:0.3;
}
50%
{
opacity:1;
background-color:#111
}
100%
{
opacity:0.3;
}
}
This should work mostly. It's a few steps, but not as good as a full parser.
{
or }
, you can replace /\{[^\}]\}/
with a ,
,
and ;
characterEvery element of the array should be a selector or an "at-rule" (i.e. @charset utf-8;
).
I have probably missed some other edge cases, but this should work as a quick-and-dirty solution for most cases.
While this doesn't deal with the @-webkit... it does yeild just ID and Class selectors.
I'm sure a regex wizard can be more efficient...
This link helped point the way. Even though it's javascript, I was able to get the gist.
// Snag file
$text = file_get_contents("file.css");
// Strip comments
$text = preg_replace('!/\*.*?\*/!s', '', $text);
// Clear out everything between brackets
$text = preg_replace('/{(.*?)}/si', '', $text);
// Get ID and class selectors
$pattern = '/([#|\.])([_a-z]+[_a-z0-9-]*)/mi';
// Array to store results.
$result = array();
// No "g' modifier in PHP, use preg_match_all for this kind of behaviour.
preg_match_all($pattern, $text, $result);
print "<pre>";
print_r ( $result );
print "</pre>";