ManifestStaticFilesStorage support for CSS module scripts in Javascript files.

[Michael]

CSS modules scripts are becomming a thing, see ​https://web.dev/css-module-scripts/#:~:text=CSS%20module%20scripts%20are%20available,Safari%20is%20not%20yet%20available.

Current we only support JavaScript modules and not CSS modules with the ManifestStaticFilesStorage.

The following import paths in JS files files will need to be converted when collecting static with ManifestStaticFilesStorage:

import sheet from './styles.css' assert { type: 'css' };

Additionally WHATWG is firming up HTML modules, so we could proactively handle this too while we are at it:

import content from './template.html' assert { type: 'html };

[Mariusz Felisiak]

I think it's too early for this as Firefox and Safari still don't support it, and there doesn't seem to be any ongoing work on supporting it in the last 2 years.

[Adam Johnson]

I agree, let’s get multiple browser support before modifying Django. You can implement support in your project or a third party package beforehand.

[blighj]

This package I've been working on, and hoping to get feedback on, handles the assert syntax and will change the path of css/html files in an import statement, ​https://github.com/blighj/django-manifeststaticfiles-enhanced

[blighj]

​https://github.com/django/django/pull/19561 Will solve this ticket too. This ticket can be closed if that is approved

[blighj]

The fix for ticket #36969 has improved the situation for this. It wasn't considered at the time but I've tested and the two examples in the original description will now be supported.
The actual spec has moved on since this ticket was opened in 2023. see ​https://github.com/tc39/proposal-import-attributes and now has broad browser support, see ​https://caniuse.com/mdn-javascript_statements_import_import_attributes.

The syntax is now with instead of assert, but due to the way the regular expressions now work both would be covered. All that would be needed is to prove this with some test fixtures.

The following import paths in JS files files are converted when collecting static with ManifestStaticFilesStorage:

import sheet from './styles.css' assert { type: 'css' }; //old syntax
import sheet from './styles.css' with { type: 'css' };    // current syntax

However there is now a dynamic import syntax, that either didn't exist or wasn't highlighted at the time the ticket was created, that does not work.

import("foo.json", { with: { type: "json" } })

foo.json will not be replaced with the cached friendly file version. That would require a change to the regex's for dynamic imports to capture an optional second param. something like

-                r"""(?P<matched>import\(["'](?P<url>[./].*?)["']\))""",
-                """import("%(url)s")""",
+                (
+                    r"""(?P<matched>import\(["'](?P<url>[./].*?)["']"""
+                    r"""(?P<options>(?:\s*,[^)]*)?)\))"""
+                ),
+                """import("%(url)s"%(options)s)""",