aphrodite-to-jss - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

CHANGELOG.md

 # Changelog
 
+## 1.1.5
+
+- Normalize properties in `fallbacks` (for example `overflowY` to `overflow-y`)
+
 ## 1.1.4
@@ -4,0 +8,0 @@

dist/__tests__/aphrodite-to-jss.js

@@ -121,4 +121,4 @@ "use strict";
 
-.a-4ae8808c--b-436018aa {
-  overflowY: auto;
+.a-4ae8808c--b-7680295e {
+  overflow-y: auto;
   overflow: auto;
@@ -145,4 +145,4 @@ overflow: overlay;
 
-.a-08216426--b-436018aa {
-  overflowY: auto;
+.a-08216426--b-7680295e {
+  overflow-y: auto;
   display: -webkit-box;
@@ -149,0 +149,0 @@ overflow: auto;

dist/__tests__/normalize.js

@@ -13,51 +13,2 @@ "use strict";
     });
-    it('should handle prefixed fallback', () => {
-        expect(normalize_1.normalizeStyle({
-            display: 'flex'
-        })).toEqual({
-            globals: {},
-            style: {
-                display: 'flex',
-                fallbacks: [
-                    { display: '-webkit-box' },
-                    { display: '-moz-box' },
-                    { display: '-ms-flexbox' },
-                    { display: '-webkit-flex' }
-                ]
-            }
-        });
-    });
-    it('should not lost existing fallbacks', () => {
-        expect(normalize_1.normalizeStyle({
-            overflow: 'overlay',
-            fallbacks: [{ overflow: 'auto' }]
-        })).toEqual({
-            globals: {},
-            style: {
-                overflow: 'overlay',
-                fallbacks: [{ overflow: 'auto' }]
-            }
-        });
-    });
-    it('should not lost existing fallbacks (object)', () => {
-        expect(normalize_1.normalizeStyle({
-            overflow: 'overlay',
-            display: 'flex',
-            // @ts-ignore: in that case we want to test user who do not follow the right syntax
-            fallbacks: { overflow: 'auto' }
-        })).toEqual({
-            globals: {},
-            style: {
-                overflow: 'overlay',
-                display: 'flex',
-                fallbacks: [
-                    { display: '-webkit-box' },
-                    { display: '-moz-box' },
-                    { display: '-ms-flexbox' },
-                    { display: '-webkit-flex' },
-                    { overflow: 'auto' }
-                ]
-            }
-        });
-    });
     it('should prefix properties', () => {
@@ -253,1 +204,64 @@ expect(normalize_1.normalizeStyle({
 });
+describe('Fallbacks', () => {
+    it('should normalize key in fallbacks', () => {
+        expect(normalize_1.normalizeStyle({
+            overflowY: 'overlay',
+            fallbacks: [{ overflowY: 'auto' }]
+        })).toEqual({
+            globals: {},
+            style: {
+                'overflow-y': 'overlay',
+                fallbacks: [{ 'overflow-y': 'auto' }]
+            }
+        });
+    });
+    it('should handle prefixed fallback', () => {
+        expect(normalize_1.normalizeStyle({
+            display: 'flex'
+        })).toEqual({
+            globals: {},
+            style: {
+                display: 'flex',
+                fallbacks: [
+                    { display: '-webkit-box' },
+                    { display: '-moz-box' },
+                    { display: '-ms-flexbox' },
+                    { display: '-webkit-flex' }
+                ]
+            }
+        });
+    });
+    it('should not lost existing fallbacks', () => {
+        expect(normalize_1.normalizeStyle({
+            overflow: 'overlay',
+            fallbacks: [{ overflow: 'auto' }]
+        })).toEqual({
+            globals: {},
+            style: {
+                overflow: 'overlay',
+                fallbacks: [{ overflow: 'auto' }]
+            }
+        });
+    });
+    it('should not lost existing fallbacks (object)', () => {
+        expect(normalize_1.normalizeStyle({
+            overflow: 'overlay',
+            display: 'flex',
+            // @ts-ignore: in that case we want to test user who do not follow the right syntax
+            fallbacks: { overflow: 'auto' }
+        })).toEqual({
+            globals: {},
+            style: {
+                overflow: 'overlay',
+                display: 'flex',
+                fallbacks: [
+                    { display: '-webkit-box' },
+                    { display: '-moz-box' },
+                    { display: '-ms-flexbox' },
+                    { display: '-webkit-flex' },
+                    { overflow: 'auto' }
+                ]
+            }
+        });
+    });
+});

dist/normalize.js

@@ -79,4 +79,12 @@ "use strict";
     // Normalize the fallback to always be an array
-    if (prefixed.fallbacks && !Array.isArray(prefixed.fallbacks)) {
-        prefixed.fallbacks = [prefixed.fallbacks];
+    if (prefixed.fallbacks) {
+        prefixed.fallbacks = Array.isArray(prefixed.fallbacks)
+            ? prefixed.fallbacks
+            : [prefixed.fallbacks];
+        prefixed.fallbacks = prefixed.fallbacks.map(fallback => {
+            const fallbackResult = normalizePlainStyle(fallback);
+            // We don't support recursive fallbacks
+            delete fallbackResult.fallbacks;
+            return fallbackResult;
+        });
     }
@@ -83,0 +91,0 @@ Object.keys(prefixed).forEach(key => {

package.json

 {
   "name": "aphrodite-to-jss",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Aphrodite compatible API on top of JSS.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/__tests__/aphrodite-to-jss.ts

@@ -138,4 +138,4 @@ import { css, StyleSheet } from '../';
 
-.a-4ae8808c--b-436018aa {
-  overflowY: auto;
+.a-4ae8808c--b-7680295e {
+  overflow-y: auto;
   overflow: auto;
@@ -165,4 +165,4 @@ overflow: overlay;
 
-.a-08216426--b-436018aa {
-  overflowY: auto;
+.a-08216426--b-7680295e {
+  overflow-y: auto;
   display: -webkit-box;
@@ -169,0 +169,0 @@ overflow: auto;

src/__tests__/normalize.ts

@@ -15,60 +15,2 @@ import { normalizeStyle, normalizeStyles } from '../normalize';
 
-  it('should handle prefixed fallback', () => {
-    expect(
-      normalizeStyle({
-        display: 'flex'
-      })
-    ).toEqual({
-      globals: {},
-      style: {
-        display: 'flex',
-        fallbacks: [
-          { display: '-webkit-box' },
-          { display: '-moz-box' },
-          { display: '-ms-flexbox' },
-          { display: '-webkit-flex' }
-        ]
-      }
-    });
-  });
-
-  it('should not lost existing fallbacks', () => {
-    expect(
-      normalizeStyle({
-        overflow: 'overlay',
-        fallbacks: [{ overflow: 'auto' }]
-      })
-    ).toEqual({
-      globals: {},
-      style: {
-        overflow: 'overlay',
-        fallbacks: [{ overflow: 'auto' }]
-      }
-    });
-  });
-
-  it('should not lost existing fallbacks (object)', () => {
-    expect(
-      normalizeStyle({
-        overflow: 'overlay',
-        display: 'flex',
-        // @ts-ignore: in that case we want to test user who do not follow the right syntax
-        fallbacks: { overflow: 'auto' }
-      })
-    ).toEqual({
-      globals: {},
-      style: {
-        overflow: 'overlay',
-        display: 'flex',
-        fallbacks: [
-          { display: '-webkit-box' },
-          { display: '-moz-box' },
-          { display: '-ms-flexbox' },
-          { display: '-webkit-flex' },
-          { overflow: 'auto' }
-        ]
-      }
-    });
-  });
-
   it('should prefix properties', () => {
@@ -290,1 +232,76 @@ expect(
 });
+
+describe('Fallbacks', () => {
+  it('should normalize key in fallbacks', () => {
+    expect(
+      normalizeStyle({
+        overflowY: 'overlay',
+        fallbacks: [{ overflowY: 'auto' }]
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        'overflow-y': 'overlay',
+        fallbacks: [{ 'overflow-y': 'auto' }]
+      }
+    });
+  });
+
+  it('should handle prefixed fallback', () => {
+    expect(
+      normalizeStyle({
+        display: 'flex'
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        display: 'flex',
+        fallbacks: [
+          { display: '-webkit-box' },
+          { display: '-moz-box' },
+          { display: '-ms-flexbox' },
+          { display: '-webkit-flex' }
+        ]
+      }
+    });
+  });
+
+  it('should not lost existing fallbacks', () => {
+    expect(
+      normalizeStyle({
+        overflow: 'overlay',
+        fallbacks: [{ overflow: 'auto' }]
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        overflow: 'overlay',
+        fallbacks: [{ overflow: 'auto' }]
+      }
+    });
+  });
+
+  it('should not lost existing fallbacks (object)', () => {
+    expect(
+      normalizeStyle({
+        overflow: 'overlay',
+        display: 'flex',
+        // @ts-ignore: in that case we want to test user who do not follow the right syntax
+        fallbacks: { overflow: 'auto' }
+      })
+    ).toEqual({
+      globals: {},
+      style: {
+        overflow: 'overlay',
+        display: 'flex',
+        fallbacks: [
+          { display: '-webkit-box' },
+          { display: '-moz-box' },
+          { display: '-ms-flexbox' },
+          { display: '-webkit-flex' },
+          { overflow: 'auto' }
+        ]
+      }
+    });
+  });
+});

src/normalize.ts

@@ -106,4 +106,14 @@ import hyphenate = require('hyphenate-style-name');
   // Normalize the fallback to always be an array
-  if (prefixed.fallbacks && !Array.isArray(prefixed.fallbacks)) {
-    prefixed.fallbacks = [prefixed.fallbacks];
+  if (prefixed.fallbacks) {
+    prefixed.fallbacks = Array.isArray(prefixed.fallbacks)
+      ? prefixed.fallbacks
+      : [prefixed.fallbacks];
+    prefixed.fallbacks = prefixed.fallbacks.map(fallback => {
+      const fallbackResult = normalizePlainStyle(fallback);
+
+      // We don't support recursive fallbacks
+      delete fallbackResult.fallbacks;
+
+      return fallbackResult;
+    });
   }
@@ -110,0 +120,0 @@

No alert changes

Improved metrics

Total package byte prevSize

187934

0.78%

Lines of code

2129

2.21%

No dependency changes