Suppose following global css files which set-up BRAND specific variable values:

src/css/brand-a.css
src/css/brand-b.css

example of contents (/src/css/brand-a.css):

:root {
  @mixin theme-brand-a;
}

and my src/pages/_app.tsx

type OwnPageProps = {
  brand: "a" | "b"
};

const MainApp = ({ Component, pageProps }: AppProps<OwnPageProps>) => {
      const { brand } = pageProps;
      // Need to import brand-specific css
      return   <Component {...pageProps} />
}

## Attempt 1:

import from "src/css/brand-a.css"
import from "src/css/brand-b.css"

## FAIL:
CSS Results in one huge style.css with global styles overwritting each other

## Attempt 2 (trick the next/dynamic to load global as module):

src/components/CssLoaderBrandA.tsx
src/components/CssLoaderBrandA.module.css
src/components/CssLoaderBrandB.tsx
src/components/CssLoaderBrandB.module.css
src/components/CssLoader.tsx

Example of CssLoaderBrandA.ts:

import React from 'react';
import './CssLoaderBrandA.module.css';

const CssLoaderBrandA = () => <p />;

export default CssLoaderBrandA;

Example of src/components/CssLoader.tsx:

export const CssLoader = ({ brand }: CssLoaderProps) => {
  switch (brand) {
    case 'A':
      dynamic(() => import('./CssLoaderBrandA'));
      break;
    case 'B':
    default:
      dynamic(() => import('./CssLoaderBrandB'));
      break;
  }
  return <p />;
};

Example of src/pages/_app.tsx

const MainApp = ({ Component, pageProps }: AppProps<OwnPageProps>) => {
      const { brand } = pageProps;
      // Need to import brand-specific css
      return  <>
            <CssLoader brand={brand} />
            <Component {...pageProps} />
      </>
}

## FAIL: Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)

## Attempt 3:
Alter webpack to remove ALL css/sass/scss loaders and rules and define own chunks for css and load them as 'asset/resource'
## FAIL:
All css 404