| Title |
Test
Find
Pattern Title
|
| Expression |
((\s*([^,{]+)\s*,?\s*)*?){((\s*([^:]+)\s*:\s*([^;]+?)\s*;\s*)*?)} |
| Description |
will break out a valid CSS stylesheet into it's components. Groups on each style, all selectors, each selector within a comma delimited list of selectors, all properties, each property set, each property and each value. In other words, it breaks it all down for you :)
The only two problems I'm having with it:
A) it is ignorant of comment blocks. so if you have styles within a /* */ block, it'll pick those up.
B) the first style following a comment block is not parsed correctly (it incorrectly includes the comment as a selector
best thing to do would be to use another regexp to remove all comments before processing with this one |
| Matches |
div#main { position:relative; width:809px; margin-left:auto; margin-right:auto; padding:0; } |
| Non-Matches |
----- |
| Author |
Rating:
Nick Franceschina
|
| Source |
|
| Your Rating |
|
Title: Very good - still offer challenges
Name: Volodymyr Telnov
Date: 5/13/2014 3:18:44 PM
Comment:
I had such a task at hand - allow users to upload a css file and while processing the uploaded file add a class selector '.added-class ' to every rule in css file. For example, when input file looks like this:
@media screen and (max-width: 200px){
h1, h2, h3:hover {
color: #006;
padding: 10px 20px;
}
}
h4 {
color: #660;
padding: 10px 20px;
border-bottom: none;
margin-bottom: 20px;
}
the output would be:
@media screen and (max-width: 200px){
.added-class h1,
.added-class h2,
.added-class h3:hover {
color: #006;
padding: 10px 20px;
border-bottom: 1px solid #09F;
margin-bottom: 20px;
}
}
.added-class h4 {
color: #660;
padding: 10px 20px;
border-bottom: none;
margin-bottom: 20px;
}
So the provided algorithm doesn't take comments into account. But they are of no importance to me in the output and can easily be removed with another regular expression (e.g. PHP syntax with its PCRE patterns):
'#\s*/\*[\d\D]*?\*/\s*#s'
But I had problem with this @media rule. So I used positive and negative assertion patterns to figure out surrounding elements.
positive assertion: (?=[^}]*?{.*})
allows any characters except for } before an obligatory block of {css key:value pairs}. This ensures that css key:value pairs are not captured.
negative assertion: (?![^{]*{[^}]*{)
prevents two consecutive opening curvy brackets {...{, as in the following string
@media screen and (max-width: 700px){ h1, h2, h3:hover { color:
Thus this string is excluded and not be prepended with an '.added-class' string.
The resulting pattern is:
'/\s*([^,{};]+\s*[,]?)(?=[^}]*?{.*})(?![^{]*{[^}]*{)/si'
Title: awesome! You rock
Name: Jake
Date: 5/4/2008 8:44:13 AM
Comment:
awesome! You rock
Title: Great
Name: Shankar
Date: 11/8/2006 5:36:41 AM
Comment:
this is just great!!!
Title: Greeeat!
Name: Kevin
Date: 9/2/2006 12:22:24 PM
Comment:
This was a great find. Well done. Did you solve the comments issue? Cheers!
Title: Works perfectly-- I LOVE it!
Name: Steve, San Jose California
Date: 11/19/2005 1:01:20 AM
Comment:
This worked perfectly! It saved me soooooo much time and frustration-- bravo!
