From 4c31ae918da45469711160ec81e865b2cfcbd651 Mon Sep 17 00:00:00 2001 From: Sam Sebree Date: Fri, 13 Dec 2019 19:27:50 -0800 Subject: [PATCH] [SyntheticModules] Implements CSS Modules This is the final change required for CSS Modules to be utilized by developers. Following the acceptance of this change, if you run chromium with the CSSModules runtime flag, the following is now valid syntax: CSS Modules Explainer: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md CSS Modules Spec PR: https://github.com/whatwg/html/pull/4898 Bug: 967018 Change-Id: Ifdee5b92259fb7e4e9c8f9aa88e69a98eb55c551 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799923 Commit-Queue: Sam Sebree Reviewed-by: Hiroshige Hayashizaki Reviewed-by: Kouhei Ueno Reviewed-by: Hiroki Nakagawa Reviewed-by: Yuki Shiino Cr-Commit-Position: refs/heads/master@{#724896} --- .../css-module/css-module-worker-test.html | 37 ++++++++++++++++ .../css-module/import-css-module-basic.html | 44 +++++++++++++++++++ .../css-module/resources/bad-import.css | 1 + .../css-module/resources/basic.css | 3 ++ .../css-module-at-import-iframe.html | 18 ++++++++ .../resources/css-module-basic-iframe.html | 18 ++++++++ .../resources/malformed-iframe.html | 11 +++++ .../css-module/resources/malformed.css | 3 ++ .../css-module/resources/utf8.css | 3 ++ .../resources/worker-dynamic-import.js | 3 ++ .../css-module/resources/worker.js | 2 + .../css-module/utf8.tentative.html | 34 ++++++++++++++ 12 files changed, 177 insertions(+) create mode 100644 html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html create mode 100644 html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/basic.css create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js create mode 100644 html/semantics/scripting-1/the-script-element/css-module/resources/worker.js create mode 100644 html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html diff --git a/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html b/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html new file mode 100644 index 00000000000000..1618f40eb6119c --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html @@ -0,0 +1,37 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html b/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html new file mode 100644 index 00000000000000..902430d0779e3b --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html @@ -0,0 +1,44 @@ + + + + + + + + + + \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css b/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css new file mode 100644 index 00000000000000..796446b525ca03 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/bad-import.css @@ -0,0 +1 @@ +@import "basic.css" \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css b/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css new file mode 100644 index 00000000000000..3ea2ef45339c41 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/basic.css @@ -0,0 +1,3 @@ +#test { + background-color:red; +} \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html b/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html new file mode 100644 index 00000000000000..86e7af7d51db98 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-at-import-iframe.html @@ -0,0 +1,18 @@ + + + + + +
+ I am a test div. +
+ \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html b/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html new file mode 100644 index 00000000000000..3a555c392716c0 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/css-module-basic-iframe.html @@ -0,0 +1,18 @@ + + + + + +
+ I am a test div. +
+ \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html b/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html new file mode 100644 index 00000000000000..471edd680cf656 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/malformed-iframe.html @@ -0,0 +1,11 @@ + + + + +
+ I am a test div. +
+ \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css b/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css new file mode 100644 index 00000000000000..fb20336584e774 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/malformed.css @@ -0,0 +1,3 @@ +#test {{ + background-color:red; +} \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css b/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css new file mode 100644 index 00000000000000..35d16cd1c5b0d6 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/utf8.css @@ -0,0 +1,3 @@ +#test { + content: "…"; +} \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js b/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js new file mode 100644 index 00000000000000..9a3b0bb105b3dd --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/worker-dynamic-import.js @@ -0,0 +1,3 @@ +import("./basic.css") + .then(() => postMessage("LOADED")) + .catch(e => postMessage("NOT LOADED")); \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js b/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js new file mode 100644 index 00000000000000..397a12c3b53c60 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js @@ -0,0 +1,2 @@ +import "./basic.css"; +postMessage("Unexpectedly loaded"); \ No newline at end of file diff --git a/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html b/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html new file mode 100644 index 00000000000000..f71339b4d59185 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html @@ -0,0 +1,34 @@ + + +CSS modules: UTF-8 decoding + + + + + + +