Allow webpack to do RTL compatible CSS splitting

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Current behavior

All css for a particular webpack bundle is in a single file. Dynamic import based code splitting is used sparingly, as CSS is not affected by, so it limits the impact that code splitting can have on load times.

Desired behavior

When code is dynamically imported, both the Javascript and the CSS should be made into split bundles, allowing code splitting to be used more liberally, especially for less frequently loaded parts of different single page apps.

Task: Create a webpack plugin for RTL CSS loading with mini-css-extract-plugin

Objective:

Update the RTL CSS webpack plugin so that mini-css-extract-plugin can dynamically load RTL (Right-to-Left) CSS variants on a per-bundle basis.

Key Requirements:

Bundle-scoped RTL control: RTL direction should be controllable per webpack bundle, not globally. Different bundles may need different RTL states simultaneously (e.g. content viewers might need to display RTL bundles for RTL content in an LTR UI).

Integration with mini-css-extract-plugin: Must work seamlessly with mini-css-extract-plugin's chunk loading mechanism, including:

• Initial CSS loaded with main bundle
• Dynamically loaded CSS chunks via code splitting

Architecture:

• Core functionality should be in a separate JS module that is exposed on the kolibri core app (inside the kolibri package)
• Individual bundles should contain minimal runtime code that references the core
• Avoid code duplication across bundles where possible

CSS file handling:

• RTL CSS files follow the pattern: file.css → file.rtl.css
• Must handle CSS switching without flash of unstyled content
• Must properly unload old CSS when switching modes

Bundle identification:

• Tag link elements with bundle IDs to enable precise scoping
• Use data-webpack-bundle attributes for identification

Technical Constraints:

• Must not modify webpack's core webpack_require.l function (too risky)
• Should intercept webpack_require.miniCssF for URL transformation
• Use requestAnimationFrame (not setTimeout) for CSS loading timing
• Each bundle's webpack_require is scoped to that bundle only

Expected API:

// Per-bundle API (each bundle gets its own scoped instance)
__webpack_require__.rtl.enable();   // Switch bundle to RTL
__webpack_require__.rtl.disable();  // Switch bundle to LTR  
__webpack_require__.rtl.isEnabled(); // Check current state

Deliverables:

1. Core RTL management JS module
2. Updated RTL CSS Webpack plugin that integrates with mini-css-extract-plugin