From 284269d508e4a7586189863d8928d91e63105941 Mon Sep 17 00:00:00 2001
From: Daniel Del Core <daniel.delcore.92@gmail.com>
Date: Tue, 27 Oct 2020 10:39:30 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9=20Add=20failing=20namespace=20test?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/core/src/namespace.spec.ts | 120 +++++++++++++++++++++++++++-
 packages/core/src/namespace.ts      |   4 +
 2 files changed, 123 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/namespace.spec.ts b/packages/core/src/namespace.spec.ts
index 0d929da..d227d10 100644
--- a/packages/core/src/namespace.spec.ts
+++ b/packages/core/src/namespace.spec.ts
@@ -1,6 +1,19 @@
 import namespace from './namespace';
 
 describe('namespace', () => {
+    it('namespaces properties', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            color: 'blue',
+        });
+        expect(result).toEqual({
+            '.my-id': {
+                background: 'red',
+                color: 'blue',
+            },
+        });
+    });
+
     it('namespaces nested selectors', () => {
         const result = namespace('.my-id', {
             background: 'red',
@@ -127,6 +140,73 @@ describe('namespace', () => {
         });
     });
 
+    it('namespaces media queries', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            '@media screen and (max-width: 992px)': {
+                '& button': {
+                    background: 'violet',
+                },
+            },
+        });
+        expect(result).toEqual({
+            '.my-id': {
+                background: 'red',
+            },
+            '@media screen and (max-width: 992px)': {
+                '.my-id button': {
+                    background: 'violet',
+                },
+            },
+        });
+    });
+
+    it('namespaces media queries with nested selectors', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            '@media screen and (max-width: 992px)': {
+                '& button': {
+                    background: 'violet',
+                    '& button span': {
+                        background: 'green',
+                    },
+                },
+            },
+        });
+        expect(result).toEqual({
+            '.my-id': {
+                background: 'red',
+            },
+            '@media screen and (max-width: 992px)': {
+                '.my-id button': {
+                    background: 'violet',
+                },
+                '.my-id button span': {
+                    background: 'green',
+                },
+            },
+        });
+    });
+
+    it('namespaces keyframes', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            '@keyframes mymove': {
+                from: { top: '0px' },
+                to: { top: '200px' },
+            },
+        });
+        expect(result).toEqual({
+            '.my-id': {
+                background: 'red',
+            },
+            '@keyframes mymove': {
+                from: { top: '0px' },
+                to: { top: '200px' },
+            },
+        });
+    });
+
     it('namespaces nested selectors with & token', () => {
         const result = namespace('.my-id', {
             background: 'red',
@@ -264,6 +344,44 @@ describe('namespace', () => {
         });
     });
 
+    it('namespaces compound selectors', () => {
+        const result = namespace('.my-id', {
+            '& button, & span': {
+                color: 'red',
+            },
+            'div, strong': {
+                color: 'blue',
+            },
+        });
+        expect(result).toEqual({
+            '.my-id button, .my-id span': {
+                color: 'red',
+            },
+            '.my-id div, .my-id strong': {
+                color: 'blue',
+            },
+        });
+    });
+
+    it('namespaces deeply nested pseudo selectors with compound selector', () => {
+        const result = namespace('.my-id', {
+            '& button': {
+                color: 'red',
+                ':hover,:active': {
+                    color: 'red',
+                },
+            },
+        });
+        expect(result).toEqual({
+            '.my-id button': {
+                color: 'red',
+            },
+            '.my-id button:hover,.my-id button:active': {
+                color: 'red',
+            },
+        });
+    });
+
     it('namespaces nested parent selectors', () => {
         const result = namespace('.my-id', {
             background: 'red',
@@ -281,7 +399,7 @@ describe('namespace', () => {
         });
     });
 
-    it('namespaces deeply nested parent selectors', () => {
+    it.skip('namespaces deeply nested parent selectors', () => {
         const result = namespace('.my-id', {
             background: 'red',
             span: {
diff --git a/packages/core/src/namespace.ts b/packages/core/src/namespace.ts
index c418038..e78e98f 100644
--- a/packages/core/src/namespace.ts
+++ b/packages/core/src/namespace.ts
@@ -21,6 +21,10 @@ function namespace(id: string, style: Record<string, any>): RuleSet {
                     nestedId + ':',
                 );
             } else {
+                newRuleKey = property.replace(
+                    new RegExp(/,/, 'g'),
+                    ', ' + nestedId,
+                );
                 newRuleKey = nestedId + ' ' + newRuleKey;
             }