[WIP] Add style sheet module scripts

littledan · Ms2ger · commit 5ebee9bc759b · 2019-05-21T11:38:04.000+02:00
This patch provides CSS modules as a single default export, of a CSSStyleSheet object, which is not added to the document. Edge cases which I didn't see discussed elsewhere: - @imports are recursively fetched together with the module graph, blocking script execution. Network errors reached prevent the execution of the entire module graph. - Any MIME type whose essence is "text/css" is accepted; this appears to be weaker checking than elsewhere in the specification. - Although the Constructable Stylesheet Objects proposal is used for infrastructure, the resulting CSSStyleSheet object acts as if it were not constructed (i.e., you can't call the replace() method). Note, the Constructable Stylesheet Objects proposal makes important steps to specifying loading of @import, but there may still be room for more precise plumbing with HTML. This text ensures that style sheet module scripts have a base URL and fetch options, which might be referenced by the definition of @import in the future. Closes WICG/webcomponents#759
diff --git a/source b/source
@@ -2738,6 +2738,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <p>The following terms are defined in the WHATWG MIME Sniffing standard: <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>
@@ -3883,6 +3884,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
@@ -58013,15 +58024,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
@@ -58040,11 +58064,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
@@ -58055,6 +58080,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
@@ -87524,7 +87553,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>
@@ -87580,33 +87612,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>
@@ -88295,6 +88333,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>
@@ -88661,6 +88716,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>
 
@@ -122924,6 +123034,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>
 
