chore: Make all global selectors apply uniformly

Author: jkuelz

src/shared/declaration/__tests__/selector.test.ts

@@ -20,6 +20,7 @@ describe('Selector', () => {
   test('creates selector for context', () => {
     expect(selector.for({ global: ['.theme'], local: ['.context'] })).toEqual('.theme .context');
     expect(selector.for({ global: [':root'], local: ['.context'] })).toEqual('.context');
+    expect(selector.for({ global: ['html', '.theme'], local: ['.context'] })).toEqual('.theme .context');
   });
 
   test('creates selector for context within mode', () => {
@@ -34,4 +35,10 @@ describe('Selector', () => {
     const selector = new Selector((sel) => `${sel}:not(.theme)`);
     expect(selector.for({ global: [':root', '.mode'], local: ['.context'] })).toEqual('.mode .context:not(.theme)');
   });
-});
+
+  test('applies global selectors alone when no local selectors', () => {
+    expect(selector.for({ global: [':root'] })).toEqual(':root');
+    expect(selector.for({ global: ['body'] })).toEqual('body');
+    expect(selector.for({ global: ['html'] })).toEqual('html');
+  });
+});

src/shared/declaration/selector.ts

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import type { SelectorCustomizer } from './interfaces';
+import { isGlobalSelector } from '../styles/selector';
 
 interface SelectorParams {
   global: string[];
@@ -15,13 +16,13 @@ export class Selector {
   }
 
   for({ global, local }: SelectorParams): string {
-    if (global.length === 1 && !local?.length && global[0] === ':root') {
-      // :root is only applied alone
-      return this.customizer(':root');
+    if (global.length === 1 && !local?.length && isGlobalSelector(global[0])) {
+      // Global selectors (:root, body, html) are only applied alone
+      return this.customizer(global[0]);
     }
-    const globalWithoutRoot = global.filter((f) => f !== ':root');
+    const customGlobal = global.filter((f) => !isGlobalSelector(f));
 
-    let selector = this.toSelector(globalWithoutRoot);
+    let selector = this.toSelector(customGlobal);
     if (local?.length) {
       selector += ` ${this.toSelector(local)}`;
     }