NAME

CSS::Scopifier - Prepends CSS selectors to apply scope/context

SYNOPSIS

  use CSS::Scopifier;
  my $CSS = CSS::Scopifier->read('/path/to/base.css');
  $CSS->scopify('.myclass');
  
  # To scopify while also merging 'html' and 'body' into
  # the '.myclass' selector rule:
  $CSS->scopify('.myclass', merge => ['html','body']);
  
  # New, "scopified" version of the CSS with each rule 
  # prepended with '.myclass':
  my $newCss = $CSS->write_string;

DESCRIPTION

CSS::Scopifier extends CSS::Tiny adding the scopify method. The scopify method rewrites and prepends all the rules in the CSS object with the supplied selector string.

For instance, consider a CSS::Scopifier object $CSS representing the following CSS:

  h1, h2 {
    font-family: Georgia, "DejaVu Serif", serif;
    letter-spacing: .1em;
  }
  h1 {font-size: 1.5em;}
  h2 {font-size: 1.4em;}

Then, after calling:

  $CSS->scopify('.myclass');

The CSS would then be:

  .myclass h2 {
    font-family: Georgia, "DejaVu Serif", serif;
    font-size: 1.4em;
    letter-spacing: .1em;
  }
  .myclass h1 {
    font-family: Georgia, "DejaVu Serif", serif;
    font-size: 1.5em;
    letter-spacing: .1em;
  }

Note: CSS::Scopifier only supports single-level CSS; to scopify across nested/grouped rules (i.e. grouped within rules like @media print { ... }) use CSS::Scopifier::Group.

METHODS

Note: CSS::Scopifier extends CSS::Tiny. Please see CSS::Tiny for complete API reference.

scopify

Prepends the selector string supplied in the first argument to each rule in the object.

Also accepts optional hash param merge to rewrite and merge specific selector rules into the top selector, instead of prepending it.

For instance, consider a CSS::Scopifier object $CSS representing the following CSS:

  html {
    height: 100%;
    overflow-y: scroll;
  }
  body {
    height: 100%;
    background: #fff;
    color: #444;
    line-height: 1.4;
  }
  h1, h2 {
    font-family: Georgia, "DejaVu Serif", serif;
    letter-spacing: .1em;
  }
  h1 {font-size: 1.5em;}

Then, after calling:

  $CSS->scopify('#myid', merge => ['html','body']);

The CSS would then be:

  #myid h2 {
    font-family: Georgia, "DejaVu Serif", serif;
    letter-spacing: .1em;
  }
  #myid h1 {
    font-family: Georgia, "DejaVu Serif", serif;
    font-size: 1.5em;
    letter-spacing: .1em;
  }
  #myid {
    background: #fff;
    color: #444;
    height: 100%;
    line-height: 1.4;
    overflow-y: scroll;
  }

AUTHOR

Henry Van Styn <vanstyn@cpan.org>

COPYRIGHT AND LICENSE

This software is copyright (c) 2013 by IntelliTree Solutions llc.

This is free software; you can redistribute it and/or modify it under the same terms as the Perl 5 programming language system itself.