CODEWITHSUNDEEP
javascriptcssreactjs
CodingLittle
CodingLittle

Reputation: 1857

Is it possible to unload dynamic css imports in react?

I have two files which i load with react.lazy and suspense:

import React, { Suspense, lazy }  from "react";
import { Route, Redirect } from 'react-router-dom';
const MainLayout = lazy(()  => import('Components/Layout/MainLayout'))

export const PrivateRoute = () => (
  <Route  render={() => {
    return (
      localStorage.getItem('user')  != null// validation that it is a valid user
          ?
          <Suspense fallback={<div>Loading...</div>}>            
          <MainLayout/>
          </Suspense>
          : <Redirect to={{ pathname: '/login'}} />)
  }} />
)

Second: 

import React, { Suspense, lazy } from "react";
const DefaultLayout = lazy(()  => import('Components/Layout/DefaultLayout'))

export const PublicRoute = () => (
    <Suspense fallback={<div>Loading...</div>}>            
        <DefaultLayout/>
    </Suspense>
  )

the /login path is refrencing a component (login) that is inside of the DefaultLayout component.

Scenario:

When the user is not logged in I load the DefaultLayout component which in turn contains my login component which imports cssFile1.css.

When the user enters the credentials i forward them to a path that is contained in my PrivateRoute where in turn i have cssFile2.css

The problem here is that cssFile1.css was loaded when i was using the loginpage but when the user logs in i want to unload cssFile1.css, is this possible and if yes then how?

Upvotes: 6

Views: 5846

Answers (4)

arniebradfo
arniebradfo

Reputation: 1162

I found a (sort of) reasonable way to do this in React. In short, you can lazy-load React components that contain the import './style.css', and when it loads, you can capture the imported StyleSheet to toggle its StyleSheet.disabled property later.

Here's my original solution to this problem.

Here's a Gist.

Upvotes: 2

light24bulbs
light24bulbs

Reputation: 3151

As of late 2022, you can use the new CSSStyleSheet web API to control styles entirely from JS, including unloading. You can load this into a react app using css-in-js if you make a change to the css-loader options in webpack.

You can do things like

import darkStyles from '../scss/main/dark.css-style-sheet.scss';
import lightStyles from '../scss/main/light.css-style-sheet.scss';

// now mount one of those to the dom
document.adoptedStyleSheets = [darkStyles]
sheet.disabled = true;

It's a little involved for this answer, but I wrote a blog post about how to get it working with react: https://www.lunasec.io/docs/blog/css-style-sheets/

Basically, you need to use craco (or eject) to set up a new rule that sets exportType: 'css-style-sheet' on css-loader.

Upvotes: 1

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

Ok, This might not be the most optimum approach, but can't the whole CSS inside the cssFile1.cssbe scoped? As in all the rules are written targetting elements if they are inside a certain container with a class say 'cssFile1'.

Likewise the 2nd CSS file will target all the elements only if they are located inside a container with the class 'cssFile2'.

now all you have to do to "unload/switch" the css is changing the main container class and the respective CSS rules will apply.

One last tip is, if you are using SASS / LESS its just a matter of enclosing the rules inside a container and all the rules will be scoped upon compilation.

Upvotes: 1

Robert Key
Robert Key

Reputation: 274

If I understand right, then no, it's impossible, because of Webpack imported css when React compiled, anyway, you can try to css in js libs, such a Aphrodite.

Upvotes: 0

Related Questions