From 2fff61c27ef432fbd99e9757f20c305ecc1062d6 Mon Sep 17 00:00:00 2001 From: Daniel Ehrenberg Date: Sat, 16 Feb 2019 17:50:15 +0100 Subject: [PATCH] [WIP] CSS module support 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 https://github.com/tc39/proposal-javascript-standard-library/pull/44 Closes #4315 --- source | 122 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 106 insertions(+), 16 deletions(-) diff --git a/source b/source index cc8ed1e1713..f75402e80b9 100644 --- a/source +++ b/source @@ -2743,6 +2743,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

The following terms are defined in the WHATWG MIME Sniffing standard:

+

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: + +

+

The CanvasRenderingContext2D object's use of fonts depends on the features described in the CSS Fonts and Font Loading specifications, including in particular FontFace objects and the ApplicationCache : EventTarget {

Definitions
-

A script is one of two possible A script is one of three possible structs. All scripts have:

@@ -86786,7 +86806,9 @@ interface ApplicationCache : EventTarget {

Either a Script Record, for classic scripts; a Source Text Module Record, for module scripts; or null. In the former two cases, it represents a parsed script; + script">module scripts; a Synthetic Module Record for CSS module scripts; 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.

A parse @@ -86839,6 +86861,10 @@ interface ApplicationCache : EventTarget { data-x="concept-script">script. It has no additional items.

+

A CSS module script is another type of script. It has no additional items.

+

The active script is determined by the following algorithm:

    @@ -87477,25 +87503,83 @@ interface ApplicationCache : EventTarget {

  1. response's status is not an ok status

    2. + + -
  2. -

    The result of extracting a MIME type from - response's header list is not a - JavaScript MIME type

    +
  3. +

    Let type be the result of extracting a + MIME type from response's header + list.

    -

    For historical reasons, fetching a - classic script does not include MIME type checking. In contrast, module scripts will - fail to load if they are not of a correct MIME type.

    -
    4. - +

    For historical reasons, fetching a + classic script 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.

    -

  4. Let source text be the result of UTF-8 - decoding response's body.

    5. +

  5. Let module script be null.

    6. -

  6. Let module script be the result of creating a module script given - source text, module map settings object, response's url, and options.

    7. +
  7. +

    If type is a JavaScript MIME type, then:

    + +
      +

    1. Let source text be the result of UTF-8 + decoding response's body.

      2. + +

    2. Set module script to the result of creating a module script given + source text, module map settings object, response's url, and options.

      3. +
    +
    8. + +
  8. +

    If the essence of type is text/css, then:

    + +
      +

    1. Set module script to a new CSS module script that this algorithm + will subsequently initialize.

      2. + +
    2. +

      Let text be the result of running consume body on + response with text.

      + +

      If this throws an exception, catch it, set module script's + parse error to that exception, and + abort these substeps.

      +
      3. + +

    3. Let sheet be a new CSSStyleSheet object, as if the constructor + is called with no arguments.

      4. + +

    4. Let promise be the result of invoking the replace() operation with text as an + argument.

      5. + +

    5. Upon fulfillment of promise: +

        +
      1. Unset sheet's constructed flag.
        2. +
      2. +

        Set module script's record to CreateSyntheticModule + (« "default" », the following steps, module map settings object's + Realm, sheet) with the + following steps given module as an argument:

        +
          +
        1. SetSyntheticModuleExport(module, "default", + module.[[HostDefined]]).
          2. +
        +
        3. +
      +
      6. + +

    6. Upon rejection of promise with reason, set module + script's parse error to + reason.

      + +

    7. Wait until one of the above promise reactions executes before continuing these + steps.

      8. +
    +

  9. Set moduleMap[url] to module @@ -121771,6 +121855,9 @@ INSERT INTERFACES HERE

    [CSSWM]
    CSS Writing Modes, E. Etemad, K. Ishii. W3C.
    +
    [CSSCSO]
    +
    Constructable Stylesheet Objects, T. Atkins, E. Willigers, R. Amni. W3C.
    +
    [DASH]
    Dynamic adaptive streaming over HTTP (DASH). ISO.
    @@ -121884,6 +121971,9 @@ INSERT INTERFACES HERE
    [JSINTL]
    ECMAScript Internationalization API Specification. Ecma International.
    +
    [JSSTDLIB]
    +
    JavaScript Standard Library. Ecma International.
    +
    [JSON]
    The JavaScript Object Notation (JSON) Data Interchange Format, T. Bray. IETF.