From 995b3d2a3987d03505284f960133f2893b369700 Mon Sep 17 00:00:00 2001 From: Daniel Ehrenberg Date: Sat, 16 Feb 2019 17:50:15 +0100 Subject: [PATCH] [WIP] Add style sheet module scripts 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 https://github.com/w3c/webcomponents/issues/759 --- source | 163 ++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 138 insertions(+), 25 deletions(-) diff --git a/source b/source index 9d749bd678d..1c5b0e9f148 100644 --- a/source +++ b/source @@ -2741,6 +2741,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

The following terms are defined in MIME Sniffing:

+

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 HTMLScriptElement : HTMLElement { Authors should omit the type attribute instead of redundantly setting it.

-

  • Setting the attribute to an ASCII case-insensitive match for the string - "module" means that the script is a module script. If it has - a JavaScript MIME type, or if the script is embedded inline, then it will be - interpreted as a JavaScript module script according to the JavaScript Module top-level production; if it has a JSON MIME - type, then it will be interpreted as a JSON module script. Module scripts - are not affected by the defer attribute, but are - affected by the async attribute (regardless of the state - of the src attribute).

    • +
  • +

    Setting the attribute to an ASCII case-insensitive match for the string + "module" means that the script is one of the various types of + module script. + +

    +
    If the script is embedded inline +
    If the script has a JavaScript MIME type +
    It will be interpreted as a JavaScript module script according to the + JavaScript Module top-level production. + +
    If the script has a JSON MIME type +
    It will be interpreted as a JSON module script. + +
    If the script has MIME type whose essence is text/css +
    It will be interpreted as a style sheet module script. +
    + +

    Module scripts are not affected by the defer + attribute, but are affected by the async attribute + (regardless of the state of the src attribute).

    +

  • Setting the attribute to any other value means that the script is a data block, which is not processed. None of the script attributes (except HTMLScriptElement : HTMLElement { ever be reinterpreted as a different script type, even in future user agents.

    Classic scripts and JavaScript module scripts can be embedded inline, or be imported from an external - file using the src attribute, which if specified gives the URL - of the external script resource to use. If src is specified, - it must be a valid non-empty URL potentially surrounded by spaces.

    + script">JavaScript module scripts may be embedded inline, and all script types may be + imported from an external file using the src attribute, which if + specified gives the URL of the external script resource to use. If src is specified, it must be a valid non-empty URL + potentially surrounded by spaces.

    The contents of inline script elements, or the external script resource, must conform with the requirements of the JavaScript specification's HTMLScriptElement : HTMLElement {

    The contents of the external script resource for JSON module scripts must conform to the requirements of the JSON specification .

    +

    The contents of the external script resource for style + sheet module scripts must conform to the requirements of the CSS Syntax specification + .

    +

    When used to include data blocks, the data must be embedded inline, the format of the data must be given using the type attribute, and the contents of the script element must conform to the requirements @@ -87510,7 +87539,10 @@ interface ApplicationCache : EventTarget { script">JavaScript module scripts;

  • a Synthetic Module Record, for JSON - module scripts; or

    • + module scripts;

    + +

  • a Synthetic Module Record, for style sheet module scripts; or

  • null, representing a parsing failure.

    • @@ -87566,33 +87598,39 @@ interface ApplicationCache : EventTarget { data-x="concept-script">script. It has no additional items.

    -

    Module scripts can be classified into two types:

    +

    Module scripts can be classified into three types:

    • A module script is a JavaScript module script if its record is a Source Text Module Record.

      • + +

    • A module script is a JSON module script if its record is a Synthetic Module Record, and it was created via the create a JSON module script algorithm. JSON module scripts represent a parsed JSON document.

      -

      As JSON documents do not import dependent modules, and do not throw exceptions on evaluation, the fetch options and base URL of a JSON module script are always null.

      • + +
    • +

      A module script is a style sheet module script if its + record is a Synthetic Module Record, + and it was created via the create a style + sheet module script algorithm. Style sheet module scripts represent a parsed CSS style + sheet.

    The active script is determined by the following algorithm:

    @@ -88598,6 +88636,23 @@ interface ApplicationCache : EventTarget { +
  • +

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

    + +
      +

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

      2. + +

    2. Create a style sheet module + script given source text, module map settings object, + response's url, and options. + Wait until the algorithm asynchronously completes with result.

      3. + +

    3. Set module script to result.

      4. +
    +
    • +

  • Set moduleMap[url] to module script, and asynchronously complete this algorithm with module script.

    @@ -88836,6 +88891,61 @@ interface ApplicationCache : EventTarget {

  • Return script.

    • +

    To create a style sheet module script, + given a JavaScript string source, an environment settings + object settings, a URL baseURL, and some script + fetch options options, run these steps. The algorithm will asynchronously + complete with a new style sheet module script.

    + +
      +

    1. Let script be a new style sheet module script that this algorithm + will subsequently initialize.

      2. + +

    2. Set script's settings object to settings.

      3. + +

    3. Set script's base URL to + baseURL.

      4. + +

    4. Set fetch options to + options.

      5. + +

    5. Set script's parse error and + error to rethrow to null.

      6. + +

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

      7. + +

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

      8. + +
    8. +

      Upon fulfillment of promise:

      + +
        +

      1. Unset sheet's constructed flag.

        2. + +

      2. Set script's record to the result + of creating a synthetic + module record with a default export of style sheet with + settings.

        3. + +

      3. Asynchronously complete this algorithm with script.

        4. +
      +
      9. + +
    9. +

      Upon rejection of promise with reason:

      +
        +

      1. Set script's parse error to + reason.

        2. + +

      2. Asynchronously complete this algorithm with script.

        3. +
      +
      10. + +
    +

    To create a synthetic module record with a default export of a JavaScript value value with an environment settings object settings:

    @@ -123043,6 +123153,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.