Skip to content

[WIP] Add style sheet module scripts #4423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
littledan wants to merge 1 commit into from
Closed

[WIP] Add style sheet module scripts #4423

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 138 additions & 25 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2741,6 +2741,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<p>The following terms are defined in <cite>MIME Sniffing</cite>: <ref spec=MIMESNIFF></p>

<ul class="brief">
<li><dfn data-x-href="https://mimesniff.spec.whatwg.org/#mime-type-essence">essence</dfn></li>
<li><dfn data-x-href="https://mimesniff.spec.whatwg.org/#mime-type">MIME type</dfn></li>
<li><dfn data-x-href="https://mimesniff.spec.whatwg.org/#valid-mime-type">valid MIME type string</dfn></li>
<li><dfn data-x-href="https://mimesniff.spec.whatwg.org/#valid-mime-type-with-no-parameters">valid MIME type string with no parameters</dfn></li>
Expand Down Expand Up @@ -3876,6 +3877,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-cascade/#used-value">used value</dfn></li>
</ul>

<p>Implementations that support scripting must support the CSS Constructable Stylesheet
Objects. The following features and terms are defined in the CSS Constructable Stylesheet
Objects specifications: <ref spec=CSSCSO>

<ul class="brief">
<li><dfn data-x-href="https://wicg.github.io/construct-stylesheets/#dom-cssstylesheet-cssstylesheet"><code>CSSStyleSheet</code></dfn> constructor</li>
<li><dfn data-x="dom-cssstylesheet-replace" data-x-href="https://wicg.github.io/construct-stylesheets/#dom-cssstylesheet-replace"><code>replace()</code></dfn> operation of <code>CSSStyleSheet</code></li>
<li><dfn data-x-href="https://wicg.github.io/construct-stylesheets/#cssstylesheet-constructed-flag">constructed flag</dfn> constructor</li>
</ul>

<p>The <code>CanvasRenderingContext2D</code> object's use of fonts depends on the features
described in the CSS <cite>Fonts</cite> and <cite>Font Loading</cite> specifications, including
in particular <dfn><code>FontFace</code></dfn> objects and the <dfn
Expand Down Expand Up @@ -57988,15 +57999,28 @@ interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
Authors should omit the <code data-x="attr-script-type">type</code> attribute instead of
redundantly setting it.</p></li>

<li><p>Setting the attribute to an <span>ASCII case-insensitive</span> match for the string
"<code data-x="">module</code>" means that the script is a <span>module script</span>. If it has
a <span>JavaScript MIME type</span>, or if the script is embedded inline, then it will be
interpreted as a <span>JavaScript module script</span> according to the JavaScript <i
data-x="js-prod-Module">Module</i> top-level production; if it has a <span>JSON MIME
type</span>, then it will be interpreted as a <span>JSON module script</span>. Module scripts
are not affected by the <code data-x="attr-script-defer">defer</code> attribute, but are
affected by the <code data-x="attr-script-async">async</code> attribute (regardless of the state
of the <code data-x="attr-script-src">src</code> attribute).</p></li>
<li>
<p>Setting the attribute to an <span>ASCII case-insensitive</span> match for the string
"<code data-x="">module</code>" means that the script is one of the various types of
<span>module script</span>.

<dl class="switch">
<dt>If the script is embedded inline
<dt>If the script has a <span>JavaScript MIME type</span>
<dd>It will be interpreted as a <span>JavaScript module script</span> according to the
JavaScript <i data-x="js-prod-Module">Module</i> top-level production.

<dt>If the script has a <span>JSON MIME type</span>
<dd>It will be interpreted as a <span>JSON module script</span>.

<dt>If the script has MIME type whose <span>essence</span> is <code>text/css</code>
<dd>It will be interpreted as a <span>style sheet module script</span>.
</dl>

<p>Module scripts are not affected by the <code data-x="attr-script-defer">defer</code>
attribute, but are affected by the <code data-x="attr-script-async">async</code> attribute
(regardless of the state of the <code data-x="attr-script-src">src</code> attribute).</p>
</li>

