Add tests

Author: Michael Vurchio

test/replace.test.js

@@ -79,6 +79,123 @@ describe('combining multiple classes', () => {
   });
 });
 
+describe('Classname is part of a selector', () => {
+  
+  test('CSS Modules class targetting children', async () => {
+    const source =
+      '<style>\n' +
+        'div.red > sup { font-size: 12px; }\n' +
+        '.red { color: red; }\n' +
+      '</style>\n' +
+      '<div class="$style.red">Red<sup>*</sup></div>';
+
+    const expectedOutput =
+      '<style>\n' +
+        ':global(div.red-123) > sup { font-size: 12px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+      '</style>\n' +
+      '<div class="red-123">Red<sup>*</sup></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class has a parent', async () => {
+    const source =
+      '<style>\n' +
+        'div .semibold .red { font-size: 20px; }\n' +
+        '.red { color: red; }\n' +
+        '.semibold { font-weight: 600; }\n' +
+      '</style>\n' +
+      '<div><strong class="$style.semibold"><span class="$style.red">Red</span></strong></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        'div :global(.semibold-123) :global(.red-123) { font-size: 20px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+        ':global(.semibold-123) { font-weight: 600; }\n' +
+      '</style>\n' +
+      '<div><strong class="semibold-123"><span class="red-123">Red</span></strong></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class has a global parent', async () => {
+    const source =
+      '<style>\n' +
+        ':global(div) .red { font-size: 20px; }\n' +
+        '.red { color: red; }\n' +
+      '</style>\n' +
+      '<div><span class="$style.red">Red</span></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        ':global(div) :global(.red-123) { font-size: 20px; }\n' +
+        ':global(.red-123) { color: red; }\n' +
+      '</style>\n' +
+      '<div><span class="red-123">Red</span></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+
+  test('CSS Modules class is used within a media query', async () => {
+    const source =
+      '<style>\n' +
+        '@media (min-width: 37.5em) {\n' +
+          '.red { color: red; }\n' +
+          'div.bold { font-weight: bold; }\n' +
+        '}\n' +
+      '</style>\n' +
+      '<div class="$style.bold"><span class="$style.red">Red</span></div>';
+  
+    const expectedOutput =
+      '<style>\n' +
+        '@media (min-width: 37.5em) {\n' +
+          ':global(.red-123) { color: red; }\n' +
+          ':global(div.bold-123) { font-weight: bold; }\n' +
+        '}\n' +
+      '</style>\n' +
+      '<div class="bold-123"><span class="red-123">Red</span></div>';
+
+    const output = await compiler(
+      {
+        source,
+      },
+      {
+        localIdentName: '[local]-123',
+      }
+    );
+
+    expect(output).toBe(expectedOutput);
+  });
+});
+
 describe('using dynamic classes', () => {
   describe('when matched class is empty', () => {
     // The parser will identify a class named ''