How to remove the injected CSS Resource in GWT?

Question

I want to remove the injected CSSResource in GWT application.

I used the following code MyClass.INSTANCE.ensureInjected();

I want the above CSSResource for a particular page only. So the remaining pages should be work as per the actual css/theme.

Once I inject this then its applicable for the whole application. How can I overcome this?

Answer 1

You can inject your css bundle using directly StyleInjector utility class, instead of the ensureInjected() method

Then you will have a reference of the injected element which you can remove when you want.

// Equivalent to MyClass.INSTANCE.ensureInjected()
StyleElement e  = StyleInjector.injectStylesheet(MyClass.INSTANCE.css().getText());


// Remove the injected css element
e.removeFromParent();

Answer 2

If you have embedded the same GWT application in more than 1 page and you want a different behavior based on the given page, you can for example call the

MyClass.INSTANCE.ensureInjected();

if a bootstrap parameter is set. In the host page, set the parameter, like YourGwtApp.nocahe.js?css=inject and read it as it's explained here In the onLoadMethod, call the ensureInjected accordingly to your bootstrap parameter.

Answer 3

Theoretically you could try to remove the injected style block from the DOM, but this would be quite difficult (and maybe not very reliable).

Much better to organize your 'special' CSS style sheet in a different way:

Turn selectors like

.some {
  color: green;
}

.other {
  color: red;
}

into

.special .some {
  color: green;
}

.special .other {
  color: red;
}

and then add/remove the 'special' class e.g. to/from your body element to activate/deactivate the special styles.