nzakas / cssembed Goto Github PK

Some browsers allow you to specify downloadable fonts in CSS. It would be good to have the option to embed these, too.

Currently if you have a relative file that CSSEmbed can't find it will throw an IOException & stop executing. I'd argue that this behavior isn't great, and either should be changed across-the-board or at least via a commandline flag.

IMO if a file can't be found, leave it alone & continue along your merry way, outputting an error to the console.

Hi Nicholas!
I have a couple of requests related to cssembed library: http://github.com/nzakas/cssembed

1. Could you expose the following method in DataURIGenerator:
   public static void generate(final InputStream is, final Writer out, final String mimeType)
2. Could you add your library to maven public repo & also use maven as a building tool (it is one of the requirements). This is the link describing how this can be done: http://nexus.sonatype.org/oss-repository-hosting.html

I want to add your library as a dependency to my open source project (http://code.google.com/p/wro4j/). Until it is not availble publicly, I add the cssembed sources into the core of wro4j project. I would preffer having external dependency instead of copying the sources manually and tweak them.

Please, let me know what you think.
Thank you very much!

Regards,
Alex Objelean

java -jar cssembed-0.1.2.jar screen.css -o screen.emb.css outputs the file untouched. The stylesheet uses relative paths (../images/someimage.png), I’m on an Ubuntu 8.10.

Please ignore existing data uris.
Thank you!

The CSSEmbed command line utility should be able to accept input from stdin as well as files.

When running "java -jar cssembed -h" it says "-root " when it should say "--root ".

CSSEmbed assumes that there will be one url() and one SKIP directive per line in the source file. When a CSS file is compressed onto all-in-one line, the single SKIP directive will cause CSSEmbed to skip every url in the file.

In the following example, all url's will be skipped

.class1{background:url(image1.png);/*!CSSEmbed:SKIP*/}.class2{background:url(image2.png);}.class3{background:url(image3.png);}

Note that the CSS comments would need to be preserved by the compression tool.

The same applies to compact writing form, both urls will be skipped in this example

.class1 { background:url(image1.png) /*!CSSEmbed:SKIP*/; margin: 0px; cursor: url(cursor1.png) 4 12, auto; }

CSSEmbed should delay creating the new file until after it has successfully completed, as currently if there is an error while parsing the file it will create an empty file.

Cleaning up the file after an error is thrown won't quite work either, as I'm naming the output file the same as the input. That behavior would leave me with no file at all, when IMO it should leave the original file unharmed.

Some browsers support custom cursors in CSS. It would be good to allow embedding of these files as well.

Hi Nicholas.

I've just added experimental support for the MHTML support for cssembed.

It's still very raw (it was my first java work and my editor even doesn't have syntax highlighting for Java), but it's already producing correct results.

Since code is junkie, I hope it at least will expose general idea, so we can make this tool even better.
Here is the link to the diff for changes I made:
http://pastebin.ca/1677046

Hope you will find it useful.
Regards,
Dmitry

Isn't checking for ', " and optionally for \ more consistent this way:

                while (pos > -1){
                    pos += 4;
                    builder.append(line.substring(start, pos));
                    npos = line.indexOf(")", pos);
                    //eliminate all quotes and backslashes in url (there shouldn't be any)
                    String url = line.substring(pos, npos).trim().replaceAll("[\'\"\\\\]", "");

                    //check for duplicates
                    if (foundMedia.containsKey(url)){
                        if (verbose){
                            System.err.println("[WARNING] Duplicate URL '" + url + "' found at line " + lineNum + ", previously declared at line " + foundMedia.get(url) + ".");
                        }                        
                    }

Also there is v2.3.7 of Base64 library already.

When background images are referenced with an absolute path i.e. background:url(/images/....) the applications appends this path to the path of the CSS file. If both are on the same level - /images and /styles the applications throws an error with ..../styles/images/.... file not found, actually it should be either .../images/... or ../styles/../images/...

Hi Nicholas.
Vista/IE7 bug can fixed with according to rfc2557 section 7. You can see example http://shihua.googlecode.com/svn/trunck/labs/2010/cssembed/index.html

Here is the patch I made:
http://shihua.googlecode.com/svn/trunck/labs/2010/cssembed/cssembed.patch

Hope the patch made this tools useful.

Best regards.

Shihua

SVG content will currently not embedded but could be. Please support this.

In my tests with IE7 on Win XP, a newline is needed between a base64 value and the following next multipart separator. The simplest fix seems to be to change Line 235 in CSSURLEmbedder to (234-235 shown):

                        //create MHTML header entry
                        mhtmlHeader.append("\n--");

(N.B. I haven't tested this code change, my local "fix" just rewrites the output to basically the same effect.)

It would be useful to include a file size limit, such that a data URI is not generated if a referenced file in the CSS is larger than a given size.

Probably also a good idea to add a warning in verbose mode when a data URI is longer than 32 KB because IE8 will ignore it.

An option like "--modify", to indicate that the input file should be modified directly (inspired by "tidy") would be useful.

It is of course possible to do this by having cssembed write to a temporary file and then replacing the input file by the temporary file, but this is a bit clumsy and error-prone.

Thanks for a great utility!
Morten

As of the Jun 11 (earlier?) MHTML security update KB2544893 (also called KB2503658 AIUI), the MHTML content MUST be delivered with the MIME type "message/rfc822", otherwise it will be ignored (including in IE6/7 on XP). Prior to IE9, this MIME type doesn't prevent IE from parsing the stylesheet as CSS, so is fine to use for IE8 and under (but not IE9+ and other browsers).

More discussion here:
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/#comment-74091
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/#comment-78585

Cheers, BJ

It would be nice to calculate statistics on the created file. For example, it would be nice to add up the size of the original images plus the original style sheet (gzipped) and compare it against the produced style sheet (gzipped) to see if you're getting a significant savings.

An option to place all of the converted images in a separate stylesheet would be very useful. http://duris.ru/ does this, by default I believe. Isolating the data URIs helps keep the original CSS clean and maintainable, allows images to be cached separately from styles, and makes it easier to set up workarounds for IE6/7.

The application stops execution with:

[ERROR] filename.png 
java.io.FileNotFoundException: filename.png
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
...
    at net.nczonline.web.datauri.DataURIGenerator.generateDataURI(DataURIGen
erator.java:182)
...

Is it how it supposed to work without --skip-missing parameter? Also what do you think about changing behavior to skipping missing files by default and --break-on-error parameter which configures application to stop and display failing CSS-code in console on error?

To avoid double (triple/n-ple) inclusion of the same image into the CSS, for example:
#button1 {
background: url(all-buttons-sprite.png) no-repeat 0 0;
background-position: 0 0;
}

#button2 {
    background: url(all-buttons-sprite.png) no-repeat 0 0;
    background-position: 0 -22px;
}

I made a simple patch which producing nice warnings when cssembed are running in verbose mode:
[WARNING] Duplicate URL 'all-buttons-sprite.png' found at line 12, previously declared at line 7.

http://pastebin.ca/1682172

it would be great if cssembed has an option to ignore commented rules and/or properties. or even ignore it completely without extra configurations.

i know i should probably remove unused properties on a production environment. but i just think this might be a convenient for some people if this option were available.

thx.

If you specify the same input and output file the result is an empty file. What one would expect is that the output would overwrite the file not empty it.

Some background images have query parameters in them, like this -

background-image : url('/path/to/image.png?width=64&height=64')

In such cases, the method getImageURIString(..) computes the file extension as png?width=64&height=64, and goes on to assume the URL is NOT an image.