add the :host(.anonymous-content-host) selector to the built CSS (#11)

* add the :host(.anonymous-content-host) selector to the built CSS * simplify string, add comma * rebase + fix tests
FirefoxUX · Feb 15, 2024 · 6ad4ac2 · 6ad4ac2
1 parent d5eb84a
commit 6ad4ac2
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 9 deletions.
diff --git a/toolkit/themes/shared/design-system/build/css/tokens-brand.css b/toolkit/themes/shared/design-system/build/css/tokens-brand.css
@@ -11,7 +11,8 @@
 
 @import url("chrome://global/skin/design-system/tokens-shared.css");
 
-:root {
+:root,
+:host(.anonymous-content-host) {
   --text-color-deemphasized: light-dark(color-mix(in srgb, currentColor 69%, transparent), color-mix(in srgb, currentColor 75%, transparent));
   --text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
   --border-interactive-color: light-dark(var(--color-gray-60), var(--color-gray-50));

diff --git a/toolkit/themes/shared/design-system/build/css/tokens-platform.css b/toolkit/themes/shared/design-system/build/css/tokens-platform.css
@@ -11,7 +11,8 @@
 
 @import url("chrome://global/skin/design-system/tokens-shared.css");
 
-:root {
+:root,
+:host(.anonymous-content-host) {
   --text-color: currentColor;
   --border-interactive-color: color-mix(in srgb, currentColor 15%, var(--color-gray-60));
 }
diff --git a/toolkit/themes/shared/design-system/build/css/tokens-shared.css b/toolkit/themes/shared/design-system/build/css/tokens-shared.css
@@ -9,7 +9,8 @@
  * and run `npm run build` to see your changes.
  */
 
-:root {
+:root,
+:host(.anonymous-content-host) {
   --text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent);
   --color-white: #ffffff;
   --color-yellow-05: #ffebcd;

diff --git a/toolkit/themes/shared/design-system/config.js b/toolkit/themes/shared/design-system/config.js
@@ -46,6 +46,8 @@ const MEDIA_QUERY_PROPERTY_MAP = {
   "prefers-contrast": "prefersContrast",
 };
 
+const BASE_SELECTOR = ":root,\n" + ":host(.anonymous-content-host) {\n";
+
 /**
  * Creates a surface-specific formatter. The formatter is used to build
  * our different CSS files, including "prefers-contrast" and "forced-colors"
@@ -55,12 +57,12 @@ const MEDIA_QUERY_PROPERTY_MAP = {
  * @param {string} surface
  *  Which desktop area we are generating CSS for.
  *  Either "brand" (i.e. in-content) or "platform" (i.e. chrome).
- * @returns {Function}
+ * @returns {Function} - Formatter function that returns a CSS string.
  */
 const createDesktopFormat = surface => args => {
   return (
     customFileHeader(surface) +
-    ":root {\n" +
+    BASE_SELECTOR +
     formatTokens({
       surface,
       args,

diff --git a/toolkit/themes/shared/design-system/tests/config.test.js b/toolkit/themes/shared/design-system/tests/config.test.js
@@ -74,8 +74,7 @@ const SHARED_FORCED_COLORS_CSS_RULES = {
 const BRAND_CSS_RULES = {
   "--border-interactive-color":
     "light-dark(var(--color-gray-60), var(--color-gray-50))",
-  "--text-color":
-    "light-dark(var(--color-gray-100), var(--color-gray-05))",
+  "--text-color": "light-dark(var(--color-gray-100), var(--color-gray-05))",
   "--text-color-deemphasized":
     "light-dark(color-mix(in srgb, currentColor 69%, transparent), color-mix(in srgb, currentColor 75%, transparent))",
 };
@@ -129,7 +128,7 @@ describe("CSS formats", () => {
       encoding: "UTF-8",
     });
 
-    let rulesByMediaQuery = output.split("@media");
+    let rulesByMediaQuery = output.split(/(?=\@media)/);
 
     it("should contain three blocks of CSS, including media queries", () => {
       expect(rulesByMediaQuery.length).toBe(3);
@@ -142,7 +141,8 @@ describe("CSS formats", () => {
     });
 
     rulesByMediaQuery.forEach(ruleSet => {
-      let queryName = ruleSet.trim().match(/(?<=\().+?(?=\) \{)/) || "base";
+      let queryName =
+        ruleSet.trim().match(/(?<=\@media\s*\().+?(?=\) \{)/) || "base";
       it(`should produce the expected ${queryName} CSS rules`, () => {
         let formattedCSS = formatCSS(ruleSet);
         expect(formattedCSS).toStrictEqual(SHARED_FIXTURE_BY_QUERY[queryName]);