0

I have a huge react app which has 4 main huge CSSs(darkLTR, lightLTR, darkRTL, lightRTL) which is not ideal i know, but it was a website template that my boss bought for me and asked me to use it(i wanted to use Material ui which is awesome for theme handling but sadly i wasn't allowed). It came with two different templates. Dark mode and light mode. They told me that they want to have both dark and light mode and even RTL support. So i had to translate ltr into rtl and add toggle buttons to switch between different themes and languages. I did all that and now i have 4 CSS files for all the styles. They all have same class names and rules. The only different is directions and colors. I import these CSS files like below:

export default function importStylesheets() {
    const theme = localStorage.getItem('theme')
    const direction = localStorage.getItem('direction')
    if (theme === 'dark' && direction === 'rtl') {
        import('./css/styleDarkrtl.css')
    } else if (theme === 'dark' && direction === 'ltr') {
        import('./css/styleDarkltr.css')
    } else if (theme === 'light' && direction === 'rtl') {
        import('./css/styleLightrtl.css')
    } else if (theme === 'light' && direction === 'ltr') {
        import('./css/styleLightltr.css')
    }
}

Now my problem begins. Imagine we are in darkltr mode and darkltr CSS is loaded already. Now user switches the theme toggle button. So importStylesheets() function will be called again and this time the value of theme will be light. So this time lightltr will get imported and the whole theme will get updated and everything seems cool. But what if user switch the theme toggle button once again? Nothing happens. Because now that i call importStylesheets() function, it won't re-import darkltr CSS because it is already inside application cache. And the higher priority will be with the last imported file (in this case, lightltr). So nothing will change. I came up with a temporary solution to reload the whole application and load it with localStorage and then call importStylesheets() function. But that's a huge disadvantage because one of the reasons that we use react apps is to have a good and fast user experience. So my question is, can someone help me to clear the imported content? Or whatever. I just need to be abled to switch between different CSSs at anytime or make them top priority. Just help me to achieve this goal please. Much appreciated.

UPDATE: I found this part of code in my bundled file. Thought it might help

function importStylesheets() {
  const theme = localStorage.getItem('theme');
  const direction = localStorage.getItem('direction');

  if (theme === 'dark' && direction === 'rtl') {
    Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(1)]).then(__webpack_require__.t.bind(null, /*! ./css/styleDarkrtl.css */ "./src/css/styleDarkrtl.css", 7));
  } else if (theme === 'dark' && direction === 'ltr') {
    Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(3)]).then(__webpack_require__.t.bind(null, /*! ./css/styleDarkltr.css */ "./src/css/styleDarkltr.css", 7));
  } else if (theme === 'light' && direction === 'rtl') {
    Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(2)]).then(__webpack_require__.t.bind(null, /*! ./css/styleLightrtl.css */ "./src/css/styleLightrtl.css", 7));
  } else if (theme === 'light' && direction === 'ltr') {
    Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(4)]).then(__webpack_require__.t.bind(null, /*! ./css/styleLightltr.css */ "./src/css/styleLightltr.css", 7));
  }
}
Improve this question
2
  • Are you using Create React App? Commented Jun 22, 2021 at 18:51
  • Yes i am using Create React App Commented Jun 22, 2021 at 19:04

2 Answers 2

Reset to default
2

