💩 Add failing namespace tests

danieldelcore · Oct 27, 2020 · 284269d · 284269d
1 parent 8dab695
commit 284269d
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 1 deletion.
diff --git 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
@@ -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;
             }