Declarative CSS Modules

source

@@ -3123,6 +3123,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li>The <dfn data-x-href="https://tc39.es/ecma262/#sec-isdatadescriptor">IsDataDescriptor</dfn> abstract operation</li>
      <li>The <dfn data-x-href="https://tc39.es/ecma262/#sec-isdetachedbuffer">IsDetachedBuffer</dfn> abstract operation</li>
      <li>The <dfn data-x-href="https://tc39.es/ecma262/#sec-issharedarraybuffer">IsSharedArrayBuffer</dfn> abstract operation</li>
+     <li>The <dfn data-x-href="https://tc39.es/ecma262/#sec-json.stringify">JSON.stringify</dfn> abstract operation</li>
      <li>The <dfn data-x="js-NewObjectEnvironment" data-x-href="https://tc39.es/ecma262/#sec-newobjectenvironment">NewObjectEnvironment</dfn> abstract operation</li>
      <li>The <dfn data-x-href="https://tc39.es/ecma262/#sec-normalcompletion">NormalCompletion</dfn> abstract operation</li>
      <!-- the next set of Ordinary* abstract operations are in order of appearance -->
@@ -18513,6 +18514,7 @@ people expect to have work and what is necessary.
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-style-media">media</code></dd>
    <dd><code data-x="attr-style-blocking">blocking</code></dd>
+   <dd><code data-x="attr-style-specifier">specifier</code></dd>
    <dd>Also, the <code data-x="attr-style-title">title</code> attribute <span data-x="attr-style-title">has special semantics</span> on this element.</dd>
    <dt><span
    data-x="concept-element-accessibility-considerations">Accessibility considerations</span>:</dt>
@@ -18527,6 +18529,7 @@ interface <dfn interface>HTMLStyleElement</dfn> : <span>HTMLElement</span> {
   attribute boolean <span data-x="dom-style-disabled">disabled</span>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLStyleElement" data-x="dom-style-media">media</dfn>;
   [SameObject, PutForwards=<span data-x="dom-DOMTokenList-value">value</span>, <span data-x="xattr-Reflect">Reflect</span>] readonly attribute <span>DOMTokenList</span> <dfn attribute for="HTMLStyleElement" data-x="dom-style-blocking">blocking</dfn>;
+  [SameObject, PutForwards=value, Reflect] readonly attribute DOMString specifier;
 
   // <a href="#HTMLStyleElement-partial">also has obsolete members</a>
 };
@@ -18602,6 +18605,10 @@ console.log(style.disabled); // false</code></pre>
   <p>The <dfn element-attr for="style"><code data-x="attr-style-blocking">blocking</code></dfn>
   attribute is a <span>blocking attribute</span>.</p>
 
+  <p>The <dfn element-attr for="style"><code data-x="attr-style-specifier">specifier</code></dfn>
+  attribute defines an exportable <span
+  data-x="specifier-resolution-record-specifier">specifier</span>.</p>
+
   <p id="title-on-style">The <dfn element-attr for="style"><code
   data-x="attr-style-title">title</code></dfn> attribute on <code>style</code> elements defines
   <span data-x="CSS style sheet set">CSS style sheet sets</span>. If the <code>style</code> element
@@ -18831,7 +18838,86 @@ console.log(style.disabled); // false</code></pre>
 
   </div>
 
+  <p>The user agent must run the <span>create a declarative CSS module script</span> algorithm when
+  all of the following conditions are true:</p>
+
+  <ul>
+   <li><p>The element is popped off the <span>stack of open elements</span> of an <span>HTML
+   parser</span> or <span>XML parser</span>.</p></li>
+
+   <li><p>The element is not on the <span>stack of open elements</span> of an <span>HTML
+   parser</span> or <span>XML parser</span>, and it <span>becomes connected</span>.</p></li>
+  </ul>
+
+  <div algorithm>
+  <p>The <dfn export>create a declarative CSS module script</dfn> algorithm is as follows:</p>
+
+  <ol>
+   <li><p>Let <var>element</var> be the <code>style</code> element.</p></li>
+
+   <li><p>If <var>element</var> is not <span>connected</span>, then return.</p></li>
+   <!-- See:
+          https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2740
+          https://github.com/w3c/csswg-drafts/issues/3096 -->
+
+   <li><p>If <var>element</var>'s <code data-x="attr-style-type">type</code> attribute is not present
+   or its value is not an <span>ASCII case-insensitive</span> match for
+   "<code data-x="">module</code>", then return.</p></li>
+
+   <li><p>If <var>element</var>'s <code data-x="attr-style-specifier">specifier</code> attribute
+   is not present or its value is an empty string, then return.</p></li>
+
+   <li><p>If the <span>Should element's inline behavior be blocked by Content Security
+   Policy?</span> algorithm returns "<code data-x="">Blocked</code>" when executed upon the
+   <code>style</code> element, "<code data-x="">style</code>", and the <code>style</code>
+   element's <span>child text content</span>, then return. <ref>CSP</ref></p></li>
+
+   <li><p>Let <var>styleBlob</var> be the result of creating a <span>Blob</span> object representing
+   a file containing the <code>style</code> element's <span>child text content</span> with a
+   <code data-x="dom-Blob-type">type</code> of "<code>text/css</code>".</p></li>
 
