Skip to content

Commit

Permalink
[WIP] CSS module support
Browse files Browse the repository at this point in the history 
This patch provides CSS modules as a single default export, of
a CSSStyleSheet object, which is not added to the document.

Edge cases which might be worth reconsidering:
- @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).

This patch is based on
tc39/proposal-built-in-modules#44

Closes whatwg#4315
  • Loading branch information
@littledan
littledan committed Mar 5, 2019
1 parent f9e4c66 commit 2fff61c
Showing 1 changed file with 106 additions and 16 deletions.
122 changes: 106 additions & 16 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2743,6 +2743,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>
Expand Down Expand Up @@ -2783,6 +2784,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#requestcredentials"><code>RequestCredentials</code></dfn> enumeration</li>
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#requestdestination"><code>RequestDestination</code></dfn> enumeration</li>
<li>the <dfn data-x-href="https://fetch.spec.whatwg.org/#dom-global-fetch"><code>fetch()</code></dfn> method</li>
<li><dfn data-x-href="https://fetch.spec.whatwg.org/#concept-body-consume-body">consume body</dfn></li>
<li>
<dfn data-x="concept-response"
data-x-href="https://fetch.spec.whatwg.org/#concept-response">response</dfn> and its
Expand Down Expand Up @@ -3122,6 +3124,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

<p>User agents that support JavaScript must also implement the <cite>BigInt</cite> proposal. <ref
spec=JSBIGINT></p>

<p>User agents that support JavaScript must also implement the <cite>JavaScript standard library</cite> proposal.
The following terms are defined there, and used in this specification: <ref spec=JSSTDLIB></p>
<ul class="brief">
<li>The <dfn data-x-href="https://proposal-javascript-standard-library-domenic.now.sh/#sec-createsyntheticmodule">CreateSyntheticModule</dfn> abstract operation</li>
<li>The <dfn data-x-href="https://proposal-javascript-standard-library-domenic.now.sh/#sec-setsyntheticmoduleexport">SetSyntheticModuleExport</dfn> abstract operation</li>
<li><dfn data-x-href="https://proposal-javascript-standard-library-domenic.now.sh/#sec-synthetic-module-records">Synthetic Module Record</dfn></li>
</ul>
</dd>


Expand Down Expand Up @@ -3861,6 +3871,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 @@ -86773,7 +86793,7 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {

<h5>Definitions</h5>

<p>A <dfn data-x="concept-script" data-export="">script</dfn> is one of two possible <span
<p>A <dfn data-x="concept-script" data-export="">script</dfn> is one of three possible <span
data-x="struct">structs</span>. All scripts have:</p>

<dl>
Expand All @@ -86786,7 +86806,9 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {

<dd><p>Either a <span>Script Record</span>, for <span data-x="classic script">classic
scripts</span>; a <span>Source Text Module Record</span>, for <span data-x="module
script">module scripts</span>; or null. In the former two cases, it represents a parsed script;
script">module scripts</span>; a <span>Synthetic Module Record</span> for <span
data-x="CSS module script">CSS module scripts</span>; or null. In the
former two cases, it represents a parsed script; in the third case, a parsed JSON document;
null represents a failure parsing.</p></dd>

<dt>A <dfn data-dfn-for="script" data-export="" data-x="concept-script-parse-error">parse
Expand Down Expand Up @@ -86839,6 +86861,10 @@ 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>A <dfn data-export="">CSS module script</dfn> is another type of <span
data-x="concept-script">script</span>. It has no additional <span data-x="struct
item">items</span>.</p>

<p>The <dfn>active script</dfn> is determined by the following algorithm:</p>

<ol>
Expand Down Expand Up @@ -87477,25 +87503,83 @@ interface <dfn>ApplicationCache</dfn> : <span>EventTarget</span> {

<li><p><var>response</var>'s <span data-x="concept-response-status">status</span> is not an
<span>ok status</span></p></li>
</ul>
</li>

<li>
<p>The result of <span data-x="extract a MIME type">extracting a MIME type</span> from
<var>response</var>'s <span data-x="concept-response-header-list">header list</span> is not a
<span>JavaScript MIME type</span></p>
<li>
<p>Let <var>type</var> be the result of <span data-x="extract a MIME type">extracting a
MIME type</span> from <var>response</var>'s <span data-x="concept-response-header-list">header
list</span>.</p>

<p class="note">For historical reasons, <span data-x="fetch a classic script">fetching a
classic script</span> does not include MIME type checking. In contrast, module scripts will
fail to load if they are not of a correct MIME type.</p>
</li>
</ul>
<p class="note">For historical reasons, <span data-x="fetch a classic script">fetching a
classic script</span> does not include MIME type checking. In contrast, module scripts'
interpretation is driven by their MIME type, and they will fail to load if they are not of
a supported MIME type.</p>
</li>

<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>Let <var>module script</var> be null.</p></li>

<li><p>Let <var>module script</var> be the result of <span>creating a 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>.</p></li>
<li>
<p>If <var>type</var> is a <span>JavaScript MIME type</span>, 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>Set <var>module script</var> to the result of <span>creating a 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>.</p></li>
</ol>
</li>

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

<ol>
<li><p>Set <var>module script</var> to a new <span>CSS module script</span> that this algorithm
will subsequently initialize.</p></li>

<li>
<p>Let <var>text</var> be the result of running <span>consume body</span> on
<var>response</var> with <i>text</i>.</p>

<p>If this throws an exception, catch it, set <var>module script</var>'s
<span data-x="concept-script-parse-error">parse error</span> to that exception, and
abort these substeps.</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>:
<ol>
<li>Unset <var>sheet</var>'s <span>constructed flag</span>.</li>
<li>
<p>Set <var>module script</var>'s <span
data-x="concept-script-record">record</span> to <span>CreateSyntheticModule</span>
(&laquo; "default" &raquo;, the following steps, <var>module map settings object</var>'s
<span data-x="environment settings object's Realm">Realm</span>, <var>sheet</var>) with the
following steps given <var>module</var> as an argument:</p>
<ol>
<li><span>SetSyntheticModuleExport</span>(<var>module</var>, "default",
<var>module</var>.[[HostDefined]]).</li>
</ol>
</li>
</ol>
</li>

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

<li><p>Wait until one of the above promise reactions executes before continuing these
steps.</p></li>
</ol>
</li>

<li>
<p><span data-x="map set">Set</span> <var>moduleMap</var>[<var>url</var>] to <var>module
Expand Down Expand Up @@ -121771,6 +121855,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 Expand Up @@ -121884,6 +121971,9 @@ INSERT INTERFACES HERE
<dt id="refsJSINTL">[JSINTL]</dt>
<dd><cite><a href="https://tc39.github.io/ecma402/">ECMAScript Internationalization API Specification</a></cite>. Ecma International.</dd>

<dt id="refsJSSTDLIB">[JSSTDLIB]</dt>
<dd><cite><a href="https://github.com/tc39/proposal-javascript-standard-library/">JavaScript Standard Library</a></cite>. Ecma International.</dd>

<dt id="refsJSON">[JSON]</dt>
<dd><cite><a href="https://tools.ietf.org/html/rfc7159">The JavaScript Object Notation (JSON) Data Interchange Format</a></cite>, T. Bray. IETF.</dd>

Expand Down

0 comments on commit 2fff61c

Please sign in to comment.