fix: Global selector sorting and chaining logic (#124)

Author: jkuelz

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

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

src/shared/declaration/selector.ts

@@ -20,9 +20,9 @@ export class Selector {
       // Global selectors (:root, body, html) are only applied alone
       return this.customizer(global[0]);
     }
-    const customGlobal = global.filter((f) => !isGlobalSelector(f));
+    const nonGlobalSelectors = global.filter((f) => !isGlobalSelector(f));
 
-    let selector = this.toSelector(customGlobal);
+    let selector = this.toSelector(nonGlobalSelectors);
     if (local?.length) {
       selector += ` ${this.toSelector(local)}`;
     }
@@ -31,7 +31,17 @@ export class Selector {
   }
 
   private toSelector(individuals: string[]): string {
-    // Sort to guarantee a stable generation
-    return individuals.slice().sort().join('');
+    // Sort to guarantee a stable generation - element selectors first, then class selectors
+    const isElement = (selector: string) => {
+      return ['.', ':', '#'].indexOf(selector.charAt(0)) === -1;
+    };
+    return individuals
+      .slice()
+      .sort((a, b) => {
+        if (isElement(a) && !isElement(b)) return -1;
+        if (!isElement(a) && isElement(b)) return 1;
+        return a.localeCompare(b);
+      })
+      .join('');
   }
 }