Beefy Boxes and Bandwidth Generously Provided by pair Networks chromatic writing perl on a camel
Do you know where your variables are?
 
PerlMonks  

Simplifying CSS

by BigLug (Chaplain)
on Oct 29, 2002 at 10:01 UTC ( #208695=snippet: print w/ replies, xml ) Need Help??

Description: Melbourne PMer Scott Penrose asked on the Melbourne-PM mailing list about merging and simplifying CSS. If you view the source of the page you're currently looking at you'll see the default Perl Monk CSS at the top, then if you've set your own, yours is underneath it.

Scott wanted a way to merge multiple sheets to provide a single simplified CSS. Thinking about this I've cobbled together the following solution. Its not elegant and it doesn't run fast. But it was fast to write and it does the job. Well I assume it does. Scott, if you're reading this let me know :)

Basically this script will take input from one or more CSS files:
File 1
P { align: left; font-family: sans; font-size: 12pt; }
File 2
TD { text-align: left; font-family: sans; font-size: 12pt; } P { text-align: left; width: 80%; }
It will then return a simplified 'cascading' (inherited) style sheet:
P, TD { text-align: left; font-family: sans; font-size: 12pt; } P { width: 80%; }
#!/usr/bin/perl 
use CSS;
use Strict;

#---------------------------------------------------------------------
+-----------
# USAGE:
#   simplify(list_of_files);
# NOTE:
#   list_of_files should be in _increasing_ importance. Styles from th
+e last
#   file will overwrite any duplicate styles of all previous files.
# RETURNS:
#   Simplified formatted CSS
#---------------------------------------------------------------------
+-----------
# NOTE CAREFULLY:
#   CSS.pm is very strict in its parsing. Make sure your style sheets 
+use a 
#   semi-colon after every parameter, even at the end of a block:
#   body {
#      font-family: 'times';
#      font-size: '12pt';  <--- this semicolon MUST exist
#   }                           even though its at the end of the bloc
+k
#                               This ain't perl buster!
#---------------------------------------------------------------------
+-----------
# Author's jottings: This is probably not the most 'golf' way to do th
+is, but
# its a working solution.
#---------------------------------------------------------------------
+-----------

print simplify('pmdefault.css','pmuser.css');


#---------------------------------------------------------------------
+-----------
# The routine
#---------------------------------------------------------------------
+-----------

sub simplify {
    my ($output, %usedby, %css);
    my @files = @_;
    die("You have to tell me at least one css file to simplify.") unle
+ss @files;
    my $stylesheet = CSS->new(-source=>$files[0]);
    shift @files;
    foreach my $file (@files) {
        $stylesheet->add_file($file);
    }
    
    my @styles = $stylesheet->styles;

    foreach my $style (@styles) {
        my %props = $style->properties;
        foreach my $property (keys %props) {
            $props{$property} = "'$props{$property}'" if $props{$prope
+rty}=~/\D/;
            push (@{$usedby{sprintf("%19s : %s",$property,$props{$prop
+erty})}}, $style->selector);
        }
    }

    foreach my $style (sort keys %usedby) {
        my $stylename = join(', ',sort @{$usedby{$style}});
        push(@{$css{$stylename}},$style);
    }


    foreach my $style (sort keys %css) {
        $output .= "$style {\n";
        $output .= join(";\n",@{$css{$style}});
        $output .= ";\n}\n\n";
    }
    return $output;
}

Comment on Simplifying CSS
Download Code
Re: Simplifying CSS
by jryan (Vicar) on Oct 30, 2002 at 01:03 UTC
    Shouldn't the simplified sheet be:
    P, TD { text-align: left; } TD { font-family: sans; font-size: 12pt; } P { width: 80%; }

    Also, how does the script handle:

    Sheet 1:

    P { text-align: left; }

    Sheet2

    P { text-align: center; }
      Firstly, no. Sheet 1 defines P as having 'font-family: sans' and 'font-size: 12pt', then sheet two defines TD as having the same. In your example, only TD gets these attributes.

      Secondly, the script's comments tell you (as does the C for Cascading) that any later definition overrides the earlier ones. Something PerlMonk's code takes advantage of. Thus in your example, the script would return 'text-align: center'.

Back to Snippets Section

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: snippet [id://208695]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others lurking in the Monastery: (5)
As of 2014-04-20 01:54 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    April first is:







    Results (485 votes), past polls