Using BASH - Find CSS block or definition and print to screen

Question

I have a number of .css files spread across some directories. I need to find those .css files, read them and if they contain a particular class definition, print it to the screen.

For example, im looking for ".ExampleClass" and it exists in /includes/css/MyStyle.css, i would want the shell command to print

.ExampleClass {
color: #ff0000;
}

Answer 1

find /starting/directory -type f -name '*.css' | xargs -ti grep '\.ExampleClass' {}

will find all the css files, print the filename and search string and then print the results of the grep. You could pipe the output through sed to remove any unnecessary text.

ETA: the regex needs work if we want to catch multiline expressions. Likely the EOL character should be set to } so that complete classes are considered one line. If this were done, then piping the find to perl -e rather than grep would be more effective

Answer 2

Considering that the css file can have multiline class definitions, and that there can be several ocurrences in the same file, I'd bet perl is the way to go.

For example:

#input: css filename , and css class name without dot (in the example, ExampleClass)
my ($filen,$classn) = @ARGV;  
my $out = findclassuse($filen,$classn);
# print filename and result if non empty
print ("===== $filen : ==== \n" . $out . "\n") if ($out); 

sub findclassuse {
    my ($filename,$classname) = @_;
    my $output = "";
    open(my $fh, '<', $filename) or die $!;
    $/ = undef; # so that i read the full file content
    my $css  = <$fh>;
    $css =~ s#/\*.*?\*/# #g; # strip out comments
    close $fh;
    while($css =~ /([^}{]*\.$classname\b.*?{.*?})/gs) {
        $output .= "\n\n"  . $1;
    }
    return $output;
}

But this is not 100% foolproof, there remains some issues with comments, and the css parsing is surely not perfect.

Answer 3

Use find to filter on all css files and execute a sed script on those files printing lines, between two regular expressions:

find ${DIR} -type f -name "*.css" -exec sed -n '/\.ExampleClass.{/,/}/p' \{\} \+

Answer 4

Assuming you never do anything weird, like putting the opening brace on a separate line, or putting an unindented (nested) closing brace before the intended one, you can do this:

sed -n '/\.ExampleClass *{/,/^}/p' *.css

And if the files are all over a directory structure:

find . -name *.css | xargs sed ...

Answer 5

This version handles multi-line blocks as well as blocks on a single line:

sed -n '/^[[:space:]]*\.ExampleClass[[:space:]]*{/{p;q}; /^[[:space:]]*\.ExampleClass[[:space:]]*{/,/}/p'

Examples:

foo { bar }

or

foo {
        bar
}