SmartSprites

Replace line-based CSS processing with a parser-based one

Details

  • Type: Task Task
  • Status: Open Open
  • Priority: Blocker Blocker
  • Resolution: Unresolved
  • Affects Version/s: None
  • Fix Version/s: 0.4.0
  • Component/s: None
  • Labels:
    None

Description

Specification of this task is incomplete

Motivation

Currently, SmartSprites uses a very simple line-based algorithm for parsing CSS. This was enough for the initial versions, but blocks implementation of more advanced and user-friendly features, such as breaking SmartSprites directives into multiple lines, removing original background-* properties.

Implementation

The initial implementation idea is to use some of the available ANTLR CSS grammars and extend it to support SmartSprites directives. Ideally, SmartSprites would parse the whole CSS file and copy the CSS rules that don't have SmartSprites directives unchanged to the output.

Refactorings

Implementing this task is a good opportunity to refactor a few things in the code:

  • Drop passing various data structures as method parameters in favour of a context object that holds all available data structures.
  • Think about refactoring sprite building tests to further reduce duplication and include testing through API calls, command line calls and Ant task calls. Ideally, all the expected results should be kept in one place and just verified three times for different calling mode.

Discussion

One important risk related to parser-based processing is that if the parser does not support some of the syntax used in the CSS file (@import, IE5 hacks), the whole processing may fail (with a parse error).

Issue Links

Activity

Hide
Ibrahim Chaehoi added a comment -

Hi Stazcek,

I've take some time to implement a new css parser.
I've thought about using a real CSS parser like batik svg or cssparser.
I've even try to create a parser from an antlr grammar file, but at the end the serialization of the CSS file, was a little bit complicated to put in place.
So I've used regular expressions to handle it.

So the current parser handle the CSS rule declaration instead of the CSS property.
So we are able to update the CSS rule as a whole and serialize it in the generated CSS files.

I've added support for the shorthand css background declaration (Issue SMARTSPRITES-22),
but i didn't take time to put the generated background position in the generated shorthand background property.

I've also fix the issue SMARTSPRITES-13. I have added a property to override the declared background properties even if they are set after the annotated one.

One drawback of this implementation is that I load all the CSS file to make my regex matching, while we were handling the parsing line by line.

Don't hesitate to tell me if you have any question regarding my implementation.

Happy new year

Cheers,
Ibrahim

Show
Ibrahim Chaehoi added a comment - Hi Stazcek, I've take some time to implement a new css parser. I've thought about using a real CSS parser like batik svg or cssparser. I've even try to create a parser from an antlr grammar file, but at the end the serialization of the CSS file, was a little bit complicated to put in place. So I've used regular expressions to handle it. So the current parser handle the CSS rule declaration instead of the CSS property. So we are able to update the CSS rule as a whole and serialize it in the generated CSS files. I've added support for the shorthand css background declaration (Issue SMARTSPRITES-22), but i didn't take time to put the generated background position in the generated shorthand background property. I've also fix the issue SMARTSPRITES-13. I have added a property to override the declared background properties even if they are set after the annotated one. One drawback of this implementation is that I load all the CSS file to make my regex matching, while we were handling the parsing line by line. Don't hesitate to tell me if you have any question regarding my implementation. Happy new year Cheers, Ibrahim
Hide
Stanisław Osiński added a comment -

Hi Ibrahim,

Happy New Year to you too!

Thanks for your experimenting and code, I really appreciate it! I'll be looking into the patch probably over the weekend. I'll probably set up a 0.4 branch on the SVN and some automatic builds, so that others can grab and play with the binaries if they are brave enough

Intuitively, loading the whole CSS file to the memory should not be too much of a problem, it's unlikely that the CSS is larger than a few MB (which still isn't that much for regexps).

Thanks once again, as soon as I've looked at the code, I'll add more comments here.

Thanks!

S.

Show
Stanisław Osiński added a comment - Hi Ibrahim, Happy New Year to you too! Thanks for your experimenting and code, I really appreciate it! I'll be looking into the patch probably over the weekend. I'll probably set up a 0.4 branch on the SVN and some automatic builds, so that others can grab and play with the binaries if they are brave enough Intuitively, loading the whole CSS file to the memory should not be too much of a problem, it's unlikely that the CSS is larger than a few MB (which still isn't that much for regexps). Thanks once again, as soon as I've looked at the code, I'll add more comments here. Thanks! S.

People

Vote (0)
Watch (2)

Dates

  • Created:
    Updated: