How to import a resource in Eclipse plugin stylesheet?

Question

To create an Eclipse plugin, I need to import/use some resources into a stylesheet. All the necessary files reside into the plugin package and are correctly build with no errors into the final .jar.

I have this folder/files in plugin package:

> my.plugin.package.name
    > META-INF/
        > MANIFEST.MF
    > resources/
        > css/
            > base-stylesheet.css
            > win-stylesheet.css
            > linux-stylesheet.css
            > ...
        > images/
            > mytexture.png
            > ...
    > plugin.xml
    > ...

in win-stylesheet.css I want to import base-stylesheet.css and use mytexture.png, so into the CSS I do:

@import url("base-stylesheet.css");
#elemId {
    background-image: url(../images/mytexture.png);
}

unfortunately, these gives a MalformedURLException, I noticed also that:

• using character " or ' or nothing to delimit the url string give the same error;
• using @import url("/base-stylesheet.css") or @import url("./base-stylesheet.css") works perfecly when running/debugging the plugin into a second Eclipse instance but silently fails with the same error when the plugin jar is installed in Eclipse;
• using @import url("platform:/plugin/my.plugin.id/resources/css/base-stylesheet.css") or @import url("platform://plugin/my.plugin.id/resources/css/base-stylesheet.css") where my.plugin.id is the Bundle-SymbolicName assigned in MANIFEST.MF give the same error both when running/debugging the plugin and when using it after installing the jar.

I suspect that the workspace directory is automatically assigned to platform:/plugin/org.eclipse.platform/.

How can I solve it?

Answer 1

The blog post "Import CSS files in Eclipse Luna M6" from Lars Vogel seems to imply that the import now works, meaning you need at least an Eclipse 4.4 Luna M6.

Not only that 4.4 M6 release comes with a dark theme for the IDE, it also lists:

CSS includes

CSS files for Eclipse can now include other CSS files via the @import url("platform:/plugin/Bundle-Symbolic-Name/path/file.extension"); statement.
This allows easy reuse of existing style sheets.

For instance (Vogel's post):

In your RCP application, create a /css/default.css file with only one instruction:

@import url(“platform:/plugin/org.eclipse.ui.themes/css/e4-dark.css”);

Add org.eclipse.ui.themes to your RCP product and add the applicationCSS property pointing to platform:/plugin/test/css/default.css in your product extension point.

Answer 2

The existing Eclipse stylesheets just use

@import url("base-stylesheet.css");

for css in the same directory.

For resources you specify the location in the applicationCSSResources property in the product extension point properties:

<extension
     id="product"
     point="org.eclipse.core.runtime.products">
  <product
        name="%product.name"
        application="org.eclipse.e4.ui.workbench.swt.E4Application">
      <property
           name="applicationCSSResources"
           value="platform:/plugin/my.plugin.package.name/images/">
      </property>