<li><p>Setting the attribute to any other value means that the script is a <dfn>data
block</dfn>, which is not processed. None of the <code>script</code> attributes (except <code
Expand All @@ -58015,11 +58039,12 @@ interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
ever be reinterpreted as a different script type, even in future user agents.</p>

<p><span data-x="classic script">Classic scripts</span> and <span data-x="JavaScript module
script">JavaScript module scripts</span> can be embedded inline, or be imported from an external
file using the <dfn data-export="" data-dfn-for="script" data-dfn-type="element-attr"><code
data-x="attr-script-src">src</code></dfn> attribute, which if specified gives the <span>URL</span>
of the external script resource to use. If <code data-x="attr-script-src">src</code> is specified,
it must be a <span>valid non-empty URL potentially surrounded by spaces</span>.</p>
script">JavaScript module scripts</span> may be embedded inline, and all script types may be
imported from an external file using the <dfn data-export="" data-dfn-for="script"
data-dfn-type="element-attr"><code data-x="attr-script-src">src</code></dfn> attribute, which if
specified gives the <span>URL</span> of the external script resource to use. If <code
data-x="attr-script-src">src</code> is specified, it must be a <span>valid non-empty URL
potentially surrounded by spaces</span>.</p>

<p>The contents of inline <code>script</code> elements, or the external script resource, must
conform with the requirements of the JavaScript specification's <i
Expand All @@ -58030,6 +58055,10 @@ interface <dfn>HTMLScriptElement</dfn> : <span>HTMLElement</span> {
<p>The contents of the external script resource for <span data-x="JSON module script">JSON module
scripts</span> must conform to the requirements of the JSON specification <ref spec=JSON>.</p>

<p>The contents of the external script resource for <span data-x="style sheet module script">style
sheet module scripts</span> must conform to the requirements of the CSS Syntax specification
<ref spec=CSSSYNTAX>.</p>

<p>When used to include <span data-x="data block">data blocks</span>, the data must be embedded
inline, the format of the data must be given using the <code data-x="attr-script-type">type</code>
attribute, and the contents of the <code>script</code> element must conform to the requirements
Expand Down Expand Up @@ -87510,7 +87539,10 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
script">JavaScript module scripts</span>;</p></li>

<li><p>a <span>Synthetic Module Record</span>, for <span data-x="JSON module script">JSON
module scripts</span>; or</p></li>
module scripts</span>;</p></li>

<li><p>a <span>Synthetic Module Record</span>, for <span data-x="style sheet module
script">style sheet module scripts</span>; or</p></li>

<li><p>null, representing a parsing failure.</p></li>
</ul>
Expand Down Expand Up @@ -87566,33 +87598,39 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
data-x="concept-script">script</span>. It has no additional <span data-x="struct
item">items</span>.</p>

<p><span data-x="module script">Module scripts</span> can be classified into two types:</p>
<p><span data-x="module script">Module scripts</span> can be classified into three types:</p>

<ul>
<li><p>A <span>module script</span> is a <dfn data-export="">JavaScript module script</dfn> if
its <span data-x="concept-script-record">record</span> is a <span>Source Text Module
Record</span>.</p></li>

<!--
These definitions are not super-rigorous, but they don't need to be for now.

If we ever start testing if something is a JSON module script in algorithms, instead of just
referring to the concept, then we should consider adding a type item to the module script
struct.
-->

<li>
<p>A <span>module script</span> is a <dfn data-export="">JSON module script</dfn> if its <span
data-x="concept-script-record">record</span> is a <span>Synthetic Module Record</span>, and it
was created via the <span data-x="creating a JSON module script">create a JSON module
script</span> algorithm. JSON module scripts represent a parsed JSON document.</p>
<!--
This definition is not super-rigorous, but it doesn't need to be for now. Technically, the
"it was created via..." requirement is redundant, since there are no other Synthetic Module
Record users.

If we ever: (a) get more Synthetic Module Record Users; or (b) start testing if something is a
JSON module script in algorithms, instead of just referring to the concept, then we should
consider adding a type item to the module script struct.
-->

<p class="note">As JSON documents do not import dependent modules, and do not throw exceptions
on evaluation, the <span data-x="concept-script-script-fetch-options">fetch options</span> and
<span data-x="concept-script-base-url">base URL</span> of a <span>JSON module script</span> are
always null.</p>
</li>

<li>
<p>A <span>module script</span> is a <dfn data-export="">style sheet module script</dfn> if its
<span data-x="concept-script-record">record</span> is a <span>Synthetic Module Record</span>,
and it was created via the <span data-x="creating a style sheet module script">create a style
sheet module script</span> algorithm. Style sheet module scripts represent a parsed CSS style
sheet.</p>
</ul>

<p>The <dfn>active script</dfn> is determined by the following algorithm:</p>
Expand Down Expand Up @@ -88598,6 +88636,23 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
</ol>
</li>

<li>
<p>If the <span>essence</span> of <var>type</var> is <code>text/css</code>, then:</p>

<ol>
<li><p>Let <var>source text</var> be the result of <span data-x="UTF-8 decode">UTF-8
decoding</span> <var>response</var>'s <span
data-x="concept-response-body">body</span>.</p></li>

<li><p><span data-x="creating a style sheet module script">Create a style sheet module
script</span> given <var>source text</var>, <var>module map settings object</var>,
<var>response</var>'s <span data-x="concept-response-url">url</span>, and <var>options</var>.
Wait until the algorithm asynchronously completes with <var>result</var>.</p></li>

<li><p>Set <var>module script</var> to <var>result</var>.</p></li>
</ol>
</li>

<li>
<p><span data-x="map set">Set</span> <var>moduleMap</var>[<var>url</var>] to <var>module
script</var>, and asynchronously complete this algorithm with <var>module script</var>.</p>
Expand Down Expand Up @@ -88836,6 +88891,61 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {
<li><p>Return <var>script</var>.</p></li>
</ol>

<p>To <dfn data-x="creating a style sheet module script">create a style sheet module script</dfn>,
given a <span>JavaScript string</span> <var>source</var>, an <span>environment settings
object</span> <var>settings</var>, a <span>URL</span> <var>baseURL</var>, and some <span>script
fetch options</span> <var>options</var>, run these steps. The algorithm will asynchronously
complete with a new <span>style sheet module script</span>.</p>

<ol>
<li><p>Let <var>script</var> be a new <span>style sheet module script</span> that this algorithm
will subsequently initialize.</p></li>

<li><p>Set <var>script</var>'s <span>settings object</span> to <var>settings</var>.</p></li>

<li><p>Set <var>script</var>'s <span data-x="concept-script-base-url">base URL</span> to
<var>baseURL</var>.</p></li>

<li><p>Set <span data-x="concept-script-script-fetch-options">fetch options</span> to
<var>options</var>.</p></li>

<li><p>Set <var>script</var>'s <span data-x="concept-script-parse-error">parse error</span> and
<span data-x="concept-script-error-to-rethrow">error to rethrow</span> to null.</p></li>

<li><p>Let <var>sheet</var> be a new <code>CSSStyleSheet</code> object, as if the constructor
is called with no arguments.</p></li>

<li><p>Let <var>promise</var> be the result of invoking the <code
data-x="dom-cssstylesheet-replace">replace()</code> operation with <var>text</var> as an
argument.</p></li>

<li>
<p>Upon fulfillment of <var>promise</var>:</p>

<ol>
<li><p>Unset <var>sheet</var>'s <span>constructed flag</span>.</p></li>

<li><p>Set <var>script</var>'s <span data-x="concept-script-record">record</span> to the result
of <span data-x="create a synthetic module record with a default export">creating a synthetic
module record with a default export</span> of <var>style sheet</var> with
<var>settings</var>.</p></li>

<li><p>Asynchronously complete this algorithm with <var>script</var>.</p></li>
</ol>
</li>

<li>
<p>Upon rejection of <var>promise</var> with <var>reason</var>:</p>
<ol>
<li><p>Set <var>script</var>'s <span data-x="concept-script-parse-error">parse error</span> to
<var>reason</var>.</p></li>

<li><p>Asynchronously complete this algorithm with <var>script</var>.</p></li>
</ol>
</li>

</ol>

<p>To <dfn>create a synthetic module record with a default export</dfn> of a JavaScript value
<var>value</var> with an <span>environment settings object</span> <var>settings</var>:</p>

Expand Down Expand Up @@ -123043,6 +123153,9 @@ INSERT INTERFACES HERE
<dt id="refsCSSWM">[CSSWM]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-writing-modes/">CSS Writing Modes</a></cite>, E. Etemad, K. Ishii. W3C.</dd>

<dt id="refsCSSCSO">[CSSCSO]</dt>
<dd><cite><a href="https://wicg.github.io/construct-stylesheets/">Constructable Stylesheet Objects</a></cite>, T. Atkins, E. Willigers, R. Amni. W3C.</dd>

<dt id="refsDASH">[DASH]</dt>
<dd><cite><a href="https://www.iso.org/standard/65274.html">Dynamic adaptive streaming over HTTP (DASH)</a></cite>. ISO.</dd>

Expand Down