[Django] #34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript files.

[Django]

#34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript
files.
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Type: New | Status: new
feature |
Component: | Version: 4.2
contrib.staticfiles | Keywords: Manifest Static
Severity: Normal | Files Storage, javascript css html
Triage Stage: | module scripts
Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-------------------------------------+-------------------------------------
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 };
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34563>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript
files.
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody

Type: New feature | Status: new
Component: contrib.staticfiles | Version: 4.2
Severity: Normal | Resolution:
Keywords: Manifest Static | Triage Stage:
Files Storage, javascript css | Someday/Maybe
html module scripts |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak):

* cc: Adam Johnson (added)
* stage: Unreviewed => Someday/Maybe

Comment:

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.

--
Ticket URL: <https://code.djangoproject.com/ticket/34563#comment:1>

[Django]

#34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript
files.
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Type: New feature | Status: new
Component: contrib.staticfiles | Version: 4.2
Severity: Normal | Resolution:
Keywords: Manifest Static | Triage Stage:
Files Storage, javascript css | Someday/Maybe
html module scripts |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by 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.

--
Ticket URL: <https://code.djangoproject.com/ticket/34563#comment:2>

[Django]

#34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript
files.
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: nobody
Type: New feature | Status: new
Component: contrib.staticfiles | Version: 4.2
Severity: Normal | Resolution:
Keywords: Manifest Static | Triage Stage:
Files Storage, javascript css | Someday/Maybe
html module scripts |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by 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
--
Ticket URL: <https://code.djangoproject.com/ticket/34563#comment:3>

[Django]

#34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript
files.
-------------------------------------+-------------------------------------

Reporter: Michael | Owner: blighj
Type: New feature | Status: assigned

Component: contrib.staticfiles | Version: 4.2
Severity: Normal | Resolution:
Keywords: Manifest Static | Triage Stage:
Files Storage, javascript css | Someday/Maybe
html module scripts |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by blighj):

* owner: nobody => blighj
* status: new => assigned

Comment:

https://github.com/django/django/pull/19561 Will solve this ticket too.
This ticket can be closed if that is approved
--
Ticket URL: <https://code.djangoproject.com/ticket/34563#comment:4>

[Django]

#34563: ManifestStaticFilesStorage support for CSS module scripts in Javascript
files.
-------------------------------------+-------------------------------------
Reporter: Michael | Owner: blighj
Type: New feature | Status: assigned
Component: contrib.staticfiles | Version: 4.2
Severity: Normal | Resolution:
Keywords: Manifest Static | Triage Stage:
Files Storage, javascript css | Someday/Maybe
html module scripts |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Comment (by 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
{{{#!diff
- r"""(?P<matched>import\(["'](?P<url>[./].*?)["']\))""",
- """import("%(url)s")""",
+ (
+ r"""(?P<matched>import\(["'](?P<url>[./].*?)["']"""
+ r"""(?P<options>(?:\s*,[^)]*)?)\))"""
+ ),
+ """import("%(url)s"%(options)s)""",
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34563#comment:5>