From c193418187f9ff6e5de23c7555578fe2f91937ab Mon Sep 17 00:00:00 2001 From: Sam Sebree Date: Mon, 25 Nov 2019 22:03: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 --- .../css-module/css-module-worker-test.html | 37 +++++++++++++ .../css-module/import-css-module-basic.html | 52 +++++++++++++++++++ .../css-module/resources/bad_import.css | 1 + .../css-module/resources/basic.css | 3 ++ .../css_module_at_import_iframe.html | 18 +++++++ .../css-module/resources/malformed.css | 3 ++ .../css-module/resources/worker.js | 1 + .../resources/worker_dynamic_import.js | 1 + .../css-module/utf8.tentative.html | 36 +++++++++++++ .../valid-content-type.tentative.html | 21 ++++++++ 10 files changed, 173 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/malformed.css 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/resources/worker_dynamic_import.js create mode 100644 html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html create mode 100644 html/semantics/scripting-1/the-script-element/css-module/valid-content-type.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..8938d1676c3dea --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/css-module-worker-test.html @@ -0,0 +1,37 @@ + + + + import-css-module-worker + + + + + +

import-css-module-worker

+ + + + + \ 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..865950066523cf --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/import-css-module-basic.html @@ -0,0 +1,52 @@ + + + + import-css-module-basic + + + + + +

import-css-module-basic

+ + + + + + +
+ I am a test div. +
+ \ 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..9f50cf01a9fa30 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/css_module_at_import_iframe.html @@ -0,0 +1,18 @@ + + css-module-at-import + + + +
+ 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/worker.js b/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js new file mode 100644 index 00000000000000..8997ae45102bb5 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/worker.js @@ -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/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..796446b525ca03 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/resources/worker_dynamic_import.js @@ -0,0 +1 @@ +@import "basic.css" \ 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..e190bb2414955b --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/utf8.tentative.html @@ -0,0 +1,36 @@ + + +CSS modules: UTF-8 decoding + + +
+ + + + + diff --git a/html/semantics/scripting-1/the-script-element/css-module/valid-content-type.tentative.html b/html/semantics/scripting-1/the-script-element/css-module/valid-content-type.tentative.html new file mode 100644 index 00000000000000..17670cf5056092 --- /dev/null +++ b/html/semantics/scripting-1/the-script-element/css-module/valid-content-type.tentative.html @@ -0,0 +1,21 @@ + + +JSON modules: Content-Type + + +
+ + \ No newline at end of file