DEV Community

Sayuj Sehgal
Sayuj Sehgal

Posted on

Is it possible to unload dynamic imported module?

I am designing a dark-theme mode for my react app, I got two CSS files,

  1. antd.css (light theme)
  2. antd.dark.css (dark theme)

I wanted to import these CSS files dynamically, to be more specific I want to import these files based on a particular condition.

Alt Text

In the above code, "userTheme" is a react state, whose default value is 'false' [type: boolean], I have created a switch button which set the value of "userTheme" state.

Below is the screenshot of my react app. [userTheme: false] // showing light theme

Alt Text

Below is the screenshot of my react app when I switched it to dark mode. [userTheme: true] // showing dark theme

Alt Text

Below is the screenshot of my react-app when I switched back to light-theme.
[userTheme: false] // but showing still dark theme

Alt Text

The problem is, it is still in the dark mode (i guess that is because antd.dark.css file is still loaded), I checked my "userTheme" state value it is set to 'false' in react state.

Is there any way to unload stylesheet dynamically in this case? Maybe that will solve this problem. Can anyone please tell me how can I fix this?

Top comments (9)

Collapse
 
gabrielecimato profile image
Gabriele Cimato

Someone who's done this before might give you more insight but I don't think you should be unloading css files! You should go a different route and have components in your app be aware that they should switch to a dark theme and have them use a different css class.

Your dark theme css file should have these additional classes NOT conflicting with the original css file.

Example:

Original:
.nav-bar

Dark theme:
.nav-bar-dark

And you can leverage context to have components know they should switch to the dark theme class. Your CSS files should NOT conflict otherwise the latest one will take precedence (the C in CSS is for Cascading). I'm not sure I explained this properly but feel free to ask questions!

Collapse
 
sayuj profile image
Sayuj Sehgal • Edited

Ok, I am getting your point, but what if my dark theme file also contains the same class name as the original.

Example
Original:
.nav-bar

Dark theme:
.nav-bar

Then, how can I resolve this?

Collapse
 
gabrielecimato profile image
Gabriele Cimato • Edited

That's the point of my reply, you shouldn't do that.

You should toggle between CSS classes not alter the content of it. Also you can't really unload a CSS file anyway. Let me know if this was helpful!

Thread Thread
 
sayuj profile image
Sayuj Sehgal

Ok, that is helpful, but Can you please suggest a way to toggle between two CSS stylesheets dynamically in react js?

Example:

if(theme == 'light'){
import('light.css')
}else{
import('dark.css')
}

Thread Thread
 
gabrielecimato profile image
Gabriele Cimato • Edited

That's fine but if classes collide then the last stylesheet loaded will win so you won't be able to toggle back.

Which is the problem you're having right now.

Thread Thread
 
sayuj profile image
Sayuj Sehgal

Yeah, you got itπŸ˜‚, today I was thinking about this problem and got one solution in my head, if I use link stylesheet tag and then dynamically change the href link then I can overcome this problem!

Collapse
 
elis profile image
Eli Sklar

Yea, I wanna know as well - I do get what @Gabriele Cimato is saying, but there's also should be some kid of logic that tells webpack "hey this module is no longer the valid module I want to load" - for whatever reason.

I do wonder how they'd go about implementing it though.

Collapse
 
elis profile image
Eli Sklar

Just to remind us that this is a valid request - the browser does know how to handle unloaded CSS - so the example provided by OP is exactly what the browser already knows how to do, while webpack doesn't.

Collapse
 
factoidforrest profile image
Forrest

So, this IS actually possible now thanks to the new JS feature "cssStyleSheets"
developer.mozilla.org/en-US/docs/W...
Only problem is that it doesnt seem to be supported by create-react-app, although it is supported by webpacks css-loader. I created an issue to discuss it here
github.com/facebook/create-react-a...