+   <li><p>Let <var>styleBlobURL</var> be the <span data-x="concept-url-blob-entry">blob URL entry</span>
+   associated with <var>styleBlob</var>.</p></li>
+
+   <li><p>Create a JSON object <var>jsonObject</var> with a single key of "<code data-x="">imports</code>"
+   whose value is a single JSON object containing a <span>module specifier map</span> with a key consisting
+   of the value of the <span data-x="attr-style-specifier">specifier attribute</span> and a value of
+   <var>styleBlobURL</var>.</p></li>
+
+   <li><p>Let <var>jsonString</var> be the result of calling <span>JSON.stringify</span> on
+   <var>jsonObject</var>.</p></li>
+
+   <li><p>Let <var>importMapParseResult</var> be the result of <span>create an import map parse result</span>
+   with <var>input</var> as <var>jsonString</var> and <var>baseURL</var> as the <span>document base URL</span>.</p></li>
+
+   <li><p>If <var>importMapParseResult</var>'s <span data-x="impr-error-to-rethrow">error to rethrow</span> is
+   not null, then return.</p></li>
+
+   <li><p><span>Register an import map</span> using <var>element</var>'s <span>relevant global object</span>
+   and <var>importMapParseResult</var>.</p></li>
+  </ol>
+  </div>
+
+  <div class="example">
+
+    <p>For example, a <code>style</code> element defined as follows:</p>
+
+    <pre><code class="html">
+&lt;style type="module" specifier="foo">body { background: navy; color: yellow; }&lt;/style>
+    </code></pre>
+
+    <p>Is equivalent to the following dynamically created <span>import map</span> definition:</p>
+
+    <pre><code class="html" data-x="">
+&lt;script>
+  const blob_url = URL.createObjectURL(new Blob(["body { background: navy; color: yellow; }"], {type: "text/css"}));
+  const import_map = document.createElement("script");
+  import_map.setAttribute("type", "importmap");
+  const json_string = "{ \"imports\": { \"foo\": \"" + blob_url +  "\" }}";
+  import_map.innerText = json_string;
+  document.body.appendChild(import_map);
+&lt;/script></code></pre>
+  </div>
 
   <div w-nodev>
 
@@ -68108,8 +68194,6 @@ interface <dfn interface>HTMLTemplateElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
-
-
   <div w-nodev>
 
   <h5 id="template-XSLT-XPath">Interaction of <code>template</code> elements with XSLT and XPath</h5>
@@ -140229,6 +140313,7 @@ document.body.appendChild(text);
          data-x="attr-template-shadowrootcustomelementregistry">shadowrootcustomelementregistry</code>
          attribute, then set <var>shadow</var>'s <span>keep custom element registry null</span> to
          true.</p></li>
+
         </ol>
        </li>
       </ol>
@@ -148489,9 +148574,10 @@ if (s = prompt('What is your name?')) {
   attribute on <code>script</code> elements that is the empty string or a <span>JavaScript MIME type
   essence match</span>. Instead, they should omit the attribute, which has the same effect.</p>
 
-  <p>Authors should not specify a <code data-x="attr-style-type">type</code> attribute on a
-  <code>style</code> element. If the attribute is present, its value must be an <span>ASCII
-  case-insensitive</span> match for "<code>text/css</code>".</p>
+  <p>Authors should not specify a value for the <code data-x="attr-style-type">type</code>
+  attribute on <code>style</code> elements, if that value is an <span>ASCII case-insensitive</span>
+  match for "<code>text/css</code>". Instead, they should omit the attribute, which has the same
+  effect.</p>
 
   <p>Authors should not specify the <code data-x="attr-a-name">name</code> attribute on
   <code>a</code> elements. If the attribute is present, its value must not be the empty string and
@@ -148799,7 +148885,7 @@ if (s = prompt('What is your name?')) {
    <dd><p>Use DOM events mechanisms to register event listeners. <ref>DOM</ref></p></dd>
 
    <dt><dfn element-attr for="style"><code data-x="attr-style-type">type</code></dfn> on <code>style</code> elements (except as noted in the previous section)</dt>
-   <dd><p>Omit the attribute for CSS; for <span data-x="data block">data blocks</span>, use
+   <dd><p>Omit the attribute for CSS (unless used to <span>create a declarative CSS module script</span>); for <span data-x="data block">data blocks</span>, use
    <code>script</code> as the container instead of <code>style</code>.</p></dd>
 
    <dt><dfn element-attr for="table"><code data-x="attr-table-datapagesize">datapagesize</code></dfn> on <code>table</code> elements</dt>
@@ -151699,7 +151785,8 @@ interface <dfn interface>External</dfn> {
      <td>text*</td>
      <td><span data-x="global attributes">globals</span>;
          <code data-x="attr-style-media">media</code>;
-         <code data-x="attr-style-blocking">blocking</code></td>
+         <code data-x="attr-style-blocking">blocking</code>;
+         <code data-x="attr-style-specifier">specifier</code></td>
      <td><code>HTMLStyleElement</code></td>
     </tr>
 
@@ -153391,6 +153478,11 @@ interface <dfn interface>External</dfn> {
      <td> "<code data-x="attr-spellcheck-true">true</code>";
           "<code data-x="attr-spellcheck-false">false</code>";
           the empty string
+    <tr>
+     <th> <code data-x="">specifier</code>
+     <td> <code data-x="attr-style-specifier">style</code>
+     <td> A <span data-x="specifier-resolution-record-specifier">specifier</span> value used in a <span>module specifier map</span>
+     <td> <a href="#attribute-text">Text</a>
     <tr>
      <th> <code data-x="">src</code>
      <td> <code data-x="attr-media-src">audio</code>;
@@ -156406,6 +156498,7 @@ INSERT INTERFACES HERE
   Kristof Zelechovski,
   Krzysztof Maczy&#x0144;ski,
   &#x9ed2;&#x6fa4;&#x525b;&#x5fd7; (Kurosawa Takeshi),
+  Kurt Catti-Schmidt,
   Kyle Barnhart,
   Kyle Hofmann<!-- Ozob -->,
   Kyle Huey,