Ok, the thing is that there are at least two different mechanisms that are contributing to the current behavior (Webpack module engine and Webpack's style-loader).

When you use Create React App, your code is bundled using Webpack which is responsible of module creation, loading and execution.

Webpack emulates NodeJS module caching strategy, so you are right, each module is only executed once (you could delete the corresponding entry from require.cache using module ID to force a module to be executed multiple times, but in your case it would pollute your <head> with new <style> tags each time you decide to load a css file. Old ones would not be removed).

In fact, style-loader converts your css code into a pseudo JavaScript module. When executed, styles are applied depending on specified options. By default, <style> tags are created.

So, this is why your code behaves like you see. When calling import(), Webpack module engine (Webpack Runtime) searches for the corresponding module (that is the __webpack_require__ thing in your update) and executes it. Then, internally, a wrapper set by style-loader inserts your styles by using <style> tags. Finally, Webpack adds the module to the cache and the next time it will not be executed again, but the latest export will be returned instead (which in this case is an object containing all your classes names).

It happens that style-loader has a feature that I think perfectly matches your use-case and it is called lazyStyleTag (see here). But you will have to change Webpack's config which is not that straightforward, specially when using Create React App.

If you need help to change Webpack's config, please let me know in the comments and I will try to guide you through the process.

However, at the end, you should be able to do something like this:

let previousStylesheet = null;

export async function importStylesheets() {
    const theme = localStorage.getItem('theme');
    const direction = localStorage.getItem('direction');

    let newStylesheet = null;

    if (theme === 'dark' && direction === 'rtl') {
        newStylesheet = await import('./css/styleDarkrtl.css');
    } else if (theme === 'dark' && direction === 'ltr') {
        newStylesheet = await import('./css/styleDarkltr.css');
    } else if (theme === 'light' && direction === 'rtl') {
        newStylesheet = await import('./css/styleLightrtl.css');
    } else if (theme === 'light' && direction === 'ltr') {
        newStylesheet = await import('./css/styleLightltr.css');
    }

    if (previousStylesheet) {
      previousStylesheet.unuse();
    }

    if (newStylesheet) {
      newStylesheet.use();
    }

    previousStylesheet = newStylesheet;
}

Your class names would be accessible like this:

import styles from './css/styleDarkrtl.css';

const elem = <div className={styles.locals['my-class']} />;
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for your response and research. But thanks to @KarelG i found something called react-helmet. This package will manipulate head tag of html. Honestly i was doing something like body.appendChild(link) but the problem was, i had to place my stylesheets in public folder near index.html and that way react helmet would work nicely
@ArdalanNahavandi I'm glad you are getting close to the solution. Please check my comment on the other answer for some important observations.
Well as you mentioned in my other answer, the public folder was reaaaallly slow. Whenever the user tried to switch theme, it took something like half a second up to one second for styles to change. And during that time, the page had no styles! Which is aweful user experience. I tried your answer and it is working perfectly and without any lag. Thanks for your advice
@ArdalanNahavandi I'm really glad to read that. Just out of curiosity, how did you change Webpack config? Rewire? Eject?
I ejected my react app about 3 days ago. Because i needed an html loader and i failed to handle it with rewire. Because of the fact that my app was already ejected, i simply added another rule to my webpack config.
0

For everyone who is still wondering how to achieve this goal easily, you have two options:
1- You can use pure js to achieve this. First of all place all your css in the public folder of your app. Then you can do it with something like this:

const head = document.querySelector("head")
let link = document.getElementById("css-link")
if (!link) { // for first render and ensuring that the link does not already exist
    link = document.createElement('link')
    link.rel = "stylesheet"
    link.href = `/css/style${theme === 'dark' ? 'Dark' : 'Light'}${direction}.css`
    link.id = "css-link"
} else {
    link.href = `/css/style${theme === 'dark' ? 'Dark' : 'Light'}${direction}.css`
}

2- With the help of react-helmet package, you have no need to use pure js and having pain. All you need to do is to place all your css in public folder and then do something like below:

import { Helmet } from 'react-helmet'
.
.
.
<Helmet >
        <link rel="stylesheet" href={`/css/style${theme === 'dark' ? 'Dark' : 'Light'}${direction}.css`} />
 </Helmet>
.
.
.

Using the 2 ways i mentioned above, i could simply switch between different CSSs easily.
Important note
You have to start your addressing in href attributes with "/", not with "./" (if your website is served at root)

Improve this answer

4 Comments

I agree that this is a relatively easier option. However, I must note that this comes with a set of major drawbacks as stated in the official docs. At best, this breaks cache invalidation, hashing, code minification, code splitting/grouping and many other features because this is a Webpack workaround. Overall, it can negatively impact performance.
Thanks for letting me know. I'll try that out whenever i had time to test it :)
@ArdalanNahavandi he this is woking fine when i am switching themes. But my screen got flicker while changing. Any solution for this ?
@Gurupalsingh Yes using helmet or html head tag is functional. But it has a poor performance. You should use lazy css loader instead. Read the accepted answer and feel free to ask if you had any further questions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.