diff --git a/packages/core/src/namespace.spec.ts b/packages/core/src/namespace.spec.ts
index 0d929da..34561e7 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,100 @@ 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 multiple selectors', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            '@media screen and (max-width: 992px)': {
+                '& button': {
+                    background: 'violet',
+                },
+                '& span': {
+                    background: 'purple',
+                },
+            },
+        });
+        expect(result).toEqual({
+            '.my-id': {
+                background: 'red',
+            },
+            '@media screen and (max-width: 992px)': {
+                '.my-id button': {
+                    background: 'violet',
+                },
+                '.my-id span': {
+                    background: 'purple',
+                },
+            },
+        });
+    });
+
+    it('namespaces media queries with nested selectors', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            '@media screen and (max-width: 992px)': {
+                '& button': {
+                    background: 'violet',
+                    '& 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',
@@ -167,6 +274,23 @@ describe('namespace', () => {
         });
     });
 
+    it('namespaces nested pseudo elements', () => {
+        const result = namespace('.my-id', {
+            background: 'red',
+            '::before': {
+                background: 'violet',
+            },
+        });
+        expect(result).toEqual({
+            '.my-id': {
+                background: 'red',
+            },
+            '.my-id::before': {
+                background: 'violet',
+            },
+        });
+    });
+
     it('namespaces nested pseudo selectors', () => {
         const result = namespace('.my-id', {
             background: 'red',
@@ -264,6 +388,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',
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;
             }